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

时间:2017-03-26 20:51:26

标签: caching react-router service-worker webpack-2 code-splitting

我正在努力解决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等的报告

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

1 个答案:

答案 0 :(得分:4)

编辑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()
    })
  }} 
/>

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

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

  1. 删除服务工作者代码
  2. 取消注册devtools中的服务工作者
  3. 重新加载页面
  4. 部署新的应用版本
  5. 导航到另一个块(例如从/ home到/ about)
  6. 在我的情况下,似乎错误发生在旧文件未缓存时(因此不再可用)并且用户没有重新加载页面以请求新文件。重新加载&#39;修复&#39;问题是因为应用程序具有正确加载的新块名称。

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

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