這些使用Webpack導入模塊的方式之間有什么區別？

Question

像這樣從material-ui導入東西有什么區別

import { Paper } from '@material-ui/core'

與類似的方式，在我的Webpack設置中，其工作方式完全相同：

import Paper from '@material-ui/core/Paper'

這些導入方法中是否有任何一種在生成的包大小方面花費高昂？

注意：

我在用Create-React-App和我使用的Create-Reac-App引導的項目中使用了Webpack v3.5.1

Answer 1

如果是import { Paper } from '@material-ui/core'則要從@material-ui/core模塊導入名為Export的Paper，該模塊包含其他命名的導出。

如果import Paper from '@material-ui/core/Paper'則從@material-ui/core/Paper模塊導入默認導出，該模塊僅包含Paper並將其導出為默認值。

一些庫采用這種方法來公開帶有命名導出的主腳本和每個函數的單獨模塊。 例如，Lodash。 您既可以import { find } from 'lodash'也import find from 'lodash/find' 。 在這兩種情況下，您將獲得相同的find功能。

關於專業人士，根據打包程序的配置和庫使用的模塊系統，這可能不會搖搖晃晃地import { Paper } from '@material-ui/core'最終您會得到整個'@material-ui/core' 。

這： import Paper from '@material-ui/core/Paper'肯定會始終僅將Paper添加到捆綁的代碼中。

Answer 2

import { something } from 'test-m'意味着， test-m有一個命名的export ，即：

module.exports = { something: 'other string' }

甚至使用es6語法：

export const something = 'other string'

-

import something from 'test-m' => import something from 'test-m'意味着test-m具有默認導出 ，即：

module.exports = 'other string'

或使用es6語法export default 'other string'

這如何影響捆綁？ 好吧，命名出口是必經之路。 為什么？

命名導出僅從每個模塊中導入必需的內容，因此，通過使用命名導出，捆綁程序可以對模塊進行樹狀搖動，僅從模塊中取出必要的內容。 此過程將減少最終模塊的大小。 與默認導出相比，捆綁程序將拉動整個模塊的塊，即使您使用該模塊提供的一項或全部功能。

TL; TR：命名出口===較小的捆束尺寸。

Answer 3

第一次導入將導入默認的類導出。 而第二次導入僅導入導出的函數/對象。 在為React導入Jest測試時，這是一個非常普遍的區別。

以Redux連接的組件為例：

export class ReduxConnect {

  render(){
    return (<h1> Some component </h1>);
  }

}

export const mapStateToProps = state => ({
  something: state.something
});

export default connect(mapStateToProps)(ReduxConnect);

進行import ReduxConnect將導入默認導入，該默認導入在底部定義，導出導出的Redux連接的組件。 而import {ReduxConnect, mapStateToProps}將為您提供從類單獨導出對象/函數的選項。 在這種情況下，差異將在於導入Redux連接的組件與純組件本身之間。