9

react-router + webpack コード分割 + serviceer worker (またはキャッシュ) の問題に苦しんでいます。

基本的に問題は次のとおりです。コード分割は適切に機能していますが、時折、sentry.io で顧客から次のようなエラー レポートを受け取ります。

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

私の反応ルーターコードは次のとおりです。

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 などから報告があるため、この問題はブラウザに関連したものではありません。

私が間違っている可能性があること、またはこの問題をどのように修正できるかについての手がかりはありますか?

4

1 に答える 1