现代互联网企业,为了进一步提升网站性能,会把静态资源和动态网页分集群部署,静态资源会被部署到 CDN 节点上,网页中引用的资源也会变成对应的部署路径:
用文件的摘要信息来对资源文件进行重命名,把摘要信息放到资源文件发布路径中,这样,内容有修改的资源就变成了一个新的文件发布到线上,不会覆盖已有的资源文件。上线过程中,先全量部署静态资源,再灰度部署页面,整个问题就比较完美的解决了。
大公司的静态资源优化方案,基本上要实现这么几个东西:
- 配置超长时间的本地缓存 —— 节省带宽,提高性能
- 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
- 静态资源CDN部署 —— 优化网络请求
- 更资源发布路径实现非覆盖式发布 —— 平滑升级
要注意的是,静态资源的缓存控制要求在前端所有静态资源加载的位置都要做这样的处理。 由于效率的缘故,浏览器通常会缓存 js 文件,这就给我们带了一个问题:当服务器端部署的项目中的 js 文件进行了修改后,如果再客户端不手动去刷新一次页面,js 的修改效果就不会起作用,因为浏览器还是用的缓存在本地的 js 文件。
为了解决这个问题,我们采用了这个方案,每当发布新的版本部署到服务器上的时候,我们给 html 页面中引用的js增加一个新的后缀,形如版本号的东西,例如:public.css?v=1.0
。