libからのimport {module}とjavascriptのlib/moduleからのimportモジュールとの違い

Question

私はベンダーbundle.jsを膨らませ、material-uiライブラリを使用しています。

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

2つのインポートステートメントの違いは、アプリケーションにインポートされたjsコードのサイズが同じかどうか、誰かに教えてもらえますか？

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

Answer 1

import Card from 'material-ui'; 

これは、インポートで定義されて材料-UIとしてカードにデフォルトを使用してエクスポートされているものは何でもインポートされます。

import { Card } from 'material-ui'; 

これは材料-UIから（カードが存在すると仮定した場合）という名前の輸出カードをインポートします。

詳細については、次のスタックオーバーフローポストを参照してください。この場合

When should I use curly braces for ES6 import?

Answer 2

、彼らは同じです。エクスポートされたメンバーをインポートする

インポート

import { Card } from 'material-ui'; 

対応するルートからCardと呼ばれます。 （material-ui/Cardです）./Cardからdefault exportをインポート

export Card from './Card'; 

：source codeを見ると、我々はそれがこのようになっていることを参照してください。

二輸入

import Card from 'material-ui/Card' 

は我々だけで正確に最初のインポートがやったことであったmaterial-ui/Cardからデフォルトのエクスポートを、インポートします。

したがって、同じです。

Answer 3

主な違いは、コンパイルされたコードにあります。パフォーマンス、最初のオプション改善するために：それはあなたが要求しているモジュールに直接行くので

import Card from 'material-ui/Card' 

を最高のものです。第二のオプションで

：

export Card from './Card' 

バベルは、コンパイルされたコードは、最初のオプションよりも大きくなるようにコードをコンパイルするtransform-export-extensionプラグインを使用します。