efficiently loading jquery and javascript files in django templates

Question

In one of my django projects i am using lots of custom jquery scripts and lots of open source jquery plugins. Now if i load all the jquery scripts in my base template, I wil

Answer 1

Define a block in your parent template where you include your "default" JavaScript files and then extend the block as needed:

# base.html

{% block js %}
    <script src="{{ STATIC_URL }}js/jquery.1.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.2.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.3.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.4.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.5.js"></script>
{% endblock %}


# child.html

{% extends "base.html %}

{% block js %}
    {{ block.super }} {# includes previous content in block #}
    {# view-specific imports here #}
{% endblock %}

This will prevent repetition in your templates. Check out: template inheritance for more information about templates and inheritance.

You can use django-compressor to combine and minify CSS and JS imports and cache them for efficient loading.