关于PC端版本更新文件404以及不更新问题

背景

你是不是也经常遇见以下的情况

场景一
用户A：我的页面怎么一直在加载
我：好的，我看下

我：怎么404了，奇怪
我：你Ctrl+F5强刷一下

场景二
我：版本更新了
用户A：好的，点击立即更新版本刷新一下呈现最新页面，版本号发生改变
用户B：我的版本怎么更新了没有用，还是老界面啊，版本未发生改变 我：好的，我看下

以上二种情况是我之前经常遇到的问题，找不到原因，所以浏览器背大锅，出问题你只需要记住Ctrl+F5大法,保证药到病除。直到我看到了sailing大佬的缓存文章，我终于知道了这其中的来龙去脉。

问题解决过程

构建工具
vite：4.4.9

场景一的问题解决

问题原因：
vite build 的时候会将文件生成一个hash值，如果文件发生变化，这个hash值将会改变，而我们线上版本又是覆盖更新，所以一上线该文件就会丢失，报404。

问题解决：
好的，我们知道了原因就可以愉快的解决问题了，我们可以做增量更新，将所有的打包出来的文件放到一个时间戳目录下进行存储，我们每次部署的时候增量更新，定时删除时间戳文件就完美解决这个问题了。以下是相关配置

   rollupOptions: {
      output: {
        entryFileNames: `${time}/[name].js`,
        chunkFileNames: `${time}/[name].js`,
        assetFileNames: `${time}/[name].[ext]`
      },
    }

场景二的问题解决

问题原因：
为什么有些人更新了，有些人没有更新？这一切一切的原因都归结于location.reload(true)，当然也不能全怪他，要怪自己没看清楚文档，这玩意兼容性不太好，说加个布尔参数就可以强制清除浏览器缓存刷新，其实也只有火狐浏览器支持这个特性

还有就是我的vite配置也有些问题entryFileNames: 'assets/[name].js'，我把默认的hash值给去掉了，会导致缓存。

问题解决：
好的，知其因，解其疑。因为找遍了整个搜索引擎，我没有找到有效强制清除缓存的API所以通过JS强刷浏览器无解，只能我们将index.js加上hash值进行增量部署解决缓存问题，当然要记得把index.html在服务端设置为强制不缓存。

结尾

以上就是关于PC端版本更新我遇到的坑，当然以上只是本人的个人理论，还没有在生产坏境实践过。另外还有个题外话，Vite、webpack这些构建工具是如何知道文件发生变化的，是缓存了上次打包结果吗？是通过git吗？还是其他方式？这个还有待探索。