प्रतिक्रिया राउटर कोड विभाजन "यादृच्छिक रूप से" लोडिंग लोड पर विफल रहता है

Question

मैं प्रतिक्रिया-राउटर + वेबपैक कोड स्प्लिट + सर्विसिकर वर्कर (या कैश) के साथ किसी समस्या के साथ संघर्ष कर रहा हूं।

असल मुद्दा है, वह इस प्रकार है कोड विभाजन ठीक से काम कर रहा है, लेकिन समय-समय पर मैं 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' 
    } 
}) 

समस्या ब्राउज़र से संबंधित नहीं है क्योंकि मेरे पास आईई 11, सफारी, क्रोम इत्यादि से रिपोर्ट हैं

कोई भी संकेत जो मैं गलत कर रहा हूं या मैं इस समस्या को कैसे ठीक कर सकता हूं?

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

---

यह भी मेरे लिए होता है और मुझे नहीं लगता कि मैं अभी तक एक उचित समाधान है, लेकिन क्या मैंने देखा, की हैश यह आम तौर पर होता है जब मैं एप्लिकेशन का एक नया संस्करण को तैनात है भाग बदलते हैं, और जब मैं किसी अन्य पते (खंड) पर नेविगेट करने का प्रयास करता हूं तो पुराना खंड मौजूद नहीं होता है (ऐसा लगता है जैसे यह कैश नहीं किया गया था) और मुझे त्रुटि मिलती है।

मैं सेवा कार्यकर्ता को हटाकर इसे पुन: उत्पन्न करने में कामयाब रहा जो सामान को कैश करता है और एक नया संस्करण तैनात करता है (जो मुझे लगता है कि सेवा कार्यकर्ता के बिना उपयोगकर्ता को अनुकरण करता है?)।

1. DevTools में सेवा कार्यकर्ता अपंजीकृत सेवा कार्यकर्ता कोड
2. हटाने
3. को फिर से लोड पेज
4. एक नई एप्लिकेशन संस्करण
5. एक और हिस्सा करने के लिए करने के लिए से/घर उदाहरण के लिए (नेविगेट तैनात/के बारे में)

मेरे मामले में ऐसा लगता है कि त्रुटि तब होती है जब पुरानी फाइलें कैश नहीं होती हैं (इसलिए अब और उपलब्ध नहीं होती है) और उपयोगकर्ता नहीं करता नए अनुरोध करने के लिए पृष्ठ को पुनः लोड नहीं करें। रीलोडिंग 'फिक्स' समस्या है क्योंकि ऐप में नए खंड नाम हैं, जो सही ढंग से लोड होते हैं।

कुछ और मैंने कोशिश की थी उनके हैंश के बिना चंक फ़ाइलों का नाम, इसलिए 3.something.js के बजाय वे केवल 3.j थे। जब मैंने एक नया संस्करण तैनात किया तो भाग अभी भी वहां थे, लेकिन यह एक अच्छा समाधान नहीं है क्योंकि फ़ाइलों को कैशिंग प्लगइन द्वारा कैश किए जाने के बजाय ब्राउजर द्वारा कैश किया जाएगा।

संपादित करें: स्व-सटीक-वेबपैक-प्लगइन का उपयोग करके, आपके जैसा ही सेटअप।