如何高效部署前端代码，如css，js...

Posted 2020-07-21

看了网上一些文章，做了点总结，顺便再加点自己的东西，简单的说下。

 

1.利用浏览器的304缓存，但是304叫协商缓存，还是需要与服务器通信一次

2.强制使用浏览器使用本地缓存（cache-control/expires），但是问题来了，不让浏览器发资源请求，资源怎么更新。

3.使用版本号，类似于a.css?v=1.0，b.css?v=1.0，做了更改的时候都变成a.css?v=2.0，b.css?v=2.0，有时候a.css改变了，b.css没有改变，不是多此一举吗？

4.使用数据摘要算法，类似于a.css?v=0abc23，b.css?v=65ao1j，如果a.css做了更改的话，a.css=v=1asd2j，b.css还是b.css?v=65ao1j。

5.很多企业，现在都静态文件cdn部署了，类似于http://static.cdn.com/css/a.css?v=0abc23，与页面分开部署了，

　　a.如果先部署页面，再部署资源：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。

　　b.如果先部署资源，再部署页面：

在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。

解决方法：改变命名方式，改成a_0abc23.css，上线的时候先部署静态资源，再部署页面。