Minify は JS と CSS を圧縮します_html/css_WEB-ITnose
Minify は、CSS と JS を圧縮して縮小し (Minify: スペース、改行などを削除します)、複数の CSS と JS ファイルを 1 つのファイルに統合します。帯域幅が大きいからこの種の最適化が必要ないとは考えないでください。これを使用するより重要な理由は、圧縮ではなくファイルの結合です。これにより、FTP サーバーと同様に、複数の小さなファイルと 1 つの大きなファイルの処理に時間がかかるため、ブラウザー側で新しい接続要求を発行することが軽減されます。 。
Minify は PHP で書かれており、プロジェクト アドレス http://code.google.com/p/minify/
インストール
1. 最新の Minify をダウンロードし、minify ディレクトリに解凍します。
2. "min" ディレクトリを DOCUMENT_ROOT にコピーします。
基本的な使用方法 2 つのファイルがあるとします: http://localhost/a.js と http://localhost/b.js。これで、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://example.com/min/builder/
単一のファイルを圧縮します たとえば、次のファイルを提供したいとします:
http://example.com/wp-content/themes/default/default.css
このファイルの「縮小 URL」は次のとおりです:
http://example.com/ min/? f=wp-content/themes/default/default.css
つまり、「f」パラメータは WEB ルート パスからターゲット ファイルに設定されます (パス / は必要ありません)。相対 URI が含まれる場合があります。Minify 書き換えメカニズムを通じて自動的に検出されます
複数のファイルを 1 つのファイルに結合してダウンロードします f パラメータの各ファイル名を「,」で区切ります
たとえば、次のような CSS があります。ファイル:
http://example.com/scripts/jquery-1.2.6.js
http://example.com/scripts/site.js
Minify と組み合わせることができます:
http://example.com /min/?f=scripts/jquery -1.2.6.js,scripts/site.js
ベースパスを簡略化します マージするファイルが同じ親ディレクトリを共有する場合は、f のベース ディレクトリを使用できます。 b パラメータで設定されるパラメータ (先頭または接尾辞の / 文字も除く)
たとえば、次の 2 つの記述方法は同じ効果があります:
http://example.com/min/?f=scripts/jquery-1.2 .6.js,scripts/site.js,scripts/home.js
http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js
Html で MINIFY を使用します (X) HTML ファイルで、& を忘れずに追加してください
許可されるディレクトリを指定してください デフォルトでは、Minify には *.css/*.js ファイルが含まれません。 DOCUMENT_ROOT スコープ。 Minify のアクセスを特定のディレクトリに制限したい場合は、config.php で
$min_serveOptions ['minApp'] ['allowDirs'] 配列を設定します。例: /js および /themes/default ディレクトリに制限するには、次を使用します:
Php code
- $min_serveOptions['minApp']['allowDirs'] = array('//js', '/ /主題 /default');
「グループ」: パフォーマンスが向上し、URL が向上します 最高のパフォーマンスを得るには、groupsConfig.php で事前に指定されたファイル グループを編集します。設定例は次のとおりです。 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 からの相対ディレクトリからの絶対値も指定します:
Php コード
- return array(
- 'js' => array(
- '//js/file.js' // DOC_ROOT 内のファイル
- ,'//../file.js' // DOC_ROOT の親ディレクトリ内のファイル
- ,'C:/Users/Steve/file.js' // ファイルシステム上の任意の場所にあるファイル
- )
- );
将来の有効期限 HTTP ヘッダー
Minify は将来 (1 年) の有効期限 HTTP ヘッダーを送信できます。この機能を有効にするには、URI に番号を追加し (例: /min/?g=js&1234 または /min/f=file.js&1234)、ソース ファイルが変更されるたびに番号を変更する必要があります。 SVN/CVS を使用する場合は、この番号としてリビジョン番号を使用することを検討してください。
「グループ」を使用してファイルをマージおよび圧縮する場合、ツール関数 Minify_groupUri() を使用して「バージョン」URI を取得できます。例:
Php コード
- // min/lib ディレクトリが include_path に設定されていることを確認する前に
- // 最初に /min/lib を include_path に追加してください
- re! $_SERVER[' DOCUMENT_ROOT'] '/min/utils.php';
- $jsUri = Minify_groupUri('js');
- echo "
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）3週間前 By 尊渡假赌尊渡假赌尊渡假赌R.E.P.O.最高のグラフィック設定3週間前 By 尊渡假赌尊渡假赌尊渡假赌アサシンのクリードシャドウズ：シーシェルリドルソリューション2週間前 By DDDR.E.P.O.誰も聞こえない場合はオーディオを修正する方法3週間前 By 尊渡假赌尊渡假赌尊渡假赌WWE 2K25：Myriseのすべてのロックを解除する方法4週間前 By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7471
15
CakePHP チュートリアル
1377
52
Steamのアカウント名の形式は何ですか
77
11
NYTの接続はヒントと回答です
19
30
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップの日付を確認する方法
Apr 07, 2025 pm 03:06 PM
ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
