Next.js 12 によるビルド高速化検証

こんにちは。次世代システム研究室のT.M です。

はじめに

Next.js Conf Octorber 2021 にて、Next.js 12 が発表されました。そこでは、Next.js 12 で様々な機能追加、性能改善がされることが発表されました。本稿では、その中のRust ベースのコンパイラであるSWC を利用したビルド高速化について検証をしました。

検証内容

SSG、SSR が存在し、画面数が100程度のアプリケーションを利用する。
検証環境は、Github actions を用いる。
検証方法は、プロダクションビルドに掛かる時間を計測し、ビルド結果として出力したものを採用する。5回の平均時間を結果とする。

検証結果

Next.js 11

比較対象として、アップグレード前のNext.js 11 の状態のビルドに掛かる時間を計測する。以下はその結果である。

142.02s

146.34s

145.75s

142.44s

158.40s

平均は146.99秒 であった。

Next.js 12

Next.js を12にアップグレードして、ビルドに掛かる時間を計測する。

アップグレード手順

yarn add react@latest react-dom@latest
yarn add next@12

以下はその結果である。

169.53s

212.32s

178.09s

200.05s

153.45s

平均は、182.69秒 であった。Github actions という環境でビルドをする、ということ、試行回数が5回ということを考えても、明らかにビルドに掛かる時間が増加している。この原因は、Babel の設定が存在したことにより、SWC を利用せずにBabel でビルドをしていたためである。Next.js 12 では、Babel の設定ファイルによりSWC を利用したビルドが自動でオプトアウトされる。そのため、ビルドの高速化がされなかった。

今回検証に利用したアプリケーションでは、.babelrc が存在した。.babelrc では、styled-jsx の設定が記述されていたが、プラグインなどは利用していなかった。そのため、.babelrc を削除するだけでSWC を利用するようになった。styled-jsx のプラグインや、他ライブラリを利用するなど、カスタムした.babelrc を利用していた場合、対応を待つ必要がある。ここで.babelrc の共有をしている。

以下は結果である。

96.98s

134.56s

110.16s

96.61s

128.70s

平均は、113.40秒 であった。Next.js 11より約30秒、約23%の高速化がなされている。Next.js 12 のBabel ビルドより約70秒、約38%の高速化がなされている。検証環境が必ずしも安定はしていないこと、試行回数が5回ということを考えても、明らかにビルドに掛かる時間が減少している。

まとめ

既存のアプリケーションをNext.js 12 にアップグレードをして、SWC を利用したビルドをすることで、約23%のビルド時間の高速化を確認することができた。この結果より、Next.js 12 にアップグレードをする価値は十分あると考えられる。

次世代システム研究室では、グループ全体のインテグレーションを支援してくれるアーキテクトを募集しています。インフラ設計、構築経験者の方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ募集職種一覧からご応募をお願いします。

皆さんのご応募をお待ちしています。