如何通过代码拆分多次阻止供应商加载

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基本的时刻相同,但它只是一个游乐场.

问题是:chunk用于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