快速吞噬缓存破坏

为了获得最佳的网络性能，为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中文网其他相关文章！