【工程化】如何资源定位

资源定位

浏览器会自动的缓存静态文件, 如: a.css 第一次访问成功后被浏览器缓存, 第二次就回直接走内存中读取, 这有利于提升性能, 但这也带来了一些问题, 当网站发布新版本的时候, 无法做到强制用户的浏览器去更新数据, 浏览器还是傻傻的使用了之前的缓存

所有有了多种解决办法, 但也各有利弊

1. 加版本号

加版本号是最常见的方法, 比如:

  • a.css?v=1.1
  • b.css?v=1.1

这个方法确实非常有效, 每次发布新版本都可以做到及时更新数据了,但这又带来了一些问题

  1. 我a修改了, b没有修改。 b的版本也要更新, b的浏览器缓存就被浪费了
  2. 每次修改, 引用的所有静态文件都要去手动更改版本号, 特别麻烦

2. md5戳

因为版本号所带来的问题, 所以就有人有了新的想法, 将版本号改为了md5戳, 这样就不用去因为版本号浪费缓存资源

但这又产生了新问题

当你改了html, 也改了css , 我们应该先上谁

  1. 先上html的话, 在你上新版css 之前访问的用户就会出现问题, 依旧会使用旧的css样式。
  2. 先上css的话, 在你上新版html之前, 如果用户没有css缓存, 用旧的html去使用新的css也会出现问题。

2019-11-20-11-49-49

那为什么不一起上呢?

这个因为css 和 html资源不可能一样大, 发布所需要的时间也不同,

那怎么办呢

3. 将md5作为文件名

既然后面加md5戳行不通, 那就又有了新思路, 我们把md5作为 css的文件名,

然后先发布新的css资源文件,再发布新的html文件

上新的css保留旧的css文件, 不要去删除旧的css ,尽管旧文件都在, 但是没关系的, 利 > 弊

这样的好处呢?

  • 将md5作为css 的文件名就是为了每次将css资源作为新的文件发布, 不覆盖原有的文件
  • html未发布之前依旧可以访问到旧的css , 新的html发布立即可以访问到新的css资源
  • 并且方便回滚, 回滚不用上线, 只要改个html, 静态资源全部都还在

4. 更优的解决办法

哪变了弄哪, 不把整个文件都改进去

总结

  1. 配置超长时间的本地缓存 - 节省带宽, 提高性能
  2. 采用内容摘要作为缓存更新依据 - 精确的缓存控制
  3. 静态资源cdn部署
  4. 更资源发布路径实现非覆盖式发布 - 平滑升级
你的支持将鼓励我继续创作