Nuxt3 × prisma で重いアプリを作り、VRTとlighthouseで計測できる環境を作ったった
出来たもの
遊び方
ローカルにbuildした差分との比較や、
herokuにデプロイしている差分との比較を行い、差分がないものに関して、
lighthouse準拠のスコアを表示するので、
スコアを上げて共有しましょう
（ローカルにあるベンチマーカーを扱うので、公的？なスコアにならないのは残念ですが、
その代わりデータ量を増やしてみたりすることができます）
経緯
こやつが楽しすぎた...
みなさんもぜひ遊びましょう。
またこれらはNext.jsで作られていましたが、
少し下火なNuxtを盛り上げたい気持ちがありましたので、
Nuxt3の勉強がてら組んでみました。体感Next.jsとVue3のいいところどりの印象を受けましたので、
Next一択の人にも遊んでもらいたいです。
また未熟な僕が意識して置いたボトルネックがいくつかありますが、
Nuxt/Nextを使いこなしてる皆さんに僕が気づいていないボトルネックを見つけ解決し、共有してくださったらなぁという気持ちです :)
参考にした記事等（覚えている範囲で）
ボトルネック案参考:
言わずもがな、意識しないようにしても意識しちゃってた気はします。
VRT+lighthouse構成:
後書き
機能モリモリではなく、
わかりやすいボトルネックをわかりやすいアプリを作り搭載することを意識して
作りましたので、自然に開発しててここまで酷くなることあるか...?というような箇所が
何個か（何個も）あります。
新卒１年目をこなしながら、
慣れないながら一週間ほどで作れましたので、
次作る場合は、実際の開発でありそうなボトルネックを複数入れながら、
アプリ自体も実用性が少しでもありそうなものにしたいです。
またlighthouseの機能自体もここ最近で増えましたので、これらのメトリクスもスコアに組み込みんでみたいです
特にTimespanは、ユーザシナリオを想定すれば、
実用的なメトリクスになりそうです。
Discussion