Webアプリのパフォーマンス改善で不要なJavaScriptの除去を検討する
その際にwebpack-bundle-analyzerを使ったので導入メモ
導入すると以下のようにwebpackでバンドルしているファイルに占めるモジュールの割合が可視化される
導入は簡単で、webpack-bundle-analyzerをnpmインストールしたあと、クライアント側のwebpack.config.jsに以下を記載するだけ
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }
これでビルドすると自動的にサーバーが立ち上がり、可視化された上図のようなものがブラウザで表示された
これをみると、react-visが一番サイズが大きいことがわかる
react-visはグラフをつくるライブラリなのだが、大したことをやっていないので自作のグラフにすることでファイルサイズを削減することができた