jquery - djangoテンプレートにjqueryおよびjavascriptファイルを効率的にロードする

Question

私の django プロジェクトの 1 つで、多数のカスタム jquery スクリプトと多数のオープン ソース jquery プラグインを使用しています。ここで、ベース テンプレートにすべての jquery スクリプトを読み込むと、読み込まれた jquery ファイルのいずれかまたは一部を必要としない未使用の JavaScript コードがテンプレートに読み込まれ、そのページの読み込み時間に影響します。特定のテンプレート。

だから、私が取っている現在のアプローチは

• ベース テンプレートに基本的な 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 コードを効率的にロードすることなく、コードの繰り返しを防ぐにはどうすればよいですか?