62
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-01-28

はじめに

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

webpack --display-modules で分析

webpackコマンドの実行時に--display-modulesオプションを付けると、インクルードしたnode_modulesbower_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%)
・・・
62
47
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?