乐趣区

关于webpack:拍案惊奇vuecli5项目关于中的一个缓存诡异bug分析

jiezi

景象形容

新发了一版代码
产品：“火狐没更新”
我：“多刷新几次”
产品：“没用”
我：“强刷”
产品：“好棒棒，然而你之前不是写了一个版本检测，能自动更新吗，为什么这次不论用，还要手动强刷，一般刷新不论用”
我心田：” 女人就是麻烦 ” 于是看了下复现的环境，发现了震惊的一幕
HTML 代码长这样

我心田：绝不可能，相对不可能，啊，我的世界观崩塌了。要么全是 webpakc 打包的新版代码，要么走缓存全是老版代码。
为啥能呈现一个 html 一半是新版一半是老版代码的状况？？？

马桶上的思考

思考过程

苦思好久，没有脉络
首先 有新版控制代码 Html 肯定是新的
然而为啥有老版代码呢 我认真有看了下本地打包后的代码，终于发现了端倪

因为 vue 有按需加载 每个路由的 css js 都是动静引入的，当初引入的是老版本的。所以这个文件应该是老版的，
留神红框的文件，走的缓存，然而打包进去的还是新版的，然而因为名字没有 Hash, 所以获取的是缓存的文件

验证

那么问题来了，vue-cli4 为什么没问题呢

vue-cli-service inspect > output.js 一下

能够发现

 // vue-cli5
 output: {filename: 'js/[name].js',
    chunkFilename: 'js/[name].js'
  }
//vue-cli4
 output: {filename: 'js/[name].[contenthash:8].js',
  }

所以 vue-cli5 默认打包不带 hash 就会造成缓存问题。
而火狐的缓存问题尤为重大。必须强行清缓存。
所以解决方案
1.window.reload ==> window.reload(true)
2.vue.config.js 外面的添上

configureWebpack: {
    output: {filename: 'js/[name].[contenthash:8].js',
    }
}

后续

上完 fix 版 完满解决问题
产品：棒棒哒！

退出移动版