esbuild-bundle-analyzerのGithubActionを導入した

[yonta]

fix #717

やったこと

• たつのさんのesbuild-bundle-analyzerを導入した
  • esbuildのbundleサイズをコメントで出してくれるすごいやつ
  • 急に増えるのを監視したり、bundle最適化の効果だったりがわかるぞい。
• 上記Action用にpackage.jsonにスクリプトを追加
  • esbuild時にmetafileを書き出すスクリプト
  • https://esbuild.github.io/api/#metafile

やってないこと

• esbuild v0.20系になるとCLIじゃなくてJSで書かないといけないかも？

[exoego]

sakazuki/package.json

Line 43 in 47f42fe

"build": "esbuild app/javascript/*.* --bundle --sourcemap --define:global=window --outdir=app/assets/builds",

• build スクリプトを esbuild CLI ではなく、API の方を使ったスクリプトに書き換える必要があります
• そのスクリプトの中で metafile を書き出す 必要があります

[github-actions]

📦 esbuild Bundle Analysis for sakazuki

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File	Out File	Size (raw)	Note
meta.json	app/assets/builds/application.js	1.01 MB	🆕 Added

Largest paths

These visualization shows top 20 largest paths in the bundle.

Meta file: meta.json, Out file: app/assets/builds/application.js

Path	Size
node_modules/chart.js/dist	${{\color{Goldenrod}{ ██████▊ }}}$ 27.4%, 273.88 KB
app/javascript/completion	${{\color{Goldenrod}{ ████▎ }}}$ 17.1%, 170.67 KB
node_modules/@hotwired/turbo	${{\color{Goldenrod}{ ███▎ }}}$ 13.2%, 131.96 KB
node_modules/bootstrap/dist	${{\color{Goldenrod}{ ███▏ }}}$ 12.5%, 124.34 KB
node_modules/simplelightbox/dist	${{\color{Goldenrod}{ ██▏ }}}$ 8.8%, 87.73 KB
node_modules/@hotwired/stimulus	${{\color{Goldenrod}{ ██ }}}$ 8.4%, 84.29 KB
node_modules/@popperjs/core	${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 55.66 KB
node_modules/@rails/actioncable	${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 19.51 KB
node_modules/rater-js/index.js	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 16.42 KB
node_modules/@kurkle/color	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 13.37 KB
app/javascript/taste_graph	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 7.56 KB
app/javascript/controllers	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 6.63 KB
node_modules/@hotwired/turbo-rails	${{\color{Goldenrod}{ }}}$ 0.4%, 3.82 KB
node_modules/ts-deepmerge/esm	${{\color{Goldenrod}{ }}}$ 0.2%, 1.69 KB
node_modules/just-zip-it/index.mjs	${{\color{Goldenrod}{ }}}$ 0.1%, 785 B
node_modules/chart.js/helpers	${{\color{Goldenrod}{ }}}$ 0.0%, 0 B
app/javascript/application.js	${{\color{Goldenrod}{ }}}$ 0.0%, 0 B

Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

• ‼️: Size increased by 20% or more. Special attention should be given to this.
• ⚠️: Size increased in acceptable range (lower than 20%).
• ✅: No change or even downsized.
• 🗑️: The out file is deleted: not found in base branch.
• 🆕: The out file is newly found: will be added to base branch.

[yonta]

情報助かる～～～。
metafile知らなかったので、いただいたドキュメント読んできます！

[yonta]

お、できたっぽい！

[yonta]

え、うちのJSが90B！？そんな馬鹿な

[yonta]

さすがに嘘だわ。手元のビルドだと983.8kbになる

[yonta]

--bundle忘れてた！

[yonta]

それっぽい結果になった。勝ったな！

[yonta]

chartjsは予想通り大きい。

completionが大量の蔵や銘柄の生データだから重いな。
なんとか圧縮するほうほうがあるとより幸せになりそう。

[momocus]

おもろそうだし雑approveしま