概要
- 自分のチームがメンテしているNuxtプロダクトの
nuxi devがなんか重たい - デバッグしてみたり、Viteのチューニング（？）とか色々試してみたけど、あんまり改善せず
-
.nuxtignoreに出会い試した見たところ激変した
結論
Build時に参照するファイルは適切に管理しような
前情報
- yarn@1.22.22
- vue@3.5.13
- nuxt@3.14.1592
- Firebaseを利用している
- Cloud Functionsのソースコードが同じリポジトリにいて、プロジェクトルートに
functionsディレクトリ配下へ配置している - 現在Functionの数は29個ある
- Cloud Functionsのソースコードが同じリポジトリにいて、プロジェクトルートに
- Dockerコンテナ上で起動している
やったこと
計測するためにデバッグする
DEBUG=nuxt:*
環境変数やNuxtを起動するコマンドとあわせてNuxtコマンドを実行するとデバッグログが表示される
[nuxt] modules:before: 0.118ms 8:27:13 AM
[nuxt] kit:compatibility: 3.696ms 8:27:13 AM
[nuxt] kit:compatibility: 4.05ms 8:27:13 AM
[nuxt] kit:compatibility: 4.131ms 8:27:13 AM
[nuxt] kit:compatibility: 4.153ms 8:27:13 AM
[nuxt] kit:compatibility: 4.243ms 8:27:13 AM
[nuxt] kit:compatibility: 4.325ms 8:27:13 AM
[nuxt] kit:compatibility: 4.382ms 8:27:13 AM
[nuxt] kit:compatibility: 4.474ms 8:27:13 AM
[nuxt] kit:compatibility: 4.692ms 8:27:13 AM
[nuxt] kit:compatibility: 4.722ms 8:27:13 AM
[nuxt] kit:compatibility: 4.819ms 8:27:13 AM
[nuxt] kit:compatibility: 0.026ms
# ...
[nitro] ✔ Nuxt Nitro server built in 1010 ms
[nuxt] build:done: 10.012s
[nitro] compiled: 1.136ms
ℹ Vite client warmed up in 1ms
⚙ > Nitro Start (12ms)
[nitro] dev:reload: 421.215ms
# ...
みたいなログが取れる。で、肝心のビルド時間は
✔ Vite client built in 29396ms
✔ Vite server built in 43002ms
[nuxt] build:done: 2:01.118 (m:ss.mmm)
重くね？ってなった
LLMにぶん投げる
考察をもらう（これが本当はよくないかも（ISUCONの反省。。。
もらった案は
- CSS フレームワークの遅延ロードするようにしたら
- viteのパラメータチューニングしたら
とか色々もらいましたが、試してもあんまり変わらず。。。
たまたまこういうエラーに出会った
Nuxt起動すると、コンテナのログにERROR [uncaughtException] ENFILE: file table overflow, scandir ... が大量にでるようになり、調べてみると、ファイル作りすぎ or 参照しすぎなのでは？ってなった
https://wa3.i-3-i.info/word14383.html
https://github.com/nuxt/nuxt/issues/29744
https://qiita.com/blueray777/items/ddc029c8f052a850d834
そしたら、そもそも functionsディレクトリ配下はビルドにいらないな。ということで、下記設定を試した。
functions/*
ビルドし直してみると、なんと激速なりました。わーい！
✔ Vite client built in 109ms
✔ Vite server built in 1157ms
[nuxt] build:done: 4.784s
なぜ遅くなるのか
もう少し調べたいですが、おそらくViteがルートディレクトリからスキャンすると思いますが、その配下にあるnode_modulesの中身もスキャンすると思っています。Cloud Functionsは関数それぞれにnode_modulesディレクトリがあるため、その分遅くなるんだと想定しています。
プロジェクトの初期、関数は数個しかなかったので、ちょっと重くなったなぐらいだった感覚が、1年過ぎた今や29個になったので、その分重くなったと想定しています。
雑感
- ViteやNuxtのビルドの仕組みをより知りたくなった
- Cloud Functions自体、別のリポジトリに切り出すことを検討してたところだったのでやろうかなと思いました
- Nuxtはいいぞ