前端重新部署后，领导跟我说页面崩溃了…

背景：

每次前端更新，重新部署后，用户还停留在更新之前的页面，当请求页面数据时，会导致页面白屏，报错信息如下：

Uncaught ChunkLoadError: Loading chunk {n} failed.

原因

每次更新后，用户端的html文件中的 js 和 css 名称就和服务器上的不一致导致，导致加载失败。

解决方案

1.对error事件进行监听，检测到错误之后重新刷新

      window.addEventListener(
        'error',
        function (event) {
          if (
            event.message &&
            String(event.message).includes('Loading chunk') &&
            String(event.message).includes('failed')
          ) {
            window.location.replace(window.location.href);
          }
        },
        true,
      );
复制代码

2.对window.console.error事件监听，效果同上

      window.console.error = function () {
        console.log(JSON.stringify(arguments), 'window.console.error'); // 自定义处理
      };
复制代码

3.其他方案

如：HTTP2.0推送机制 / fis3 构建 /webSocket通知等，未尝试

注:有好的方案可以在下面评论讨论哈

本篇收录在个人工作记录专栏中，专门记录一些比较有意思的场景和问题。