javascript - 使用Webpack2时，下面两个import语句有区别吗？

Question

我正在查看 npm 包的文档并看到以下内容:

Notice that in the above example, we used:

import RaisedButton from 'material-ui/RaisedButton';

instead of

import {RaisedButton} from 'material-ui';

This will make your build process faster and your build output smaller.

使用 Webpack2 时，两种导入在构建速度和包大小方面是否存在差异？

Answer 1

是的。两个导入是不同的，它们确实会影响构建时间和构建输出。

当您使用 import {RaisedButton} from 'material-ui'; 时，您实际上是从 main index.js 导入它文件，它也导出其他组件。因此，webpack 最终将在此文件中导出的所有其他组件捆绑在 bundle 中，这增加了 bundle 的大小和捆绑时间。

但是，如果您使用 import RaisedButton from 'material-ui/RaisedButton';，那么您将从凸起按钮的 index.js 导入凸起按钮，它仅导出凸起的按钮。因此 webpack 将仅捆绑凸起的按钮，不会导致更小的捆绑大小和时间。