快速吞噬緩存破壞

為了獲得最佳的網絡性能，為CSS，JavaScript，Image和Fonts等資產實施強大的緩存策略至關重要。這使瀏覽器可以保留這些文件，從而在網站內重新訪問或導航時大大加速頁面加載時間。但是，更新這些資產需要一種迫使瀏覽器下載新版本的方法。儘管存在幾種技術，但本文詳細介紹了一種使用Gulp的最新方法。

利用查詢字符串修改緩存破壞

與較早的信念相反，修改查詢字符串仍然是緩存破壞的有效方法，尤其是在諸如CloudFlare減輕潛在邊緣案例之類的服務中。

最初，您的HTML可能包括這樣的資產鏈接：

<link href="style.css?v=1" rel="stylesheet">

隨後，要強制緩存刷新，只需更改查詢字符串值：

<link href="style.css?v=2" rel="stylesheet">

HTML本身通常具有較短的緩存持續時間或沒有緩存，從而確保了HTML更改的立即可見性。

手動與自動緩存破壞

以前，手動緩存破壞涉及直接修改PHP變量：

  <link href="style.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet"><link href="some-other-asset.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet">

這種方法雖然功能性，但很容易受到監督，而且通常很麻煩。

與灣和毛replapply自動化

採用基於毛的構建過程，該過程處理諸如SASS彙編，Babel Transpilation和File Concatenation之類的任務允許自動加速拆卸。 gulp-replace插件簡化了此過程。

可以創建一個Gulp任務，以搜索標頭文件中的特定字符串（例如， cache_bust= ），並用動態生成的基於時間戳的字符串替換它：

 gulp.task（“ CACH-BUST-CSS”，function（）{
  var cbString = new Date（）。 getTime（）;
  返回Gulp
    .src（[“ header.php”]）
    。管道（
      替換（ /cache_bust = \ d /g，function（）{
        返回“ cache_bust =” cbString;
      }））
    ）
    .pipe（gulp.dest（“。”））;
}）;

可以針對JavaScript文件實現類似的任務。

優化效率

當前的實現每當任何資產更改時，都會更新所有CSS資產的查詢字符串。一種更有效的方法將僅針對修改的文件。該優化計劃用於將來實施。

這種基於毛的策略只是一種方法。其他Gulp插件和構建系統提供替代方法。該解決方案有效地解決了該項目的特定需求。隨時分享您喜歡的緩存技術！

以上是快速吞噬緩存破壞的詳細內容。更多資訊請關注PHP中文網其他相關文章！