複数の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はデフォルトではオフ)
なかなかよいかもです。
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ