從lib中導入{module}和從lib/module在Javascript中導入模塊之間的區別

我想優化我的供應商bundle.js，因爲它膨脹了起來，而且我正在使用material-ui庫。從lib中導入{module}和從lib/module在Javascript中導入模塊之間的區別

import Card from 'material-ui'; // Very bad as this will import everything

有人能告訴我什麼是兩個導入語句之間的差異是在導入到你的應用程序js代碼大小方面或者是他們相同的。

import { Card } from 'material-ui'; 
import Card from 'material-ui/Card'

來源

2017-08-31 Nitish Phanse

從'material-ui/Card''導入卡片是否真的有效？ – DMan

是既可以。您可以在這裏參考他們的文檔http：//www.material-ui。com /＃/ components/app-bar –

啊，我正在尋找即將到來的v1的代碼... – DMan

import Card from 'material-ui';

這將導入無論是正在使用默認在材料UI爲卡在導入定義導出。

import { Card } from 'material-ui';

這將導入指定的出口卡從材料的UI（假設卡存在）。

有關更多信息，請參閱以下堆棧溢出帖子。

When should I use curly braces for ES6 import?

來源

2017-08-31 23:18:30 BrokenRobot

在這種情況下，它們是相同的。

導入

import { Card } from 'material-ui';

對應於導入導出部件從根稱爲Card。縱觀source code，我們看到它看起來像這樣：

export Card from './Card';

其中進口從./Card的default export（這是material-ui/Card）。

第二進口

import Card from 'material-ui/Card'

進口material-ui/Card默認的出口，這是我們剛剛出現正是首次進口做了什麼。

因此，它們是相同的。

來源

2017-08-31 23:19:54 DMan

我不認爲它們是一樣的。如果我錯了，請糾正我的錯誤，但是我認爲從'material-ui'中導入{Card}將把整個庫包含在捆綁包中，除非您使用的捆綁器支持樹狀結構。 material-ui似乎正在使用可以利用該優化的es6模塊。另一方面''material-ui/Card''中的'Import Card'將只包含Card組件及其依賴關係。 – pablogq

主要區別在於編譯後的代碼。爲了提高性能，第一個選項是：

import Card from 'material-ui/Card'

是最好的選擇，因爲它直接轉到您要求的模塊。

在第二選項：

export Card from './Card'

巴別使用transform-export-extension插件來編譯代碼，以便經編譯的代碼比第一選項更大。

來源

2017-08-31 23:33:45

從lib中導入{module}和從lib/module在Javascript中導入模塊之間的區別

回答

相關問題