前から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で計測
計測結果のjsonの中にnetworkから読みんだアイテム情報があるので、その情報をパースしてグラフ化しています。
あとで、全部のbundleファイルのanalyze情報も追加する予定。