前端项目发布后，如何使正在使用的用户更新为最新的版本？

1.背景

• 每次项目上线后，异常监控总是零零散散报一些资源加载或者解析失败的告警
  
• 仔细对比chunk的hash值会发现已经是上一版本的js文件
• 为什么会出现这个问题呢？也不难想到，项目是单页应用，页面使用懒加载分多个chunk打包，首次只加载首页需要的js文件。如果在项目发布前，用户已经在程序中，并且还有未访问的页面，此时我们重新发布上线了，老的文件已经被覆盖，用户再访问未访问过的页面时就会找不到资源，导致白屏。
• 如果用户在发布前已经进入过其他页面，被缓存在本地，这样虽然不会导致白屏了，但是也无法看到最新的效果。
• 在测试环境模拟一下，点击一个未访问过的页面时，确实白屏了，报错信息也吻合
  

2.解决思路

• 导致这些问题的根本原因就是，用户和程序都无法感知项目已上线，无法做到立即刷新，重新加载，那我们就想办法在项目上线后通知页面进行刷新。

2.1运行中的项目，如何感知到项目更新了

• 最容易想到的就是有一个存储版本号的地方，我们去轮询是否和上一次请求到的版本一致，如果不一致去做一些刷新的操作
• 既然是前端的项目，最好还是我们自己去维护这个数据，所以我选择在每次打包的时候生成一个存储当前时间戳的json文件，存在dist目录下一起放到我们前端服务器上。
• 写一个最最简单的webpack插件帮我们实现生成json文件的功能

const pluginName = 'GenerateTimeJsonWebpackPlugin';
const fs = require('fs');
const path = require('path');

class GenerateTimeJsonWebpackPlugin {
   
  apply(compiler) {
   
    compiler.hooks.run.tap(pluginName, (compilation) =>