bundleファイルのanalyzeを測定方法

せっかく複数のfrontend技術で同じサンプルができたので、数値の出るデータで色々と比較していきたよねー ということで、今回はbundleファイルのanalyzeについて記載していきます。

まず、bundleファイルのanalyzeを簡単に測るツールを紹介

 

 source-map-explorer

github.com

これは簡単なツールで↓のようにbuildしたjsとjs.mapを指定して実行すると

source-map-explorer bundle.min.js bundle.min.js.map dist/js/app.2e7aac92.js dist/js/app.2e7aac92.js.map

こんな感じでjsの全体のサイズと中身のパッケージのサイズを表示してくれます

f:id:wheatandcat:20180830230843p:plain

簡単ですが、複数ファイルには対応してなさそうなので辛いかも、ってことで次

webpack-bundle-analyzer

www.npmjs.com

webpackのconfigに仕込む系ですが、今回はできるだけ最小コストで開発しているから、全部隠蔽され済みなんだよなーと思って調べたら、 いろいろとやり方が見つかったので記載

vue

vue-cliを使っているなら↓で出力できます

npm run build -- --report
open dist/report.html

f:id:wheatandcat:20180830233847p:plain

hyperapp (parcel)

parcelにもプラグインありました

www.npmjs.com

npm install --save-dev parcel-plugin-bundle-visualiser
npm run build
open dist/report.html

f:id:wheatandcat:20180830234436p:plain

nuxtjs

nuxtjsは標準の機能として入ってます

ja.nuxtjs.org

npm run build -- --analyze

f:id:wheatandcat:20180830234917p:plain

まとめ

調べる意外とやれるなって気がしたので、 次は統計データを見やすく出力する方法と、継続的にデータを取る方法について調べていく予定