静态资源缓存控制grunt插件

简介: <p style="margin-top:0px; margin-bottom:0.9em; padding-top:0px; padding-bottom:0px; font-family:'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; line-height:22px;

前端性能优化中一个很重要的方面就是充分利用缓存,比如通过cache-control, expires, eTag等来控制静态资源失效时间,很多大型网站的静态资源实现实现甚至到了几年。这确实提高了页面加载速度,但同时引来另一个问题,我更改了静态资源,如何让客户端更新缓存。

思路

最有效的解决方案是修改其所有链接,这样,全新的请求将从原始服务器下载最新的内容。

没错,但是怎样更新链接?

来看看一般前端团队的做法

index.html页面里:

<script charset="utf-8" type="text/javascript" src="a.js?t=20131111"></script>

大家会采用添加query的形式修改链接。这样做是比较直观的解决方案,但在访问量较大的网站,这么做可能将面临一些新的问题,因为在发布的过程中,index.html和a.js总有一个先后的顺序,从而中间出现一段或大或小的时间间隔。对于一个大型互联网应用来说即使在一个很小的时间间隔内,都有可能出现新用户访问。这些用户访问到的页面和js是不匹配的,会导致页面出错。

这就是为什么大型web应用在版本上线的过程中经常会较集中的出现前端报错日志的原因,也是一些互联网公司选择加班到半夜等待访问低峰期再上线的原因之一。此外,由于静态资源文件版本更新是“覆盖式”的,而页面需要通过修改query来更新,对于使用CDN缓存的web产品来说,还可能面临CDN缓存攻击的问题。

当版本有更新时,修改所有引用链接也是一件与工程管理相悖的事,至少我们需要一个可以“查找-替换”的工具来自动化的解决版本号修改的问题,要知道手动去修改ts是多少让人崩溃的事情,特别是对于频繁发布的情况。

针对这个问题,目前最优的解决方案就是基于文件内容的hash版本号,也就是说,将文件内容进行hash,用hash值来代替时间戳。这么做的好处,文件不变的时候,版本号不变,文件变了,版本号自动更新。

也就是,发布的时候

<script charset="utf-8" type="text/javascript" src="a.js"></script>
自动变成
<script charset="utf-8" type="text/javascript" src="a.js?t=ba9c11c7"></script>
基于以上思路,我写了个grunt插件,这样在发布前,输入命令grunt,文件压缩,改时间戳神马的全部自动完成,超赞的有木有!
本来我是打算找找有没有现成的grunt plugin,但是没有找到符合我想法的,于是自己动手吧。

已发布到npm,npm install asset-cache-control下载

 

问题

上面的做法,其实还是改静态资源query值,并没有解决发布过程中的资源覆盖先后问题,对于大型网站,做下面的修改更合适。

<script charset="utf-8" type="text/javascript" src="a_ba9c11c7.js"></script>

下个版本

1. 现在要列出所有需要控制缓存的静态资源,以后会支持只列出目录
2. 对于以前已由时间戳,但不是t=的,要先reset
相关文章
|
存储 缓存 前端开发
WordPress缓存插件WP Fastest Cache插件使用教程
WordPress缓存插件WP Fastest Cache插件使用教程
868 0
|
8月前
|
缓存 Kubernetes API
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
在文章《23秒完成从零开始搭建StableDiffusion》中我们详细讲解了通过ECI的数据缓存快速搭建StableDiffusion应用,用户通过模型网站选择好自己需要的模型,然后创建ECI数据缓存,即可快速部署自己的StableDiffusion应用。本文将基于StableDiffusion + 扩展插件 ControlNet 来完成实现网红爆款文字光影图
334 0
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
|
11月前
|
缓存 数据库 云计算
为什么WordPress有时用缓存加速插件反而变得慢了?
为什么WordPress有时用缓存加速插件反而变得慢了? 使用缓存插件可以大大提高 WordPress 网站的性能和响应速度,因为它可以缓存页面和资源,减少服务器请求和数据传输。但是,如果插件配置不当,或者您的网站具有特定的配置或功能,可能会导致缓存插件反而使网站变慢。
为什么WordPress有时用缓存加速插件反而变得慢了?
|
缓存 Java Spring
Java:Spring Boot设置静态资源缓存方案-协商缓存
Java:Spring Boot设置静态资源缓存方案-协商缓存
271 0
|
存储 缓存 自然语言处理
WordPress建站5 个最佳免费缓存插件
缓存插件通常用于保存站点的缓存,当任何用户访问您的网站时,您的网站加载速度会更快。以下是北京六翼的开发工程师建议您使用的WordPress建站5 个最佳免费缓存插件。
WordPress建站5 个最佳免费缓存插件
|
缓存
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(一)
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(一)
659 0
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(一)
|
缓存 应用服务中间件 nginx
Nginx提升性能篇 静态资源服务器(缓存)
Nginx提升性能篇 静态资源服务器(缓存)
|
缓存 应用服务中间件 网络安全
Nginx作为静态资源web服务 - 控制浏览器缓存、防盗链
. 浏览器缓存简介 浏览器缓存遵循HTTP协议定义的缓存机制(如:Expires;Cache-control等)。 当浏览器无缓存时,请求响应流程
Nginx作为静态资源web服务 - 控制浏览器缓存、防盗链
|
缓存 Dart 开发者
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(二)
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(二)
509 0
【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )(二)