reactjs - webpack 包括整个库而不是其中的一部分

Question

我有一个简单的组件，我正尝试在我的构建过程中使用 webpack，所以我有类似的东西

import React      from 'react';
import { AppBar } from 'material-ui';

export default () => (
  <AppBar
    title="Octopus"
    showMenuIconButton={ false }
    iconElementRight={<SaveLoadAnimation/>}
  />
);

我正在使用外部 AppBar 组件。在我的构建过程中，我像这样从包中排除了 React:

externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    }
}

问题在于 Webpack 在构建时包含了整个 material-ui 库，而不仅仅是 AppBar 组件。有解决办法吗？

Answer 1

您正在从导出所有组件的 material-ui 主文件导入。

参见: https://github.com/callemall/material-ui/blob/master/src/index.js

您可以尝试直接定位一个组件。例如

import AppBar from 'material-ui/lib/app-bar';

这可能可能有效，但我还没有尝试过。

Webpack 第 2 版有一个很酷的新功能，叫做 tree shaking。这允许 bundle 自动摆脱任何未使用的多余代码。如果上述方法不起作用，这可能是另一种选择。

这是一个使用 Webpack 2 及其 tree shaking 功能的示例应用程序: https://github.com/ModusCreateOrg/budgeting-sample-app-webpack2

---

更新

material-ui 上有一个讨论更好的导入和 tree shaking 的线程。
请参阅:https://github.com/callemall/material-ui/issues/2679