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有一个很酷的新功能叫做树抖动。这允许捆绑包自动摆脱任何未使用的多余代码。如果上述方法不起作用，这可能是另一种选择。

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

<强>更新

材料上有一个主题，讨论更好的进口和树木摇晃请参阅：https://github.com/callemall/material-ui/issues/2679

webpack包含整个库，而不仅仅是其中的一部分

1 个答案: