静态资源缓存控制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
相关文章
|
7月前
|
缓存 数据库 索引
如何优化Python Web应用的性能,包括静态资源加载、缓存策略等?
```markdown 提升Python Web应用性能的关键点:压缩合并静态资源,使用CDN,设置缓存头;应用和HTTP缓存,ETag配合If-None-Match;优化数据库索引和查询,利用数据库缓存;性能分析优化代码,避免冗余计算,使用异步处理;选择合适Web服务器并调整参数;部署负载均衡器进行横向扩展。每一步都影响整体性能,需按需调整。 ```
60 4
|
4月前
|
缓存 应用服务中间件 nginx
成功解决 Nginx更新静态资源无效 ,Nginx静态资源更新不及时,Nginx清除缓存
这篇文章讨论了在使用Nginx进行动静分离时遇到的静态资源更新不及时的问题。问题描述了在服务器上更新静态资源后,访问页面时页面没有显示更新的情况。文章提供了解决这个问题的方法,即清除浏览器缓存,并提供了相关参考文章链接。此外,还展示了问题复现的步骤和正常情况的预期结果。
成功解决 Nginx更新静态资源无效 ,Nginx静态资源更新不及时,Nginx清除缓存
|
1月前
|
SQL 缓存 Java
【详细实用のMyBatis教程】获取参数值和结果的各种情况、自定义映射、动态SQL、多级缓存、逆向工程、分页插件
本文详细介绍了MyBatis的各种常见用法MyBatis多级缓存、逆向工程、分页插件 包括获取参数值和结果的各种情况、自定义映射resultMap、动态SQL
【详细实用のMyBatis教程】获取参数值和结果的各种情况、自定义映射、动态SQL、多级缓存、逆向工程、分页插件
|
2月前
|
缓存 弹性计算 应用服务中间件
如何使用 Wordpress?托管, 网站, 插件, 缓存
如何使用 Wordpress?托管, 网站, 插件, 缓存
|
4月前
|
缓存 前端开发 CDN
静态资源缓存过期时间的设置
【8月更文挑战第18天】静态资源缓存过期时间的设置
110 1
|
5月前
|
缓存 NoSQL Serverless
函数计算产品使用问题之如何使用Redis作为缓存插件
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
117 8
|
5月前
|
缓存
如何彻底卸载VSCode及其原来的插件配置缓存
如何彻底卸载VSCode及其原来的插件配置缓存
574 0
|
6月前
|
SQL 缓存 Java
Java框架之MyBatis 07-动态SQL-缓存机制-逆向工程-分页插件
Java框架之MyBatis 07-动态SQL-缓存机制-逆向工程-分页插件
|
缓存 Kubernetes API
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
在文章《23秒完成从零开始搭建StableDiffusion》中我们详细讲解了通过ECI的数据缓存快速搭建StableDiffusion应用,用户通过模型网站选择好自己需要的模型,然后创建ECI数据缓存,即可快速部署自己的StableDiffusion应用。本文将基于StableDiffusion + 扩展插件 ControlNet 来完成实现网红爆款文字光影图
406 0
数据缓存系列分享(三):通过 StableDiffusion 扩展插件实现网红爆款文字光影图
|
缓存 数据库 云计算
为什么WordPress有时用缓存加速插件反而变得慢了?
为什么WordPress有时用缓存加速插件反而变得慢了? 使用缓存插件可以大大提高 WordPress 网站的性能和响应速度,因为它可以缓存页面和资源,减少服务器请求和数据传输。但是,如果插件配置不当,或者您的网站具有特定的配置或功能,可能会导致缓存插件反而使网站变慢。
为什么WordPress有时用缓存加速插件反而变得慢了?