[PHP]minify路 jsわ cssを 縮小, 圧縮した 後 ブラウザー キャッシュまで 活用すれば 錦上花を添えるだ
要約: minify増えた <script type="text/javascript" src="minify/f=my-javascript.js&数字"></script>
形式で 使う 場合, 自動で キャッシュ 期間を 1年で 設定して 与える. 数字 項目に ファイルの 最近 変更 日付を 入れる スクリプトを 組んで 入れる. ファイルが 変更されれば 数字が 変わって それでは ブラウザーは 新しい ファイルで 認識して ファイルを ダウンロードする.
入って行くこと 前に 分かると 割 の
minify増えた jsわ css義 空白を とり除いた 後 gz 圧縮を 真書 オンライン トラフィックを 画期的に 減らして 与える 良い PHP ライブラリだ. 使い方を 分からなかったら minifyに 大海 私が 使った 文を 読んで 来なさい.
ブラウザー キャッシュに 大海 具体的に 分からなかったら グーグルが お勧めする ブラウザー キャッシュ 方法に 大海 私が 翻訳した 文を 読みなさい. そうなの これ 文が 理解される ことだ.
なぜ これを 勉強するように なった ことですよ?
昨日 グーグルの ページ スピードで 私が 管理する ウェブサイトが 92点を 受けた. 点数を 仮装(家長) 多く 削って 食べた のは キャッシュ 部分だった. 資源 中 一つも キャッシュ 命令を 下って 与える 蟹 なかった.
そのため キャッシュ 勉強を することに したし, グーグル ページ スピードの キャッシュ 関連 部分を 翻訳した. 翻訳は 大きい コンパニオン いい. 特に! URL Fingerprint (URL 指紋) 増えた 完全に 新しい 概念だった.
そのため URL 指紋を 活用して 私が 管理する サイトにも キャッシュを 適用して 見ることに 心に決めた.
minify街 基本に 支援するという 事実
初めには ファイルの hashを 利用して URL 指紋を 自動生成しようと した. 多分 そうに する 蟹 仮装(家長) 良かった ことだ. するが 何 枝 気難しい 点が あったし, まどろみ 度が外れるように 複雑な 部分図 あった. そんな 部分を 乗り越えること ための 措置を 何 枝 しながら コードを だ 組んだ.
最後に キャッシュ 関連 ヘッダーを 追加した. ところが ウェンゴル? 満了日を 1年で 設定したのに 30分で セッティングされて 出る の!
(下は グーグル クロム ブラウザーで ヘッダー 情報を 見る 方法を 説明した 動画だ.)
あらゆる プロジェクトで キャッシュの 満了日 関連 単語である Expiresを 捜した 次には 原因を 卵 数 あった.(イクルリブスでは Ctrl+H を 押せば プロジェクト 全体で 文字列 探し/変えるのを 割 数 ある.)
minify フォルダの config.php には 下と ような 竝びが ある.
/** * Maximum age of browser cache in seconds. After this period, the browser * will send another conditional GET. Use a longer period for lower traffic * but you may want to shorten this before making changes if it's crucial * those changes are seen immediately. * * Note: Despite this setting, if you include a number at the end of the * querystring, maxAge will be set to one year. E.g. /min/f=hello.css&123456 */ $min_serveOptions['maxAge'] = 1800;
ここで ヘッダー 関連 情報を 1800超(30分)路 設定して 置いた だから そうだった のだ. そうだと これ 設定を わがまま 変える 数は なかった. URL 指紋を 入れるの ない 資源が キャッシュ 期間が 1年が なれば 困ること だからだ.
ところが 柱石を 見てから おもしろい ガール 分かるように いい.
Note: Despite this setting, if you include a number at the end of the querystring, maxAge will be set to one year. E.g. /min/f=hello.css&123456
もし /min/f=hello.css&123456
形式で 呼び出しを すれば キャッシュ 期間を 何で 設定しても 無条件 1年で キャッシュ 期間が 設定 なるという ことだ. 五胡だと! それでは 数字に 最終 ビョンギョングイルを 入れて 与えれば なるね!
そのため 私が 作った 関数を 廃棄して minify義 基本 機能を 利用して キャッシュを 具現することに 決めた. 私が 組んだ コードが 惜しくは したが, 1)既存 ライブラリを 使う 時 私が 直接 組んだ コードを 追加して 使えば どうこうでも 負担だ. バージョンアップ 時 衝突を 起こす 首都 あって, そうなの ないとしても いつ どうな 衝突が 出るか 予想する 数 ない. 2)私が 適用した 方式より minify義 方式が 簡潔だった. (勿論 私が 組んだ のは md5 亥時を 利用して, minify増えた 最終 変更一万 使うように なるので 私が 組んだ 方式が ダウンロード 回収を もっと 減らす 数 あるという 長所は ある.)
こういう 判断 下に 下の 関数を 作った.
function set_filename_with_last_modified_timestamp($file){ $stat = stat($_SERVER['DOCUMENT_ROOT'].'/'.$file); return '/minify/?f='.$file.'&'.$stat['mtime']; }
stat
関数は PHP 基本 関数路, ファイルの 状態を 知らせて 与える 関数だ. ファイルの 状態 情報を 盛った array
を リターンして 与えるのに, 彼 中 $stat['mtime']
銀 最終 変更 時間を 示す.
彼だから, ファイル 経路を /css/my-css.css
形式で 受けて, /css/my-css.css&1304673504
形式で 回して 与える 関数を 作った ことだ. 後に 付く 数字は 最終 変更 時間の ユニックス タイムスタンプだ.
そうに するから 本当に キャッシュ 期間が 1年が いい. 万歳!
こんなに すれば どうな 長所が あるかと?
こんなに すれば キャッシュを 本当 実質的に 活用する 数 あるように なる.
- ファイルが 6ヶ月 間 変更されるの なかったら ファイル名が 引き続き
/css/my-css.css&1304673504
路 認知される ので, そうだったら ブラウザーは 引き続き キャッシュに 保存された ファイルを 使う ことだ. - もし 6ヶ月 後に ファイルが 変更されたら 多分 ファイル名が
/css/my-css.css&1320225504
くらいで 変更される ことだ. それでは ブラウザーは “語だと? 鳥 ファイルじゃないの?” して ファイルを ダウンする のだ.
結局 キャッシュ 期間が 1年だが, ファイルが 変更されれば ダウンロードと, 変更されるの なければ ダウンロードするの ない 效果を 出す 数 あるように なる のだ!
こういう 技法を ところで URL 指紋 技法だと する.
参照
これを 分からないか たいが, ひょっとして 真書 上で 私が 提供した 関数を 実際で どうに 使うのか コードを 付ける.
<script type="text/javascript" src="<?=set_filename_with_last_modified_timestamp('/js/jquery.js')?>"></script>
以上.
- コメント機能はありません。コメントの代わりに[email protected]
にメールを送ってください。