Minify を使用して css および js ファイルを圧縮する方法の詳細な説明

Minify を使用して css および js ファイルを圧縮する方法

Minify は PHP5 で開発されたアプリケーションです。次のようにします。ウェブサイトのパフォーマンスを向上させるための Yahoo 最適化ルール。複数の CSS または JavaScript ファイルをマージし、不要な空白やコメントを削除し、gzip 圧縮を実行し、ブラウザーのキャッシュ ヘッダーを設定します。 Minify は Yahoo の Combo Handler Service と設計が非常に似ていますが、Minify は必要な JavaScript ファイルと CSS ファイルをマージできます。

一般に、Web サイトの速度のボトルネックはフロントエンドにあり、最も重要なのはリソースの読み込み速度です。ただし、ほとんどのブラウザーには、単一のドメイン名に対する同時リクエストの数に制限があります。そのため、ページに多くのリクエストがある場合、CSS や JavaScript ファイルなどのリソースにより、Web サイトの読み込み速度が明らかに低下します。これを処理するより良い方法は、1 つのリクエストで複数のファイルにアクセスすることです。これは以前のリクエストには影響しません。ファイルのメンテナンスと明確なリソースの数を減らすために、Minify が作成されています。以下は、Minify で採用されている Yahoo! 最適化ガイドラインの一部です:

Minify は、CSS と JS を圧縮して削減し (Minify: スペース、キャリッジ リターンなどを削除します)、複数の CSS および JS ファイルを 1 つのファイルに統合します。帯域幅が大きいからこの種の最適化が必要ないとは考えないでください。これを使用するより重要な理由は、圧縮ではなくファイルのマージであり、ブラウザ側が新しい接続リクエストを継続的に発行することを軽減できるファイル統合です。FTP サーバーと同じように、複数の小さなファイルと 1 つの大きなファイルには時間がかかります。 。

Minify は PHP で書かれており、プロジェクト アドレス http://code.google.com/p/minify/

1. 最新の Minify をダウンロードし、minify ディレクトリに解凍します。

2.「min」ディレクトリを、Web サイトのルート ディレクトリである DOCUMENT_ROOT にコピーします。

基本的な使用法

例: http://localhost/a.js、http://localhost/b.js の 2 つのファイル。これで、 http://localhost/min/?f=a.js,b.js を使用して、ブラウザから返された結果が minify?

の 2 つの js ファイルの内容であるかどうかを確認できます。 min ディレクトリ内の添付ファイル README.txt

引用

このディレクトリ内のファイルには、Web サイトの統合を簡素化するために設計されたデフォルトの Minify 設定が含まれています。 Minify は、縮小された JavaScript または CSS ファイルをマージし、HTTP 圧縮とヘッダーのキャッシュを実行します。

推奨事項

$min_cachePath を PHP 書き込み可能なディレクトリに設定するように config.php を変更することをお勧めします。これによりパフォーマンスが向上します。

はじめに

Minify を始める最も早い方法は、Minify Builder アプリケーションの URI を使用して Web サイトにアクセスすることです:

http://liqingbo.cn /min/builder /

単一ファイルを圧縮する

たとえば、次のファイルを提供するとします:

http://liqingbo.cn/ wp-content /themes/default/default.css

次は「URL の縮小」ファイルです:

http://liqingbo.cn/min/?f =wp -content/themes/default/default.css

つまり、「f」パラメータは WEB ルート パスからターゲット ファイルに設定されます (パス / は必要ありません)。ファイルには相対 URI が含まれる場合があります。Minify は書き換えメカニズムを通じて自動的にそれらを見つけます。

複数のファイルを 1 つのファイルに結合しますダウンロード

f パラメーターの各ファイル名は「,」で区切ります。

たとえば、次の CSS ファイルがあります:

http://liqingbo.cn/scripts/jquery-1.2.6.js

http://liqingbo.cn/scripts/site.js

Minify を使用して結合できます:

http://example.com/min/ ?f= scripts/jquery-1.2.6.js,scripts/site.js

簡略化されたベース パス

マージするファイルが同じものを共有する場合b パラメータで設定した f パラメータの基本ディレクトリを使用できます (先頭または接尾辞/文字も除く)

たとえば、次の 2 つの記述方法は同じ効果があります。

#http:// liqingbo.cn/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js

http://liqingbo.cn/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

MINIFYを使用する

(X)HTML ファイルの HTML では、& を &

許可されたディレクトリを指定してください

に置き換えることを忘れないでください。デフォルトでは、Minify には *.css/*.js ファイルがありません。 DOCUMENT_ROOT スコープ。 Minify のアクセスを特定のディレクトリに制限したい場合は、config.php で

$min_serveOptions ['minApp'] ['allowDirs']

配列を設定します。例: /js および /themes/default ディレクトリに制限するには、次を使用します:

$min_serveOptions['minApp']['allowDirs'] = array('//js', '/ /theme/default');

「グループ」: パフォーマンスの高速化と URL の改善

最高のパフォーマンスを得るには、groupsConfig.php で事前に指定されたファイル グループを編集します

以下は設定例です:

return array(
　　    'js' => array('//js/Class.js', '//js/email.js')
　　);

上記の事前に指定された js は次のファイルをマージします:

http://example.com/js/Class . js

http://example.com/js/email.js

これで、URL を次のように簡略化できます:

http://example.com/min/?g=js

グループ: document_root ディレクトリの外にあるファイルを指定します

在groupsConfig.php阵中,//是指向DOCUMENT_ROOT，但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录：　

return array(
    　　'js' => array(
        　　'//js/file.js' // file within DOC_ROOT
        　　,'//../file.js' // file in parent directory of DOC_ROOT
        　　,'C:/Users/Steve/file.js' // file anywhere on filesystem
    　　)
　　);

未来过期HTTP头

Minify可以发送未来(一年)过期HTTP头。要启用该功能，您必须添加一个数字到URIs(例如/min/?g=js&1234 or /min/f=file.js&1234)，每当源文件修改时改变该数字。如果你使用SVN/CVS，你可以考虑使用修订版号作为该数字。

如果使用"组"来合并压缩你的文件，可以使用工具函数Minify_groupUri()来得到一个“版本”的URI。例如：

// 之前确保min/lib目录设置到include_path
// add /min/lib to your include_path first!
require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php';
$jsUri = Minify_groupUri('js');
echo " ";

调试模式

在调试模式下，Minify不压缩文件，而是发送合并后的带有行号的文件。要启用该模式，在config.php中设置为$min_allowDebugFlag为true，并增加"&debug=1" 到你的URIs.

例如：/min/?f=script1.js,script2.js&debug=1

注：对于该模式，注释风格的字符串正则表达式可能会导致问题。

把min目录上传根目录，根目录打开http://example.com/min/

Note: Please set $min_cachePath in /min/config.php to improve performance.

设置/min/config.php文件 ，$min_cachePath 有3个选择。

//$min_cachePath = ‘c://WINDOWS//Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^//d+;/’, ”, session_save_path());

选择第2个，去除// .设置tmp属性777

在显示的界面中加入你想合并压缩的 js/css 路径，点击 ‘Update’ 之后会为你生成一个 url

如：http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js，css和JS分别合并，2个地址。

如果需要组合的文件很多，url 就会变得很长，Minify 支持 group，可以将这些文件分组，这样 url 中只需指定 g=group名字 就可以了。

安装完毕后删除min/builder/index.php 文件。防止其他人登陆!后期如需编辑再次上传!

如有不明白的地方，可以给我留言，我们可以一起探讨一下。

推荐教程：《JS基础教程》

以上がMinify を使用して css および js ファイルを圧縮する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。