为什么 webpack 在我的第一个条目以及我的页面包中包含一个模块

Question

我的 webpack 和我的 react-router 应用程序似乎存在某种配置问题。我正在尝试按页面分解捆绑包，但我正在使用 react-router 并且我有一个“main”，它执行 router.run 来路由应用程序路径。看起来当 webpack 运行那个主文件时，它会递归地将所有模块从主文件写入到结果包中。

这是一个演示行为的可克隆仓库

git clone https://github.com/adjavaherian/webpack-react-router
cd webpack-react-router
npm install
webpack

这将创建一个 dist 目录，您可以使用 grep 检查该模块是否包含两次

$ grep -R zzz dist
dist/main.bundle.js:                'zzzzzz'
dist/mobileAppsPage.bundle.js:              'zzzzzz'

我希望因为我使用多个 webpack 条目，只有 mobileAppsPage.bundle.js 应该有“zzzzzz”，因为这是唯一包含 React TestClass.jsx 的地方。

关于我做错了什么有什么想法吗？

https://github.com/adjavaherian/webpack-react-router

Answer 1

我还没有深入研究 Webpacks 包拆分，但是您的 main.js 和您的 MobileAppsPage.jsx 在它的直接依赖图中都有 TestClass.jsx。

由于main.js 需要AppRoutes.jsx 需要MobileAppsPage.jsx，所以main.js 和MobileAppsPage.jsx 都依赖于TestClass.jsx。因此，将这两者分开并没有什么可取之处。

您可能想要做的是在启动时不需要您的路由组件，而是等待路由被命中，然后使用 require.ensure (http://webpack.github.io/docs/code-splitting.html) 异步加载该捆绑包。

类似这样的东西（没有测试过）：

var MobileAppsPage = null;

var MobileAppsPageLoader = React.createClass({
  componentDidMount() {
    require.ensure(['./pages/MobileAppsPage'], () => {
      MobileAppsPage = require('./pages/MobileAppsPage');
      this.forceUpdate();
    });
  },
  render() {
    if (MobileAppsPage) {
      return <MobileAppsPage {...this.props} />;
    } else {
      return <div className="spinner" />;
    }
  }
});

var AppRoutes = (
  <Route path='/' handler={AppTemplate}>
    <Route name="FrontPage" path='/' handler={FrontPage}/>
    <Route name="MobileAppsPage" path="mobile-apps" handler={MobileAppsPageLoader}/>
  </Route>
);

您可能还想查看有关 Webpack 中代码拆分的示例，以将模块从 node_modules 拆分为单独的包 (http://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code)，因为您的所有包都可能依赖于 React。