使用Webpack2时，以下两个import语句之间有区别吗？

Question

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

  

请注意，在上面的示例中，我们使用了：

     

import RaisedButton from 'material-ui/RaisedButton';

     

而不是

     

import {RaisedButton} from 'material-ui';

     

这将使您的构建过程更快，构建输出更小。

使用Webpack2时，两个导入在构建速度和包大小方面有不同吗？

Answer 1

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

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

但是如果您使用import RaisedButton from 'material-ui/RaisedButton';，那么您将从凸起按钮index.js导入凸起按钮，该按钮仅导出凸起按钮。因此，webpack只捆绑凸起的按钮，没有其他任何东西可以减少捆绑包的大小和时间。

Answer 2

阅读React Router的文档，我发现了以下内容：

  

如果你想在网上找到一个非常小的包大小，你可以   直接导入模块。理论上是一个像树一样震动的捆绑器   Webpack使这不必要，但我们尚未测试它。我们   欢迎你来！

import Router from 'react-router-dom/BrowserRouter'
import Route from 'react-router-dom/Route'

     

//等。

所以我认为答案是，在使用Webpack时，两个导入应该在生产中产生相同的bundle大小，但是执行import {RaisedButton} from 'material-ui';之类的操作可能会导致webpack花费更长的时间来捆绑。