使用Webpack2時，以下兩個導入語句是否有區別？

Question

我正在看一個NPM包的文檔，看到以下內容：

請注意，在上面的例子中，我們使用：

import RaisedButton from 'material-ui/RaisedButton';

，而不是

import {RaisedButton} from 'material-ui';

這將使您的構建過程更快，構建輸出更小。

當使用Webpack2時，兩個導入關於構建速度和包大小有什麼不同嗎？

Answer 1

閱讀陣營路由器的文檔，我發現以下幾點：

如果你可以 導入模塊可以直接去爲一個最小化的束的大小在網絡上。從理論上講，Webpack這樣的樹木搖晃捆綁器使得這個不必要，但我們還沒有測試過它。我們 歡迎您來！

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

//等

所以我想答案是，使用的WebPack時，兩個進口量應導致生產的同捆的大小，但做這樣的事情import {RaisedButton} from 'material-ui';可能的WebPack導致花點時間捆綁。

Answer 2

是的。這兩種導入都不相同，它們確實會影響構建時間和構建輸出。

當您使用import {RaisedButton} from 'material-ui';時，實際上是從主文件index.js導入文件，該文件也在導出其他組件。因此，webpack endup捆綁所有其他組件，這些組件在這個文件中導出，捆綁包增加了捆綁包的大小和捆綁時間。

但是，如果您使用的是import RaisedButton from 'material-ui/RaisedButton';，那麼您只需從凸出按鈕的index.js導入凸出按鈕，該按鈕僅導出凸出按鈕。因此，webpack將只綁定提升的按鈕，沒有其他任何東西會導致更小的包大小和時間。