複数のJavaScriptファイルを1コネクションでスッキリ一括読み込みする方法
2007年02月06日-
Pre-compression also doesn't solve a multiple connection issue.
複数のJavaScriptファイルを1コネクションでスッキリ一括読み込みする方法。
HTMLでの読み込みタグも次のようにスッキリできます。
<!-- Namespace source file -->
<script src = "yahoo.js" ></script>
<!-- Dependency source files -->
<script src = "dom.js" ></script>
<script src = "event.js" ></script>
<script src = "dragdrop.js" ></script>
<!-- Slider source file -->
<script src = "slider.js" ></script>
↓
<script src = "scripts/yahoo.js, dom.js, event.js, dragdrop.js, slider.js"></script>
やり方はそんなに難しくなくて、まず、.htaccessなどでscriptsファイルをphpとして動作するように設定します。
<FilesMatch "^scripts$">
ForceType application/x-httpd-php
</FilesMatch>
で、リンク先の「Create “scripts”」にあるPHPスクリプトを作成して、scripts として保存しましょう。
これで、scripts/aaa.js とか、scripts/hogehoge.js にアクセスされると保存したPHPスクリプトが動作します。
PHPスクリプトはキャッシュディレクトリ ( cache/ ) を作る必要があります。これは複数のJavaScriptファイルを1個にしたときのキャッシュを保存するようです。
あと、読み込むJavaScriptファイルはscriptsと同じ階層に置くとよいようです。
要はPHPで複数のファイルを読み込んで、結合して1個にまとめ、1ファイルとして転送するわけですね。
出力のキャッシュもしてくれるので毎回ファイルを結合はしない上、E-TagやLast-Modifiedによるブラウザのキャッシュ管理やGZIP圧縮転送なんかの機能もスクリプトでやってくれるみたいです。(GZIPはデフォルトではオフ)
なかなかよいかもです。