せっかく複数のfrontend技術で同じサンプルができたので、数値の出るデータで色々と比較していきたよねー ということで、今回はbundleファイルのanalyzeについて記載していきます。
まず、bundleファイルのanalyzeを簡単に測るツールを紹介
source-map-explorer
これは簡単なツールで↓のように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の全体のサイズと中身のパッケージのサイズを表示してくれます
簡単ですが、複数ファイルには対応してなさそうなので辛いかも、ってことで次
webpack-bundle-analyzer
webpackのconfigに仕込む系ですが、今回はできるだけ最小コストで開発しているから、全部隠蔽され済みなんだよなーと思って調べたら、 いろいろとやり方が見つかったので記載
vue
vue-cliを使っているなら↓で出力できます
npm run build -- --report open dist/report.html
hyperapp (parcel)
parcelにもプラグインありました
npm install --save-dev parcel-plugin-bundle-visualiser npm run build open dist/report.html
nuxtjs
nuxtjsは標準の機能として入ってます
npm run build -- --analyze
まとめ
調べる意外とやれるなって気がしたので、 次は統計データを見やすく出力する方法と、継続的にデータを取る方法について調べていく予定
