Css/Jsの分派化 - 正しい方法ですか？

Question

私のプロジェクトでは、各ページに依存するJavascriptとCssの束があります。開発中に私はちょうどページにこのコードをダンプしましたが、今私はそれをきれいにするために探しています...

それは一般的なアプローチは、アプリケーションのすべてのJavascript/CSSを2つの大きな最小化されるファイル

このアプローチでは、すべてのフロントエンドコードがサーバーから一度だけ取り込まれるため、帯域幅が減少するという利点があります。ただし、アプリケーションのメモリフットプリントを増やすことになります。私が実際に必要としない各ページのための機能の全体のトン - それはなぜ私はそれらをページ単位で始めていたのですか。

は、他の誰かが気にしていることですか、この問題を管理する方法はありますか？

はい、私は条件付き関数の作成を行うと思っていました。なぜなら、私の見解では少しハッキリしていますが、各ページに条件付きでコードを実行する必要があるからです。

また、一度も使用されていないCss全体を定義するには、多くの費用がかかりますか？

Answer 1

アプリケーションで1つの大きなヒットでjavascript/CSSを使用すると、ブラウザはすべてのページに必要なすべてをキャッシュすることができます。サイトの標準的なユースケースでは、ユーザーが一定の間滞在してナビゲートすることが望ましい場合は、これを使用することをお勧めします。

ただし、リンク先ページをすばやく読み込みたい場合は、ユーザーが移動する可能性があるため、このページに必要なCSS/javascriptのみを提供することを検討してください。

大きなCSSファイルのパフォーマンスオーバーヘッドの点では、目立つものはありません。最新のブラウザーはすべて、スタイルを適用するために高度に最適化されています。

javascriptに関しては、条件付き関数の作成を使用しないことをお勧めします。条件付き名前空間の作成は容認でき、必須ですが、関数は1か所だけで宣言する必要があります。

Answer 2

帯域幅の最大のことは、サーバーが出力を圧縮していることを確認することです。静的なドキュメントタイプは圧縮する必要があります（html、js、cssなど）。

たとえば、jQueryコアは約からです。サーバがブラウザに送る圧縮された出力のためだけに90KBから30KB。

圧縮を考慮すると、実際にには、JSファイルを分割するためにが必要です。

ドキュメンテーションを非圧縮バージョンに入れることができるため、マイニングプロセスによって本番環境のコメントがすべて削除されるため、私のコードを小さくして難読化するのが本当に好きです。

Answer 3

1つの方法は、すべての共有JavaScriptを1つのファイルに圧縮して圧縮し、各ページに配信することです。その後、ページ固有のjavascriptは、（私は非常に共通のページのjavascriptをメインのjavascriptファイルに入れることを検討しますが）独自のファイルに圧縮/縮小することができます。

私は常に各ページのファイルを分割するのではなく、すべてのCSSを1つのファイルに圧縮/縮小する習慣を持っていました。これは、ページ固有のファイルの一部が非常に小さくなる可能性があり、理想的にはサイト全体でできるだけ多くのCSSを共有するためです。

ジャスパーのように、あなたのサーバーが静的リソース（javascriptやcssなど）をGZIPingしていることを確認することが最も重要です。

Answer 4

JavaScriptコードがたくさんある場合は、jsファイルの非同期読み込みを見ることができます。

ExtJsやQooxdooのような大きなプロジェクトの中には、必要なコードのみを読み込むためのローダーが組み込まれていますが、これを単純化するライブラリがたくさんあります（例えばhead.js、LAB.jsなど）。

大きなアプリの場合はブラウザに重いものになる可能性があるJavaScriptコード全体ではなく、必要なファイルだけを読み込むアプリケーションを作成することができます。