लोड हो रहा है को रोकने के लिए कोड बंटवारे

Question

मैं create-react-app के साथ चारों ओर खेल रहा हूँ और कोड बंटवारे पल में एक से अधिक बार विक्रेताओं। जब तक मैंने विक्रेता पुस्तकालयों को आयात करना शुरू नहीं किया, तब तक यह वास्तव में अच्छा काम करता था, जो प्रत्येक खंड में शामिल होने जा रहे हैं।

मेरे वर्तमान दृष्टिकोण है कि:

App.js

const HomePage = Loadable({ 
    loader:() => import('./Home.js'), 
    LoadingComponent: Loading 
}); 

const AboutPage = Loadable({ 
    loader:() => import('./About.js'), 
    LoadingComponent: Loading 
}); 

class App extends PureComponent { 
    render() { 
    return (
     <Router> 
     <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={HomePage}/> 
     <Route path="/about" component={AboutPage}/> 
    </div> 
    </Router> 
    ); 
    } 
} 

About.js

import React, { PureComponent } from 'react'; 
import styled from 'styled-components'; 

const Button = styled.button` 
    color: aqua; 
`; 

class AboutPage extends PureComponent { 
    render() { 
    return (
     <div> 
     About 
     <Button>Fooobar!</Button> 
     </div> 
    ); 
    } 
} 

export default AboutPage; 

Home.js

import React, { PureComponent } from 'react'; 
import styled from 'styled-components'; 

const Button = styled.button` 
    color: orange; 
`; 

class HomePage extends PureComponent { 
    render() { 
    return (
     <div> 
     Home 
     <Button>Fooobar!</Button> 
     </div> 
    ); 
    } 
} 

export default HomePage; 

तो HomePage और AboutPage मूल रूप से इस समय एक ही हैं, लेकिन यह सिर्फ एक खेल का मैदान है।

समस्या यह है: HomePage और AboutPage के लिए खंड पूरे styled-components पैकेज को लोड करता है। इसे एक बार लोड किया जाना चाहिए, है ना?

आप छवि पर देख सकते हैं, 2.chunk.js और 1.chunk.js दोनों 121kb हैं। मैंने सोचा कि कोड विभाजन styled-components को अपने स्वयं के हिस्से में ले जाएगा जैसे ही पैकेज कई बार आयात किए जाते हैं?

आपकी जानकारी के लिए: मैं create-react-app उपयोग कर रहा हूँ और eject नहीं चला तो मैं पता नहीं क्या webpack विन्यास अंदर (यदि यह कोई फर्क चाहिए) है।

Answer 1

समस्या लापता webpackRequireWeakId था।

बजाय

...

const HomePage = RouteLoader({ loader:() => import('routes/home') }) 

... मैं उपयोग करने के लिए है ...

const HomePage = RouteLoader({ 
    loader:() => import('routes/home'), 
    webpackRequireWeakId:() => require.resolveWeak('routes/home') 
}) 

... react-loadable के दस्तावेज़ में वर्णित: https://github.com/thejameskyle/react-loadable#why-are-there-multiple-options-for-specifying-a-component