项目发布新版本清理缓存获取最新资源

项目背景

前端vue项目，基于webpack打包构建

发版问题

每次修改代码构建发布到测试环境或生产环境后，存在不能获取到最新资源的情况

原因-浏览器缓存

用户首次访问浏览器会缓存服务器返回的静态资源，下次访问时就直接使用缓存的静态资源

浏览器缓存好处：加快响应速度，减少服务访问。浏览器缓存弊端：更新资源或发布新版本时，再次访问就不会获取最新修改的静态资源。

css、js等静态资源会被浏览器缓存，所以每次用户访问网页时，浏览器从缓存读取文件而不是从服务器读取文件，导致新版本的某些新功能读取失败。

解决方案

1. 让用户清理缓存 （不可取）

2. 禁止浏览器缓存，不缓存文件 （不可取）

3. 在静态文件后加版本号

在静态资源后面添加时间戳、版本号、hash值等参数的方式，用户访问资源时，如果发布新版本后的参数变动，浏览器将不使用缓存而是自动更新获取服务器的资源

添加时间戳 <script src="/js/test.js?t=1599114269832"></script> 添加版本号 <script src="/js/test.js?v=2.4.0"></script> 添加webpack打包时的hash值 <script src="/js/test.js?h=544a18d836ef21075611"></script>

在webpack中使用

webpack.prod.conf.js // 获取当前时间戳 const TIME_STAMP = new Date().getTime() // prod环境的webpack配置 const webpackConfig = merge(baseWebpackConfig, { // webpack loader配置 module: { }, // webpack source map映射关系 devtool: 'source-map', // webpack output文件输出 引 TIME_STAMP 时间戳 output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js?t=' + TIME_STAMP), chunkFilename: utils.assetsPath( 'js/[id].[chunkhash].js?t=' + TIME_STAMP ) }, // webpack plugins插件 plugins: [ ] })

总结

这种问题的出现比较频繁，解决的方案有复杂的、简单的，目前通过这种最简单方式解决了当前问题，在之后的开发过程中将持续优化，探索更好的解决方法。