reactjs - 使用基于 React Route 的代码拆分进行全新构建后的白页

Question

该应用程序正在使用 react 和基于 React Route 的代码拆分：https ://reactjs.org/docs/code-splitting.html#route-based-code-splitting

该应用程序运行良好。用户在主页上。然后我更改代码并再次构建应用程序。

用户正在点击一个链接，他正在登陆一个白页。当然，bundle 已经改变，加载新页面（感谢React.lazy）会报错。

Uncaught SyntaxError: Unexpected token <

如何防止这种情况并显示例如：“站点已更新，请重新加载”而不是白页？

标签： reactjscode-splitting

Answer 1

这是建立在艾伦的评论之上的，这并不能完全解决原始问题的问题。我遇到了类似的问题，在服务器上完成的构建更改了我使用 React.lazy() 加载的捆绑包的所有文件名，并且没有刷新页面的用户将寻找不再存在的捆绑包，导致在他描述的错误中。

同样，这主要基于 Alan 的代码，但很好地解决了问题......

export default function lazyReloadOnFail(fn) {
  return new Promise(resolve => {
    fn()
      .then(resolve)
      .catch(() => {
        window.location.reload();
      });
  });
}


const Report = React.lazy(() => lazyReloadOnFail(() => import('./views/Reports/Report')));