【webpack】webpack-bundle-analyzerを使ってbundleファイルを解析する

asaba 著者:asaba

【webpack】webpack-bundle-analyzerを使ってbundleファイルを解析する

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をインストールしたらエラーが出た時

例: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でエラーが無ければ解決。

 

 

 

  • この記事いいね! (0)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。