Next.js製アプリケーションのコンパイルを約100倍高速化した話

Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 next@12.2.4 tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev

[yarumato]

“コンパイルに99秒かかっている。コンパイルを遅くさせている原因を特定するため処理時間をツリー構造で表示。tailwindcssのJITが正しく機能していないことが原因と判明。コンパイルが0.9秒に。”

[gabill]

インタープリターをJIT化するのはよくあるけど、もともと事前コンパイルするものをJIT化するって珍しい。

[razokulover]

traceの仕方こうやるのか

[circled]

tailwindcssが悪いみたいに思われそうだがJITを褒めてるし「これはユーティリティ系のコンポーネント群をライブラリ化してNextのディレクトリ外に切り出していたことに起因したものでした」ってところが根本原因かな？

[maruware]

trace便利そう

[Nyoho]

“.next/traceを解析して、原因を特定する”

[Keisuke69]

知見だ。.next/traceもtrace-to-tree.mjsも知らなかった

[efcl]

Next.jsのビルド速度の問題を`.next/trace`のトレースデータを見て分析する方法について

[ledsun]

“tailwindcssのJITは効果大だったので、メジャーを上げる価値が。今回のようにバージョン3を採用していてもJITが有効化されていないケースがあるかもしれません、.next/traceファイルを用いて一度確認し”

[mizdra]

便利