Clever Geek Handbook

JSファイルの結合2.0（1/2）

最近、サイトのすべての外部JavaScriptファイルを1つの大きなファイルに結合し、一度だけダウンロードできるようになりました。 率直に言って、これは良いことです。ブラウザは、1ページを表示するためにサーバーに1億のリクエストを送信しません1 、ダウンロード速度が向上し、ユーザーは満足し、開発者は休みます。

いつものように、軟膏の軟膏にハエがあります-この場合、最初のリクエストでロードできなかった多くのものが結合ファイルに分類されます。 2 対応する議論とhabratopikへのリンクがあったはずです。 成功しました。 ほとんどの場合、これに対抗するために、不必要な部品を手で捨てることを提案します...個人的に、毎回数十（または数百） 3キロバイトのJavaScriptコードをシャベルで削って、作業を急がせます。

under cat：モジュール間の依存関係を解決するための最も簡単なアルゴリズムの説明



建設的な提案



最初の文：使用しているフレームワークをコンポーネント部分に分解します。 JSON-個別、AJAX-個別、DOMとの連携-個別、フォーム-個別。 その後、「不要なものを捨てる」タスクは「必要なものだけを集める」タスクに変わります。 明確なプラス-アセンブリの結果は少なくなりました。 疑いの余地のないマイナスは、「正しい」何かを忘れると、すべてが機能しなくなることです。

2番目の文：コンポーネント間の依存関係に関する情報を保存します。 （フォームは関数DOM、JSON-AJAXなどを使用します。）このステップでは、必要なものを忘れるのが著しく難しくなり、アセンブリは楽しいパズル「... @＃$、なぜすべてが機能しなくなったのか...」からルーチンに変わります面倒な操作。

3番目の提案：サイト全体が必要とする特定のモジュールに関する情報を保存します。 AJAXが使用されていますか？ フォームはありますか？ 異常なコントロールはありますか？

4番目の提案：考え、機械を機能させる。



理論



正式な観点から見ると、最初と2番目のステップが完了すると、 4つの依存関係のツリーができます。 たとえば... （ピアニストを撃たないでください-例は指から吸い込まれます） 

 -dom.js
   -array.map.js
     -array.js
   -sprinf.js
 -calendar.js
   -date.js
   -mycoolcombobox.js
     -dom.js
       -array.map.js
         -array.js
       -sprinf.js
 -animated.pane.js
   -pane.js
     -dom.js
       -array.map.js
         -array.js
       -sprinf.js
   -animation.js
     -transition.js
 ...など...


3番目のステップでは、サイトで直接必要な頂点を選択します。 dom.jsおよびanimated.pane.jsとします。

今では、得られた樹木セットの深さを回避するのは技術の問題です 

 -array.js
 -array.map.js
 -sprinf.js
 -dom.js
 -array.js
 -array.map.js
 -sprinf.js
 -dom.js
 -pane.js
 -transition.js
 -animation.js
 -animated.pane.js


...重複するアイテムを削除します。 

 -array.js
 -array.map.js
 -sprinf.js
 -dom.js
 -pane.js
 -transition.js
 -animation.js
 -animated.pane.js


対応するモジュールを一緒にマージします。

少し練習



依存関係情報を保存する方法は？



個人的には、「モジュール」にサービスコメントを追加することを好みます。 

 // #REQUIRE：array.map.js
 // #REQUIRE：sprintf.js
 ....
コード


テキストファイルからこのようなマークを選択することは難しくありません。

当然、完全な依存関係ツリーを取得するには、使用可能なすべてのファイルを調べる必要がありますが、通常、完全なツリーは必要ありません。

何に来たの？



モジュールの形成とモジュール間の依存関係に一度多くの時間を費やしたので、外部ファイルのダウンロードされたクライアントの量を減らすたびに時間を節約します。 いいね それでも、問題の一部は残っています。現在のページでこのコードが不要な場合でも、ユーザーはサイトで使用されているすべてのJSコードを一度にダウンロードします。

（続きます...）

1正しく構成されたキャッシュ（ 'Expires'の存在）を使用すると、これらの要求は最初のページのロード時にのみ送信されます。 それにもかかわらず、彼らは服で満たされています。

2たとえば、個々の関数「$」と「$$」の代わりに、プロトタイプ全体がそうです。

3 JSフレームワークを使用していません（たとえあなた自身の発明の自転車であっても）？

4実際にはツリーではなく、DAG（Directional Acyclic Graph）-ロシア語の正しい用語がわかりません。 ああ、そうです、依存関係にサイクルがある場合-何かがどこかで壊れていました。


More articles:


All Articles