各frontendフレームワークでの読み込みファイルsizeの比較

github.com

前からGithubで調査していたsize比較のグラフができたので公開 （あとで全体の比較も追加する予定）

フロントエンド ポータルサイト

hyperappとpreactが圧倒的に低く、angular、nextが大きい感じでした。（angularがここまで大きいのは正直予想外だったので、もしかしたらimportの書き方ミスっているかも・・・）

ちなみに計測の仕方は以下の通り

読み込んでいるjsサイズの計測方法

frontend-example/report.sh at master · wheatandcat/frontend-example · GitHub

計測スクリプト

#!/bin/bas
MOCK_HOST=https://mock-server-yznxmkzmvo.now.sh
ROOT_DIR=hyperapp-examples
DIR=001-simple

rm -rf build/*
npm run build
rm -rf ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report
mkdir -p ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report
cp dist/report.html ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report

serve -s dist &
lighthouse http://localhost:5000 --output json --output-path ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report/report.json
kill $(jobs -p)
mkdir -p ../../portal/src/data/${ROOT_DIR}/${DIR}
cp ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report/report.json ../../portal/src/data/${ROOT_DIR}/${DIR}
open ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report

buildしたファイルを「serve -s dist」で立ち上げて、lighthouseで計測

www.npmjs.com

計測結果のjsonの中にnetworkから読みんだアイテム情報があるので、その情報をパースしてグラフ化しています。

あとで、全部のbundleファイルのanalyze情報も追加する予定。