web-dev-qa-db-ja.com

複数のjavascript / cssファイル：ベストプラクティス？

現在、約7つのJavascriptファイル（さまざまなjQueryプラグインのおかげ）と4〜5つのCSSファイルがあります。ドキュメントのどこにロードする必要があるかなど、これらを処理するためのベストプラクティスは何ですか？ YSlowは、Javascriptファイルを-可能であれば-最後にインクルードするべきだと教えてくれました。体の終わり？それは、デリミタがコンテンツを書くかどうかであるようだと述べています。私のすべてのJavascriptファイルは関数とjQueryコード（すべてready（）のときに実行されます）なので、問題ありません。

では、CSSとJavascriptファイルを1つずつ含め、残りを含めるべきでしょうか。すべてのファイルを1つに連結する必要がありますか？私のタグをドキュメントの一番最後に配置する必要がありますか？

編集： FWIWはい、これはPHPです。

phpjavascriptjqueryhtmlcss
55
cletus

PHP Minify を使用することをお勧めします。これにより、JSまたはCSSファイルのグループに対して単一のHTTPリクエストを作成できます。 Minifyは、クライアント側のキャッシング用のGZipping、圧縮、HTTPヘッダーも処理します。

編集：Minifyでは、ページごとに異なるファイルを含めることができるようにリクエストを設定することもできます。たとえば、特定のページのカスタムJSコードと一緒のJSファイルのコアセット、または他のページのコアJSファイルのみ。

開発中は、通常どおりすべてのファイルをインクルードし、本番環境への切り替えが近づくと、すべてのCSSおよびJSファイルを縮小して1つのHTTPリクエストに結合します。セットアップと操作は本当に簡単です。

また、はい。CSSファイルを先頭に設定し、JSファイルを下部に配置する必要があります。JSファイルはページに書き込み、タイムアウトの問題を引き起こす可能性があるためです。

JSファイルを含める方法は次のとおりです。

</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>

編集： Cuzillion を使用して、ページの設定方法を確認することもできます。

37
Justin Yost

これが私がすることです。私は、最大2つのJavaScriptファイルを使用し、通常は各ページに1つのCSSファイルを使用します。どのJSファイルがすべてのページで共通になるか（または十分に近いため、jQueryを含むファイルが適切な候補になるでしょう）、それらを連結し、 jsmin-php そして、結合されたファイルをキャッシュします。その1ページのみに固有のJSファイルが残っている場合は、それらを連結、縮小、およびキャッシュして1つのファイルにします。最初のJSファイルは複数のページにわたって呼び出され、2番目のファイルはその1つまたはおそらく数ページでのみ呼び出されます。

css-min を使用する場合は、CSSでも同じ概念を使用できますが、通常、CSSには1つのファイルしか使用しません。もう1つ、キャッシュファイルを作成するときに、ファイルの先頭に少しPHPコードを入れて、GZippedファイルとして機能させます。とにかく、ユーザーのブラウザーがファイルをキャッシュする可能性が高くなるように、有効期限ヘッダーを設定することもできます。Apacheを介してGZippingを有効にすることもできると思います。

キャッシングについては、ファイル作成時間が設定した時間よりも古いかどうかを確認します。そうであれば、キャッシュファイルを再作成して提供します。それ以外の場合は、既存のキャッシュファイルを取得します。

4
VirtuosiMedia

JavaScriptに基づくソリューション（PHP Minify）など）を使用してCSSを含めることはお勧めしません。訪問者がJavaScriptを無効にするとページが使用できなくなるためです。

2
jeroen

サーバー側のソリューションにアクセスできると明言していませんが、アクセスできることを前提として、私は常にPHPを使用して以下を実行することを含む）メソッドを使用しています。

jquery.js.php：

<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
 {
echo file_get_contents('jquery.' . $file . '.js');
 }
?>

上記のスニペットを配置した後、通常どおりにファイルを呼び出します。

<script type="text/javascript" src="jquery.js.php"></script>

そして、必要となる正確な機能に気づいている場合は、要件をクエリ文字列（jquery.js.php？r = core、effects）として渡すだけです。私のCSS要件がまったく同じである場合は、まったく同じです。

2
Hexagon Theory

ファイルを縮小して組み合わせるというアイデアは素晴らしいです。

私のサイトでも同様のことをしていますが、開発を容易にするために、次のようなコードをお勧めします。

if (evironment == production) {
  echo "<style>@import(/Styles/Combined.css);</style>"
} else {
  echo "<style>@import(/Styles/File1.css);</style>"
  echo "<style>@import(/Styles/File2.css);</style>"
}

これにより、開発中にファイルを分離して管理を容易にし、展開中に結合したファイルを使用してページの読み込みを速くすることができます。これは、展開プロセスの一部として、ファイルを組み合わせて変数を変更できることを前提としています。

JSを低く保つとページの残りの外観に具体的な影響があり、より速く感じるので、YUIの推奨事項に従って、下部にjs、上部にcssを含めることを確実に検討してください。

0
mjallday

私はまた、すべてのjqueryプラグインを1つのファイルにコピーして貼り付ける傾向があります：jquery.plugins.jsにリンクします

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

実際のjqueryライブラリ。

0
Birk