Surprise at the table - analysis of a strange cache bug in the vue-cli5 project

Symptom

A new version of the code product was released: "Firefox has not been updated"
Me: "refresh several times"
Product: "Useless"
Me: "strong brush"
Product: "It's great, but didn't you write a version check before, can you update it automatically? Why doesn't it work this time, and you have to manually refresh it, and the normal refresh doesn't work?"
In my heart: "Women are trouble" So I looked at the reappearing environment and found a shocking scene
HTML code looks like this

Inside me: Absolutely impossible, absolutely impossible, ah, my worldview collapsed. Either all the new version code packaged by webpakc, or the cache is all old version code.
为啥能出现一个html一半是新版一半是老版代码的情况？？？

Thinking on the toilet

thought process

After thinking hard for a long time, I have no clue. First of all, there is a new version of the control code. Html must be new, but why is there an old version of the code? I carefully looked at the local packaged code, and finally found the clue

Since vue loads the css js of each route on demand, it is imported dynamically, and the old version is imported now. So this file should be an old version,
Pay attention to the file in the red box, go to the cache, but the packaged version is still a new version, but because the name does not have a Hash, the cached file is obtained.

verify

So the question is, why is vue-cli4 no problem?

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

it can be discovered

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

Therefore, vue-cli5 is packaged without hash by default, which will cause caching problems.
And Firefox's cache problem is particularly serious. The cache must be forcibly cleared.
so the solution
1.window.reload ==> window.reload(true)
2. Add in vue.config.js

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

follow-up

After finishing the fix version, the product that solves the problem perfectly: Great!