Browserify で含まれてるファイルのサイズを確認する

出力ファイルのサイズがデカすぎる。でもどのモジュールがデカいのかよくわからない。そういう時の確認方法です。

browserify の --list オプションで含まれているファイル名のリストを出力できるので、それを使います。

$ ./node_modules/.bin/browserify -t babelify --list src/index.js > deps.txt

もっとオシャレなプラグインとかあるかもしれませんが、特に何もインストールせずに Mac のターミナルで見てみます。

大きなファイル トップ 10

ファイル名からサイズを取得するのには stat を使います。%z は byte 単位のファイルサイズ、%N はファイル名です。

$ cat deps.txt | xargs stat -f "%z %N" | sort -nr | head
142469 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/linker/element.js
129640 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/di/injector.js
128361 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/compiler/template_parser.js
97656 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/change_detection/parser/parser.js
97584 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/compiler/view_compiler.js
89995 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/change_detection/differs/default_iterable_differ.js
84577 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/metadata/directives.js
82614 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/metadata.js
81478 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/compiler/html_lexer.js
78188 /Users/shuhei/work/js/babel-angular2-app/node_modules/angular2/src/core/change_detection/proto_change_detector.js

合計サイズ

ひとまず全部の合計。合計の仕方は http://stackoverflow.com/questions/450799/shell-command-to-sum-integers-one-per-line から。

$ cat deps.txt | xargs stat -f "%z" | awk '{x+=$0}END{print x}'
4621015

特定のディレクトリに含まれる/含まれないファイルの合計。grep または grep -v を使います。

$ cat deps.txt | grep '/angular2/' | xargs stat -f "%z" | awk '{x+=$0}END{print x}'
4584326
$ cat deps.txt | grep -v '/angular2/' | xargs stat -f "%z" | awk '{x+=$0}END{print x}'
36689