🚀
Next.jsでビルドにswcを使う(2021/8/18版)
Next.jsの11.1系統からswc導入のアナウンス
Next.jsの11.1系統からビルドにswcを導入するというアナウンスがありました
このswcはネイティブアプリケーションなので、JavaScript製のビルドツールより高速に動作します
ところが開発途上のものだけあって、実際にどうやって使うのかはアナウンス上に何も書かれていません
ネット界隈でもアナウンスをそのまま垂れ流すだけで、実際に試してみる人がさっぱり見つかりませんでした
ということで、実際に使ってみたいと思います
Next.jsのインストール
yarn add next@11.1.1-canary.7
- next@11.1.0
swcのバイナリが入っていないため動きません - next@11.1.1-canary.6
swcLoaderが動作するようになりましたが、swcMinifyがコケます - next@11.1.1-canary.7
buildでは問題なく動作するものの、swcLoader使用時にdevでエラーを起こします - next@11.1.1-canary.8
devが正常に戻ったものの、再びbuildでswcMinifyがコケるようになりました - next@11.1.1-canary.9
buildでswcMinifyがコケます - next@11.1.1-canary.10
buildでswcMinifyがコケます
Next.jsの設定
- next.config.js
/**
* @type { import("next").NextConfig}
*/
const config = {
experimental: {
swcLoader: true,
swcMinify: true,
cpus: 4,
},
};
module.exports = config;
@typeを入れておくと、開発環境上で設定項目の確認が出来るので便利です
ビルド
yarn next build
所感
手持ちのコードをビルド(next@11.1.1-canary.7)してみた結果(キャッシュの効果を消すため毎回.nextを削除)
| 設定 | ビルド時間 |
|---|---|
| 無指定 | 10.44s |
| swcLoader | 8.34s |
| swcMinify | 9.38s |
| swcLoader + swcMinify | 7.11s |
| swcLoader + swcMinify + cpus | 6.54s |
ビルド全体の管理は変わらずWebpackが行っており、今回置き換わるのはswcLoaderでBabel、swcMinifyでTerserの部分になります
この置き換えだけで30%の速度向上しており、cpusで並列実行を指定すると40%近くビルド時間が短縮されます。cpusは今回のリリースとは関係ないと言えばないのですが、設定することでより効果が大きくなります。
まだ開発途上のこの機能ですが、今後、さらに高速化していくことが期待されます。どこまで早くなるのか楽しみです。
Discussion