Webpackバンドルを占めるサイズがでかい奴を探す方法

はじめに

Webpackでビルドしてできあがったバンドルが、気付いたらサイズが超でかいよ！！ なんて時の犯人探しに役立つかもしれないTips。

webpack --display-modules で分析

webpackコマンドの実行時に--display-modulesオプションを付けると、インクルードしたnode_modulesやbower_components配下のモジュールについても詳細情報がわらわらと出力されるようになる。ここにサイズも出力されている。

$ webpack --display-modules
Hash: 20265560bd210ea64e82
Version: webpack 1.12.12
Time: 7110ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.76 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
   [1] ./~/react/react.js 56 bytes {0} [built]
   [2] ./~/babel-runtime/helpers/interop-require-default.js 148 bytes {0} [built]
   [3] ./~/core-js/modules/$.export.js 1.5 kB {0} [built]
   [4] ./~/process/browser.js 2.06 kB {0} [built]
   [5] ./~/babel-runtime/helpers/extends.js 428 bytes {0} [built]
   [6] ./~/classnames/index.js 1.1 kB {0} [built]
   [7] ./~/fbjs/lib/invariant.js 1.51 kB {0} [built]
   [8] ./~/react-bootstrap/lib/utils/bootstrapUtils.js 4.86 kB {0} [built]
   [9] ./~/core-js/modules/$.js 417 bytes {0} [built]
  [10] ./~/babel-runtime/helpers/class-call-check.js 211 bytes {0} [built]
  [11] ./~/babel-runtime/helpers/inherits.js 780 bytes {0} [built]
  [12] ./~/react/lib/Object.assign.js 1.26 kB {0} [built]
  [13] ./~/fbjs/lib/warning.js 1.77 kB {0} [built]
  [14] ./~/babel-runtime/helpers/object-without-properties.js 283 bytes {0} [built]
・・・

ただし、Babelとか使うだけで大量に出力されるので正直これを見るのは辛い。また、.js単位で出力されるので結局のところ使っているどのライブラリが犯人なのかぱっと見て分からないというのもある。

そこで webpack-bundle-size-analyzerですよ

webpackコマンドの引数に--jsonを付けると、より詳細な情報がjsonで出力される。

        {
          "id": 22,
          "identifier": "d:\\work\\sample\\node_modules\\react\\lib\\ReactMount.js",
          "name": "./~/react/lib/ReactMount.js",
          "index": 28,
          "index2": 63,
          "size": 36774,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],

これをいい感じに読みこんでサマってくるツールがwebpack-bundle-size-analyzer。

使い方

まずはインストール

npm install -g webpack-bundle-size-analyzer

後は先ほどのJSONを食わせるだけ。パイプで繋げば一発で実行できる。ただし、webpackの処理で独自に標準出力しているとコケるので注意(webpack.config.jsでconsole.log呼んでいるなどで)。

webpack --json | webpack-bundle-size-analyzer

出力例

React.jsを使っている手元のアプリを分析してみた結果です。ライブラリごとにまとめて、占める割合が多い順にサマって出してくれるので分かりやすい。

$ webpack --json | analyze-bundle-size
react: 590.99 KB (22.7%)
  <self>: 590.99 KB (100%)
nvd3: 556.24 KB (21.4%)
  <self>: 556.24 KB (100%)
lodash: 449.4 KB (17.3%)
  <self>: 449.4 KB (100%)
d3: 328.77 KB (12.6%)
  <self>: 328.77 KB (100%)
react-bootstrap: 275.43 KB (10.6%)
  <self>: 275.43 KB (100%)
core-js: 125.89 KB (4.84%)
  <self>: 125.89 KB (100%)
lodash-compat: 67.98 KB (2.62%)
  <self>: 67.98 KB (100%)
react-overlays: 64.77 KB (2.49%)
  react-prop-types: 2.94 KB (4.53%)
    <self>: 2.94 KB (100%)
・・・