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

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

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

How to prevent loading vendors multiple times with code splitting

webpack

create-react-app