0

私のapplication.jsファイルには次のものがあります：

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require bootstrap
//= require_tree .

私のjavascriptフォルダーツリーには、さらに18個のjsファイルが含まれています。ファイルがかなり大きくなっています。

複数のクラウドフロント インスタンスを使用して他のアセット (画像など) を提供していますが、application.js の読み込みに最大 1 秒かかる場合があることに気付きました (gzip された後でも)。

application.js (さらに言えば application.css) を 4 ～ 5 個のチャンクに分割して、読み込みを高速化するにはどうすればよいでしょうか? これは可能ですか、それとも正しいことですか?

4

3 に答える 3

0

多くの場合、JavaScript はページ上の特定の要素と対話するように記述されています。その場合、ブラウザはすべてのページで JavaScript を評価しますが、適切なページ要素が存在する場合にのみ有効にします。そのページに必要な JavaScript は、サイト全体の application.js スクリプトの一部にするか、ビュー テンプレートまたはアプリケーション レイアウトで javascript_include_tag ステートメントを使用してページに含めることができます。

JavaScript の実行は、

  • ページ上の独自の要素の存在、または
  • HTML body タグの属性。

より組織化されたアプローチは、HTML body タグの属性をテストすることです。

  • ページの body 要素に class または id 属性を設定します。
  • これらのクラスまたは ID を解析し、適切な関数を呼び出す JavaScript の関数を使用します。

まず、アプリケーションのレイアウトを変更する必要があります。app/views/layouts/application.html.erbファイルの<body>ステートメントを次のように置き換えます。

<body class="<%= params[:controller] %>">

ページが Projects コントローラーによって生成されると仮定すると、レンダリングされたページには次のものが含まれます。

<body class="projects">

JavaScript コードで次の条件を使用します。

$('document').ready(function() {
  if ($('body.projects').length) {
    console.log("Page generated by the projects controller.");
  }
});

(... RailsAppsProject から、「Unholy Rails: Javascript を Rails に追加する」 . 読んでください!

于 2013-04-20T23:19:11.673 に答える