caching - React Router 代码拆分 "randomly"加载 block 失败

Question

我正在努力解决react-router + webpack代码分割+服务 worker (或缓存)的问题。

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

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

我的 react 路由器代码如下:

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>
);

对于我的 ServiceWorker，我使用 OfflinePlugin 进行以下配置:

new OfflinePlugin({
    cacheName: 'cache-name',
    cacheMaps: [
        {
            match: function(requestUrl) {
                return new URL('/', location);
            },
            requestTypes: ['navigate']
        }
    ],
    externals: [
        'assets/images/logos/slider.png',
        'assets/images/banners/banner-1-320.jpg',
        'assets/images/banners/banner-1-480.jpg',
        'assets/images/banners/banner-1-768.jpg',
        'assets/images/banners/banner-1-1024.jpg',
        'assets/images/banners/banner-1-1280.jpg',
        'assets/images/banners/banner-1-1400.jpg'
    ],
    responseStrategy: 'network-first', // One of my failed attempts to fix this issue
    ServiceWorker: {
        output: 'my-service-worker.js'
    }
})

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

关于我可能做错了什么或者如何解决这个问题有任何线索吗？

Answer 1

编辑 2:我结束了使用带有哈希值的 block ，并在 errorLoading 的 中执行了 window.location.reload() >catch()，因此当浏览器无法加载 block 时，它将重新加载窗口并获取新文件。

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

<小时/>

这也发生在我身上，我认为我还没有合适的解决方案，但我注意到，当我部署应用程序的新版本时， block 的哈希值会发生变化，并且当我尝试时，通常会发生这种情况要导航到另一个地址( block )，旧 block 不存在(看起来好像没有缓存)，我收到错误。

我设法通过删除缓存内容的服务工作人员并部署新版本来重现此问题(我猜这是在没有运行服务工作人员的情况下模拟用户？)。

1. 删除 Service Worker 代码
2. 在 devtools 中取消注册 Service Worker
3. 重新加载页面
4. 部署新的应用版本
5. 导航到另一个 block (例如从/home 到/about)

在我的情况下，似乎当旧文件未缓存(因此不再可用)并且用户不重新加载页面以请求新文件时发生错误。重新加载“修复”了该问题，因为应用程序具有新的 block 名称，可以正确加载。

我尝试的其他方法是命名不带哈希值的 block 文件，因此它们只是 3.js，而不是 3.something.js。当我部署新版本时， block 显然仍然存在，但这不是一个好的解决方案，因为文件将由浏览器缓存，而不是由缓存插件缓存。

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