likes
comments
collection
share

拍案惊奇—vue-cli5项目关于中的一个缓存诡异bug分析

作者站长头像
站长
· 阅读数 17

现象描述

新发了一版代码产品:“火狐没更新”我:“多刷新几次”产品:“没用”我:“强刷”产品:“好棒棒,但是你之前不是写了一个版本检测,能自动更新吗,为什么这次不管用,还要手动强刷,普通刷新不管用”我内心:"女人就是麻烦" 于是看了下复现的环境,发现了震惊的一幕HTML代码长这样拍案惊奇—vue-cli5项目关于中的一个缓存诡异bug分析我内心:绝不可能,绝对不可能,啊,我的世界观崩塌了。要么全是webpakc打包的新版代码,要么走缓存全是老版代码。为啥能出现一个html一半是新版一半是老版代码的情况???拍案惊奇—vue-cli5项目关于中的一个缓存诡异bug分析

马桶上的思考

思考过程

苦思良久,没有头绪首先 有新版控制代码 Html一定是新的但是为啥有老版代码呢 我仔细有看了下本地打包后的代码,终于发现了端倪拍案惊奇—vue-cli5项目关于中的一个缓存诡异bug分析由于vue有按需加载 每个路由的css js 都是动态引入的,现在引入的是老版本的。所以这个文件应该是老版的,注意红框的文件,走的缓存,但是打包出来的还是新版的,但是由于名字没有Hash,所以获取的是缓存的文件拍案惊奇—vue-cli5项目关于中的一个缓存诡异bug分析

验证

那么问题来了,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版 完美解决问题产品: 棒棒哒!

转载自:https://segmentfault.com/a/1190000041899590
评论
请登录