サーバーサイドでJSとCSSをバンドルする方法
2007年11月9日
How To Minimize Your Javascript and CSS Files for Faster Page Loadsという海外のブログでJSとCSSを最小限に抑えてページの読み込みを高速化する方法。具体的にはファイル自体を圧縮する方法と外部読み込みをバンドルする方法がある。今回はその中のサーバーサイドでバンドルする方法を紹介します。
この記事の内容
Bundle-Fu – Bundle Your JS/CSS Assets in 10 Seconds or Less
Ruby on Railsのプラグイン。RubyとRailsをインストールする必要がある。
Make Your Pages Load Faster by Combining and Compressing Javascript and CSS Files
PHPと.htaccessを利用してJavascriptとCSSをまとめて記述することができる方法です。例えば、javascriptを読み込む場合、<script src="">で以下のファイルを読み込むとすると
http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http://www.creatype.nl/javascript/dragdrop.js http://www.creatype.nl/javascript/slider.js
上記の外部読み込みをコロンで連ねて記述できます。
http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js
こうして一文で読み込めるようにできるのでページのリロード速度もアップするようです。
使い方はまずはcombine.phpをDLしてサーバーにアップロードします。
そして.htaccsessに以下の記述をしてアップロードします。
RewriteEngine On RewriteBase / RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1 RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1
個人的にはクライアントサイドでバンドルできるようなJSライブラリがほしい所です。
誰か作ってくださらないでしょうか。