互联网企业静态资源的部署，如何充分利用浏览器缓存机制

Posted 2020-12-31 shengulong

 

浏览器获取静态资源方式：缓存、版本

从html文件中解析出静态资源的url，查看本地缓存是否存在、是否过期，是否需要重新获取。根据url全路径匹配查找是否存在，根据header的字段expire/cache-control等判断是否过期。

所谓版本信息，不过是静态资源url的一部分信息，通过修改服务器html里静态资源的版本信息，达到修改静态资源url路径的目的，从而实现客户端浏览器重新下载静态资源的目的。

版本示例：http://xx.x.x.x:8083/static/dll/vendor1.js?v=1534689158

 

关于版本信息内容的良好实践：根据静态资源的hash值生成版本号，这样静态资源变化，则版本号变化，从而引起客户端浏览器的重新下载

 

对于react项目使用webpack编译输出文件的过程中，可以生成带hash值的文件。文件变化，则hash值变化。

 

flask的静态资源文件插件：https://pythonhosted.org/Flask-Versioned/

或者使用flask的jinja2模板自带的模板过滤功能，自动给静态文件添加版本号。版本号为文件的修改时间。这样静态资源只要修改，则静态资源的版本号发生变化。其实最好还是使用静态资源的hash值比较好。毕竟文件的修改时间也是可以人为构造的。https://ana-balica.github.io/2014/02/01/autoversioning-static-assets-in-flask/

 

参考：

1、http://www.cnblogs.com/ihardcoder/p/5623411.html

2、https://zhuanlan.zhihu.com/p/24954527?refer=jscss

3、https://blog.csdn.net/u014590757/article/details/80140654

4、https://www.zhihu.com/question/20790576

5、https://blog.csdn.net/vencent7/article/details/77621212

6、https://ana-balica.github.io/2014/02/01/autoversioning-static-assets-in-flask/