ファイルをモジュールに結合する
圧縮の最初のステップは、cssファイルとjsファイルをモジュールに統合することでした。 各モジュールには、cssおよびjsファイルのリストと、独自の作業に必要なモジュールが含まれています。 この情報をアプリケーション構成に保存することにしました。
< 単位 >
< Jquery >
< js >
< ファイル > cms / js / jquery / core.js </ ファイル >
< ファイル > cms / js / jquery / extens.js </ ファイル >
</ js >
</ Jquery >
< Jquery.Facebox >
< 依存する >
< unit > Jquery </ unit >
</ 依存 >
< js >
< ファイル > cms / js / jquery / facebox.js </ ファイル >
< ファイル > cms / js / jquery / pngfix.js </ ファイル >
</ js >
< css >
< ファイル > cms / js / jquery / facebox.css </ ファイル >
</ css >
</ Jquery.facebox >
< Cms.Core >
< js >
< ファイル > cms / js / Cms / Core.js </ ファイル >
< ファイル > cms / js / Cms / Class.js </ ファイル >
</ js >
</ Cms.Core >
</ units > *このソースコードは、 ソースコードハイライターで強調表示されました。
必要なファイルの接続は非常に簡単です。 これを行うために、静的loadUnit()メソッドを含むクラスを作成しました。 設定に応じて、ソースファイルを接続したり、その内容を1つのモノリシックに保存して接続したりできます。
圧縮と最小化
アプリケーションで指定された3つのパッカーを選択しました。 圧縮するために、システム設定に応じて特定の方法でファイルを圧縮するクラスが作成されます。 HTMLも圧縮されています。 また、設定でgzip圧縮が有効になっている場合、ファイルはgzencode()メソッドを使用して圧縮されます。
キャッシング
ファイルを再度圧縮しないようにするために、通常のオプションとgzip圧縮オプションの2つのオプションを保存できます。 これらのファイルは、PHPをバイパスしてWebサーバーから直接送信されます。 クライアントブラウザが圧縮をサポートしているかどうかを判断するには、mod_rewriteを使用します。
RewriteCond %{HTTP:Accept-Encoding} gzip [OR]
RewriteCond %{HTTP:TE} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{HTTP_USER_AGENT} !Konqueror
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^pack\/(.*)$ /pack/$1.gz [QSA,L]
ファイルが存在しない場合は、ファイルを作成するスクリプトにリクエストをリダイレクトするか、404エラーハンドラーをインストールします。
あなたはまだ追加することができます...
ユーザーに前postがある場合、圧縮は意味がありません。 Accept-Encodingヘッダーは自動的にカットされるため、圧縮ファイルを送信できるかどうかはわかりません。 このOutpostオプションはレジストリで無効になっていますが、ユーザーにこれを行うことはお勧めできません。 ユーザーがオペラを使用する場合、Accept-Encodingヘッダーに類似したTEヘッダーを使用できます。 他のブラウザでは、バージョンごとに圧縮の可能性を判断するという解決策が1つしか見つかりませんでしたが、この方法は不正確であるため、使用しない方が好ましいと考えました。
静的サイトのHTMLは、JavaスクリプトおよびCSSと同じ方法でキャッシュでき、Webサーバーがブラウザーに直接応答します。 データを変更するときは、キャッシュをフラッシュします。 しかし、常にオンサイトでは静的コンテンツが使用されます。 したがって、動的に圧縮する必要がありますが、これはトラフィックの多いサイトでは受け入れられません。 そのようなサイトで出席統計が維持されている場合、このデータを使用して、負荷の低い時間に圧縮されたHTMLを配布できます。
すべてを自分で書く気がなく、特定のシステムの圧縮をカスタマイズする必要がない場合は、既製のMinifyライブラリを使用できます。
アプリ
Html圧縮関数( gadelkareem.comから取得 ):
関数htmlCompress($ html)
{
preg_match_all( '!(<(?:コード|前|スクリプト)。*> [^ <] + </(?:コード|前|スクリプト)>)!' 、$ html、$ pre);
$ html = preg_replace( '!<(?: code | pre)。*> [^ <] + </(?:code | pre)>!' 、 '#pre#' 、$ html);
$ html = preg_replace( '#<!-[^ \ []。+->#' 、 '' 、$ html);
$ html = preg_replace( '/ [\ r \ n \ t] + /' 、 '' 、$ html);
$ html = preg_replace( '/> [\ s] + </' 、 '> <' 、$ html);
$ html = preg_replace( '/ [\ s] + /' 、 '' 、$ html);
if (!empty($ pre [0])){
foreach ($ pre [0] as $ tag){
$ html = preg_replace( '! #pre #!' 、$ tag、$ html、1);
}
}
return html;
} *このソースコードは、 ソースコードハイライターで強調表示されています。
使用されるミニマイザー:
Dean Edwards JavaScriptのパッカー
MinifyライブラリのCSS圧縮スクリプト
関連リンク:
サーバーのパフォーマンスを失うことなくcssとjsを圧縮する
CSS:圧縮に関するすべて
実用的なCSS / JS:すべてをアーカイブ!