react-loadableを使ってbundleをchunkとして分けていきました。
ここまではいいのですが、今度はchunkしたbundleファイルの中にある
「重たいライブラリまたはファイル」を見つけ出して適切にchunkする必要があります。
そこで、中が見たいと思ったときのためにwebpack-bundle-analyzerというライブラリが
用意されています。
何が出来るかと言うと、下の図のようにどのライブラリがbundleファイル内で
多く占めているかを視覚で見ることができ、闇雲にchunkしなくとも
適切にファイルを分けることができるようになります。
このスクショでは。javascript.bundle.jsファイルではmaterial-ui/index.js
ファイルが多く占めているのがわかります。
もし初期ロードが重いもしくはずっとフリーズすると感じた場合は、これを使ってchunkしていないjsページが
javascript.bundle.jsの中にあるかどうか確認->あればDynamicImportでchunk
を繰り返していけばいい感じにファイル容量を減らすことができるようになります。
※webpack-bundle-analyzerをインストールしたらエラーが出た時
例：npm install –save-dev webpack-bundle-analyzer後にwebpackコマンドを入力すると
Module build failed: ReferenceError: Unknown plugin “syntax-dynamic-import”
原因：syntax-dynamic-importが上書きされた（webpackのバージョン
が3だと起きる）
解決法：npm install –save-dev babel-plugin-syntax-dynamic-importをインストール
react-loadableを使っている場合はそちらも上書きされているので
同じようにnpm i react-loadableでインストール。
再度npm run devでエラーが無ければ解決。
