一个发版问题

问题

用户正在使用某个页面期间，后台发布新的版本，用户再切换其他页面，
浏览器会报一个资源找不到的error,导致页面崩溃

原理

最终发布的版本会经过打包处理，每次打包的产物，文件名会不同
新发布的版本是最新打包的结果，上个版本发布的是上次发版前的结果
后台发布到服务器的项目新版本不再包含上个版本发布的文件
即服务器仅有新版本的文件
如果触发切换页面，此时浏览器向服务器发起请求上个版本的文件
服务器仅有最新版本文件，不再包含上个版本文件
故返回404，浏览器崩溃

背景

使用vue框架编写项目，使用vue-router进行路由切换

解决

利用路由

在路由生命钩子函数中添加onerror的处理，
让当前页面重新load一下，把资源拉回来，再让用户自己去点击要切换的页面

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  if (isChunkLoadFailed) {
    $Message('系统更新，页面将进行刷新操作！')
    window.location.reload()
  }
})

轮询

使用webpack打包的时候生成一个hash.json的文件，然后前端轮询，
发现hash改变，就弹窗提示用户进行更新

借助CDN缓存策略

发版代码放到cdn上，用户未进行任何刷新操作则仍使用老代码，
用户进行了手动刷新，则拿到最新版本，进入新页面