Question

我正在努力解决react-router + webpack code split + servicer worker（或cache）的问题。

基本上问题如下，代码拆分工作正常但我不时会收到来自sentry.io的客户的错误报告，例如：

Integer.toString(sum)

我的react-router代码如下：

"Dynamic page loading failed Error: Loading chunk 19 failed."

对于我的ServiceWorker，我使用OfflinePlugin并使用以下配置：

const errorLoading = (err) => {
    console.error('Dynamic page loading failed', err);
};

export default (
    <Route path="/" component={App}>
        <IndexRoute
            getComponent={(nextState, cb) => {
                System.import('./containers/home/home')
                    .then((module) => { cb(null, module.default); })
                    .catch(errorLoading);
            }}
        />
    </Route>
);

该问题与浏览器无关，因为我有来自IE11，safari，chrome等的报告

有关我可能做错的任何线索或如何解决此问题？

Answer 1

编辑2 ：我结束了使用哈希的块，并在window.location.reload() errorLoading内执行catch()，因此当浏览器失败时要加载一个块，它将重新加载窗口并获取新文件。

<Route path="about" 
  getComponent={(location, callback) => {
    System.import('./about')
    .then(module => { callback(null, module.default) })
    .catch(() => {
      window.location.reload()
    })
  }} 
/>

它也发生在我身上，我不认为我有一个合适的解决方案，但我注意到这通常发生在我部署新版本的应用程序，块的哈希值发生变化，以及何时我尝试导航到另一个地址（块），旧块不存在（好像它没有被缓存），我得到了错误。

我设法通过删除缓存内容和部署新版本的服务工作者来重现这一点（我想在没有服务工作者运行的情况下模拟用户？）。

删除服务工作者代码
取消注册devtools中的服务工作者
重新加载页面
部署新的应用版本
导航到另一个块（例如从/ home到/ about）

在我的情况下，似乎错误发生在旧文件未缓存时（因此不再可用）并且用户没有重新加载页面以请求新文件。重新加载＆＃39;修复＆＃39;问题是因为应用程序具有正确加载的新块名称。

我试过的其他东西是命名没有哈希值的块文件，所以代替3.something.js它们只有3.js.当我部署新版本时，块显然仍然存在，但这不是一个好的解决方案，因为文件将由浏览器缓存而不是由缓存插件缓存。

编辑：与您相同的设置，使用sw-precache-webpack-plugin。

在加载块时，“随机”拆分的React Router代码失败

1 个答案: