Browserify を使ったプロジェクトでファイルサイズを大きくしているライブラリを探す

azuさんのQiitaの記事をなぞっただけなんですが、便利だったのでメモ。

きっかけ

Browserify でバンドルされるファイル(未圧縮)のサイズが気づいたらIMを超えていて、どのライブラリがボトルネックになっているのか調べることに(個人的にPCだと1M, SPだと300kを超えたらサイズを見直すようにしている)。

調べる手順

  • browserify の full-paths オプションを有効にしてビルドする。上の記事だとコマンドのオプションとして指定していますが、JS APIでも指定可能なので gulp や grunt plugin でも問題ない。
  • ビルドされたファイルを discify に食わせて、ブラウザで可視化された依存関係を眺めて、ボトルネックとなっているライブラリを探す。
    • cat bundle.js | discify —open

こんなかんじで可視化される(アニメーションでけっこう酔う) f:id:kitak:20161026123150p:plain

減らす

調べてみたら lodash がけっこうな割合を占めていたんですが、実際に使っている関数は片手で数えるぐらいだったのと、lodash は関数ごとにパッケージを分割してnpmに公開されているので( https://www.npmjs.com/browse/keyword/lodash-modularized )、lodash を丸ごと使わずに必要な関数のパッケージをインストールして使うことにしました(自分で書いちゃってもよさそうですが)。 これで約400k減らすことができました。

他にも core.js とか moment がけっこうな割合を占めているという印象。なんとかして減らせないかな。