概要

自分のチームがメンテしているNuxtプロダクトの nuxi dev がなんか重たい
デバッグしてみたり、Viteのチューニング（？）とか色々試してみたけど、あんまり改善せず
.nuxtignoreに出会い試した見たところ激変した

結論

Build時に参照するファイルは適切に管理しような

前情報

yarn@1.22.22
vue@3.5.13
nuxt@3.14.1592
Firebaseを利用している
- Cloud Functionsのソースコードが同じリポジトリにいて、プロジェクトルートにfunctionsディレクトリ配下へ配置している
- 現在Functionの数は29個ある
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ディレクトリ配下はビルドにいらないな。ということで、下記設定を試した。

.nuxtignore

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はいいぞ