在 django 模板中有效地加载 jquery 和 javascript 文件答案

【问题标题】：efficiently loading jquery and javascript files in django templates在 django 模板中有效地加载 jquery 和 javascript 文件
【发布时间】：2013-05-17 11:51:47
【问题描述】：

在我的一个 django 项目中，我使用了许多自定义 jquery 脚本和许多开源 jquery 插件。现在，如果我在基本模板中加载所有 jquery 脚本，我将在模板中加载许多未使用的 javascript 代码，这些代码不需要任何/某些已加载的 jquery 文件，这将影响页面加载时间特定的模板。

所以，我目前采取的方法是

在基本模板中加载基本的 jquery 脚本（每个模板都需要）
在基本模板中为 js 定义一个块，并有选择地为每个模板加载所需的 javascript。例如 {% block selective_js %}{% endblock selective_js %}

上述方法效果很好，但我看到的唯一问题是模板中有很多代码重复。比如说：

我有以下 javascript 文件

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.1.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.3.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.4.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.5.js"></script>

现在在不止一个模板中，我需要包含上述所有 javascript 文件，并且还希望在提到的脚本中初始化一些方法。所以目前，我必须在所有模板中这样做：

{% block selective_js %}

    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.1.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.2.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.3.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.4.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.5.js"></script>

    <!-- Initialize Methods -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('some_element').initializeScript();
        });
    </script>

{% endblock selective_js %}

这意味着模板中有很多代码重复。

问题：

如何避免重复代码而无需以有效的方式加载未使用的 javascript 代码？

【问题讨论】：

将它们包含在基本模板中，但缩小或compress them。这样，它们只需要下载一次（一个请求），并且会在后续请求中保存在缓存中。

标签： jquery django performance load

【解决方案1】：

在您包含“默认”JavaScript 文件的父模板中定义一个块，然后根据需要扩展该块：

# 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 %}

这将防止您的模板重复。查看：template inheritance 了解有关模板和继承的更多信息。

您可以使用django-compressor 组合和缩小 CSS 和 JS 导入并缓存它们以实现高效加载。

【讨论】：