我正在努力解决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等的报告
有关我可能做错的任何线索或如何解决此问题?
答案 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()
})
}}
/>
它也发生在我身上,我不认为我有一个合适的解决方案,但我注意到这通常发生在我部署新版本的应用程序,块的哈希值发生变化,以及何时我尝试导航到另一个地址(块),旧块不存在(好像它没有被缓存),我得到了错误。
我设法通过删除缓存内容和部署新版本的服务工作者来重现这一点(我想在没有服务工作者运行的情况下模拟用户?)。
在我的情况下,似乎错误发生在旧文件未缓存时(因此不再可用)并且用户没有重新加载页面以请求新文件。重新加载&#39;修复&#39;问题是因为应用程序具有正确加载的新块名称。
我试过的其他东西是命名没有哈希值的块文件,所以代替3.something.js它们只有3.js.当我部署新版本时,块显然仍然存在,但这不是一个好的解决方案,因为文件将由浏览器缓存而不是由缓存插件缓存。
编辑:与您相同的设置,使用sw-precache-webpack-plugin。