js 刷新页面但是不闪烁_前端项目迭代发版防止浏览器缓存js和css-CSDN博客

欢迎关注我的头条号：Wooola，专注于Java、Golang、微服务架构，致力于每天分享原创文章、快乐编码和开源技术。

前言

最近发版前端项目，用户经常反馈新添加功能在线上环境不好用，常出现新老页面并存的状况。经前端同事排查法发现，实际上只需要重新刷新一下页面就没事了。但是每次去通知用户肯定不现实，所以需要对前端的js和css等文件采取一定的缓存失效的措施，强制浏览器重新去服务器获取新的js代码以及css文件。

楼主经过实际的项目情况反馈，总结以下两点切实可行的办法，分享给大家，希望对大家有帮助。

时间版本号

如果每次发布，针对修改过的js或者css文件路径加上时间的版本号，一般以年月日拼写。

如果发生紧急情况，需要在一天当中对某些css或者js文件多次发版，可以把时间精确到时分秒。

目前楼主主推采用加版本号的方式，因为文件太多，只能做增量修改。好处是没有做任何修改js或者css文件可以不用加版本号。

采用随机数

document.write('');

一般不建议用随机数的方式，因为每次刷新页面，随机数都会变化，那么浏览器认为一个新的url需要重新请求服务端获取js或css文件，不会在使用浏览器本地缓存。同时占用网络带宽，影响服务器响应速度。

可以利用 gulp-rev或者webpack

entry: { main: './src/common.js', slove: './src/ie8.js'},output: { filename: '[name].[hash].js', path: path.resolve(__dirname, 'dist')}

例如百度搜索首页，就是利用hash给js和css文件重命名。