Jak zapobiec wielokrotnemu wczytywaniu sprzedawców przy dzieleniu kodu?

Question

Obecnie odtwarzam z create-react-app i dzieleniem kodu. Sprawdzało się bardzo dobrze, dopóki nie zacząłem importować bibliotek dostawców, które będą uwzględnione w każdym kawałku.

To moje obecne podejście:

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; 

Tak więc HomePage i AboutPage są w zasadzie w zasadzie takie same, ale to tylko plac zabaw.

Problem polega na tym, że porcja dla HomePage i AboutPage ładuje cały pakiet styled-components. To powinno być załadowane jeden raz, czyż nie?

Jak widać na obrazie, 2.chunk.js i 1.chunk.js są zarówno 121kb. Myślałem, że dzielenie kodu przeniesie styled-components do własnego kawałka, gdy tylko pakiety zostaną zaimportowane wiele razy?

Dla twojej informacji: używam create-react-app i nie uruchamiać eject więc nie mam pojęcia, co jest w środku konfiguracji webpack (gdyby to znaczenia).

Answer 1

Problem polegał na braku numeru webpackRequireWeakId.

Zamiast ...

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

... muszę używać ...

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

... jak to opisano w dokumentacji react-loadable: https://github.com/thejameskyle/react-loadable#why-are-there-multiple-options-for-specifying-a-component