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

【问题标题】：How to prevent loading vendors multiple times with code splitting如何通过代码拆分防止多次加载供应商
【发布时间】：2017-11-09 09:09:21
【问题描述】：

我现在正在玩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>
    );
  }
}

关于.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 配置中的内容（如果这很重要的话）。

【问题讨论】：

标签： webpack create-react-app

【解决方案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

【讨论】：