🌳

Nuxt 2 のビルド高速化オプションの効果検証

2023/06/06に公開

環境

macOS: ventura 13.4
node: 16.19.1
nuxt: 2.16.3
node-sass: 8.0.0
sass: 1.62.1
sass-loader: 10.4.1

結果

Sassコンパイラ x (SSR or CSR) x ビルドオプションの組み合わせでのビルド速度の違い。

node-sass	dart-sass	SSR	hardSource	cache	parallel	1回目	2回目
	✅					1:27	1:24
	✅		✅			1:38	0:03
	✅			✅		1:27	1:18
	✅				✅	1:27	1:24
	✅		✅	✅	✅	1:33	0:03
	✅	✅				3:02	2:47
	✅	✅	✅			3:05	0:03
	✅	✅		✅		3:05	2:40
	✅	✅			✅	2:56	2:55
	✅	✅	✅	✅	✅	3:12	0:03
✅						0:33	0:25
✅		✅	✅	✅	✅	0:33	0:03

秒未満は切り上げ
SSRの場合は client と server の遅い方を記載しているが秒換算だとほぼ同じになる
SSR + hardSource の場合の2回目は client → server の順でビルドが走るため実際の時間は記載の約2倍になる
1回目は rm -rf node_modules/.cache; nuxt dev で2回目は nuxt dev を実行する

オプションなしで2回目が速くなる理由

1回目で node_modules/.cache/babel-loader が作成されるためと思われる。

hardSource の効果

圧倒的
- これが効いていると1回目にいくら時間がかかっても2回目は3秒で立ち上がる
しかし不安定
- nuxt build すると2回目でビルドに失敗する
- https://zenn.dev/naturalclar/articles/4d9a22d786f5cd7903f2 で紹介されている方法でパッチを当てても別のエラー Module not found: Error: Can't resolve xxx.vue が出るので仕方なく NODE_ENV が production の場合は hardSource を無効にした。もうわけがわからん
メンテナ不在
- 重要な PR が何年も放置されている
参照
- https://v2.nuxt.com/docs/configuration-glossary/configuration-build/#hardsource
- https://github.com/mzgoddard/hard-source-webpack-plugin

parallel の効果

なし
効果がないどころかトータルで見れば遅くなっている
- SPA → オプションの有無は速度に影響していない
- SSR → 1回目は6秒速くなっているものの、2回目は8秒遅くなっている
参照

cache の効果

ほぼなし
- SPA のとき単体で使えば2回目は若干速くはなっている
- SSR のときは逆に遅くなっている
参照

SSR の場合の初回は CSR の2倍以上時間がかかる

CSR → 1:27
SSR → 3:02
ターミナル上では並列でビルドしているように見える
しかし実際は順番にビルドしたのよりも遅い

dart-sass が遅い

dart-sass は node-sass の約6倍遅い
- node-sass → 0:33
- dart-sass → 3:02
かといって CSS の進化に追随できなくなった node-sass を使い続けるのは支障がある
- node-sass は arm64 に対応していないという噂もある
  - 実際は node-sass@9 を入れたら arm64 で入った
Nuxt 3 にするとこの問題は解決するんだろうか？

まとめ

development のとき hardSource だけを有効にするのがよさそう
node-sass から移行すべしとされている dart-sass が致命的に遅くて泣ける

関連記事

Discussion