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

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


  注意，在上面的示例中，我们使用了：
  
  import RaisedButton from 'material-ui/RaisedButton';
  
  代替
  
  import {RaisedButton} from 'material-ui';
  
  这将使您的构建过程更快，并且构建输出更小。


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

最佳答案

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

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

但是，如果您使用import RaisedButton from 'material-ui/RaisedButton';，则将从凸起按钮的index.js导入凸起按钮，而后者仅导出凸起按钮。因此，webpack将仅捆绑凸起的按钮，而不会导致捆绑包尺寸和时间减少。

关于javascript - 使用Webpack2时，以下两个import语句之间有区别吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42117975/