使用Browserify检查包含的文件大小

输出文件太大了，但是不太清楚哪个模块是最大的。这是一种确认的方法。

由于浏览器ify的–list选项可以输出包含的文件名列表，因此我们可以使用它。

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

可能有更多时尚的插件，但我将在 Mac 终端中查看，不需要特别安装任何东西。

十个最大的文件

使用stat函数可以从文件名中获取文件大小。%z表示以字节为单位的文件大小，%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