Webpack2を使用している場合、次の2つのインポートステートメントに違いはありますか？

Question

私はNPMパッケージのドキュメントを見てみて、次のを見ました。上の例では、我々が使用していること

お知らせ：

import RaisedButton from 'material-ui/RaisedButton';

代わりの

をimport {RaisedButton} from 'material-ui';

これにより、ビルドプロセスが速くなり、ビルド出力が小さくなります。

Webpack2を使用している場合、ビルド速度とバンドルサイズに関する2つのインポートの間に違いがありますか？

Answer 1

は、私は次を見つけた：

あなたが直接 インポートモジュールウェブ上で本当に最小限のバンドルサイズにすることができますつもりなら。理論的には、 Webpackのようなツリーシェイキングバンドラはこれを不要にしますが、まだテストしていません。我々は ようこそ！

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

//など

だから私は答えはWebPACKのを使用した場合、2つの輸入は生産の同じバンドルサイズをもたらすべきであるということだと思いますが、import {RaisedButton} from 'material-ui';のような何かをすることにWebPACKの原因となりますバンドルに少し時間がかかる。

Answer 2

はい。両方のインポートが異なり、ビルド時間とビルド出力に影響します。

import {RaisedButton} from 'material-ui';を使用している場合は、他のコンポーネントもエクスポートしているindex.jsメインファイルから実際にインポートしています。したがって、webpackは、このファイルにエクスポートされた他のすべてのコンポーネントをバンドルしてバンドルを増やし、バンドルサイズとバンドル時間を両方とも増加させます。

しかし、import RaisedButton from 'material-ui/RaisedButton';を使用すると、上げボタンのindex.jsから上げボタンをインポートしています。これは上げボタンをエクスポートするだけです。したがって、webpackは、ボタンを起動しただけでバンドルされ、バンドルのサイズと時間が少なくなります。リアクトルータのドキュメントを読む