アセットを縮小するとファイル サイズが小さくなり、ページの読み込みにかかる時間が短縮されるため、アセットを縮小するのが良いことはわかっています。また、アセットを組み合わせると HTTP リクエストの数が減り、ページの読み込みにかかる時間が短縮されるため、アセットを組み合わせるとよいこともわかっています。これは重要なことです。なぜなら、まだダイヤルアップを使用している人がいて、モバイル デバイスの接続が高速ではないことが多いからです。
私が苦労しているのは、アセットの縮小と結合をワークフローに簡単に追加する方法です。CakePHP を使用してローカルで開発し、バージョン管理には Git を使用しています。ライブに移行するときは、ライブ サイトをホストしているサーバーに SSH で接続し、最新のコミットをマージします。
独自のソリューションを展開する方法は次のとおりです（縮小のみを考慮し、テストされていません！）：
1.) 私の開発環境の「app/Config/core.php」ファイルの「デバッグ」レベルは常に 0より大きい値に設定され、本番環境では常に 0 になります。
2.) ファイル システムでは、すべての CSS と JavaScript は次のように外部ファイルに保存されます。
- app/webroot/css/used-site-wide.css
- app/webroot/css/used-on-a-few-pages.css
- app/webroot/css/used-on-one-page.css
- app/webroot/js/used-site-wide.js
- app/webroot/js/used-on-a-few-pages.js
- app/webroot/js/used-on-one-page.js
echo $this->Html->script(array('used-on-a-few-pages', 'used-on-one-page'), array('inline' => false));3.)ビュー ファイルで使用するのではなく、次のように使用します。
Configure::write('external_js', array('used-on-a-few-pages'));
Configure::write('inline_js', array('used-on-one-page'));
echo $this->fetch('script');4.)レイアウト ファイルで使用するのではなく、これを使用します。
if (Configure::read('external_js') !== null) {
$external_js = Configure::read('external_js');
if (Configure::read('debug') == 0) {
foreach ($external_js as &$external_js_filename) {
$external_js_filename .= '-min';
}
}
echo $this->Html->script($external_js);
}
if (Configure::read('inline_js') !== null) {
$inline_js = Configure::read('inline_js');
if (Configure::read('debug') == 0) {
foreach ($inline_js as &$inline_js_filename) {
$inline_js_filename .= '-min';
}
}
echo "\n<script type=\"text/javascript\">\n\t/* <![CDATA[ */";
foreach ($inline_js as $inline_js_filename) {
echo file_get_contents(JS . Configure::read('inline_js') . '.js');
}
echo "\n\t/* ]]> */\n</script>";
}
5.) 最後に、コミットが行われるたびに縮小されたアセットを作成するように Git を設定します。
このセットアップを使用すると、開発中の非縮小アセットと本番環境の縮小アセットを使用できます。問題は、必要がなければ車輪を再発明したくないということです。車輪の再発明は、重要かつ珍しい問題を解決する場合にのみ行うべきだと思います。
皆さんはこれをどのように処理しますか？
ありがとう！