【Web Performance】webpack-bundle-analyzerで可視化する

Webアプリのパフォーマンス改善で不要なJavaScriptの除去を検討する

その際にwebpack-bundle-analyzerを使ったので導入メモ

github.com

導入すると以下のようにwebpackでバンドルしているファイルに占めるモジュールの割合が可視化される

導入は簡単で、webpack-bundle-analyzerをnpmインストールしたあと、クライアント側のwebpack.config.jsに以下を記載するだけ

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

これでビルドすると自動的にサーバーが立ち上がり、可視化された上図のようなものがブラウザで表示された

これをみると、react-visが一番サイズが大きいことがわかる

react-visはグラフをつくるライブラリなのだが、大したことをやっていないので自作のグラフにすることでファイルサイズを削減することができた

uber.github.io