Kod bölme ile satıcıların birden çok kez yüklenmesini nasıl önleyebilirim

Question

Şu anda create-react-app ile dolaşıyorum ve şu anda kod bölme yapıyorum. Her yığına dahil edilecek olan satıcı kütüphanelerini almaya başladım.

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

0: benim şimdiki yaklaşım

Şu anda HomePage ve AboutPage

ve AboutPage, şu anda temelde aynıdır, ancak sadece bir oyun alanıdır.

Sorun şu ki: HomePage için yığın ve AboutPage tüm styled-components paketini yükler. Bu bir kez yüklenmeli, değil mi?

resmin üzerinde görebileceğiniz gibi

, 2.chunk.js ve 1.chunk.js hem 121KB vardır. Kod bölme işlemi, paketler birden çok kez içe aktarılır çekilmez, kendi yığınına styled-components hareket edeceğini düşündüm.

Bilgileriniz için: create-react-app kullanıyorum ve eject'u kullanmadım, bu yüzden webpack yapılandırmasının içinde ne olduğunu hiçbir fikrim yok (eğer bu önemli ise).

Answer 1

Sorun, webpackRequireWeakId eksikti. Yerine

...

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

... Ben kullanmak zorunda ... react-loadable ait belgelerinde açıklandığı şekilde

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

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