Cách ngăn chặn các nhà cung cấp tải nhiều lần với việc tách mã

Question

Tôi đang phát xung quanh với create-react-app và chia tách mã tại thời điểm này. Nó hoạt động thực sự tốt cho đến khi tôi bắt đầu nhập thư viện của nhà cung cấp, những thư viện này sẽ được đưa vào mọi đoạn.

Đó là cách tiếp cận hiện tại của tôi:

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; 

Vì vậy, HomePage và AboutPage về cơ bản là giống nhau vào lúc này, nhưng đó chỉ là sân chơi.

Vấn đề là: đoạn cho HomePage và AboutPage tải toàn bộ gói styled-components. Điều này nên được nạp một lần, phải không?

Như bạn có thể thấy trên hình ảnh, 2.chunk.js và 1.chunk.js đều 121kb. Tôi nghĩ rằng việc tách mã sẽ di chuyển styled-components thành đoạn riêng của nó ngay sau khi các gói được nhập nhiều lần?

Để biết thông tin của bạn: Tôi đang sử dụng create-react-app và không chạy eject vì vậy tôi không biết có gì bên trong cấu hình webpack (nếu điều này quan trọng).

Answer 1

Sự cố là thiếu webpackRequireWeakId.

Thay vì ...

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

... Tôi phải sử dụng ...

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

... như mô tả trong tài liệu hướng dẫn của react-loadable: https://github.com/thejameskyle/react-loadable#why-are-there-multiple-options-for-specifying-a-component