#tech
Nuxt3
2024/2/23
追記
- https://qiita.com/miyaoka/items/5183c143e195455ae65e#vueconf-usでのさまざまな発表
- このような記事があったので、残しておく
改善前
画像撮り忘れた
パフォーマンスが70ぐらいだった
それ以外はだいたい同じ
改善後
- いい改善ってことだ！
- 確かに初回レンダリングははやいなっていうのは感じる
rafurtabiをチューニングしている
- 初回のレンダリングが完了するまでに7.4s
- これは遅い
npm run buildでファイルサイズを計測するのも良さそう
- mapboxは一覧みるときに読み込まれるようにするか、そうしないと今のところmapboxが必要じゃないところでも読み込まれて、全体的に遅いアプリケーションになっている気がするので
Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunksdynmic importをしろって言われている
entry時に読み込まれるモジュールの大きさを減らす
entryのcssとentryのjsを小さくするのが良さそうだな
- じゃこれは何が該当するのかを調べていく
- これが良くなさそう
何もなかったらssr: falseは明示的に指定しない方がいい
- Nuxt側でuniversalレンダリングをしてくれるらしいから、それはCSRとSSRのいいところどり
- https://nuxt.com/docs/guide/concepts/rendering
- 詳細の技術説明はこちら
Nuxtのテクニック
- pluginsよりcomposablesにロジックを寄せる方がいいらしい
- https://uyamazak.hatenablog.com/entry/2023/04/24/095707
- pluginsだとentry時に読み込まれるため、初回がレンダリングのとき重くなる
HTML部分の改善
- v-ifしかないタグはtemplateにして、DOMの描画回数を減らす