Angular nxにesbuildを適用する方法と速度比較

Nxにesbuildを適用 Uncategorized

今、参画してるプロジェクトがNxを使っていて、半年以上、開発をしていると、Nxの素晴らしさにほんと感激している。

affectedのお陰で、更新した箇所だけテストしてくれるところ、Nxのアーキテクチャ(libsに8割以上のコードを書く)など、一度使ったら、Nxじゃないプロジェクトには今後参画したくないとすら思ってしまう。

ただ、ビルドが遅い。ビルドもaffectedのおかげでだいぶ早いはずなのだが、プロジェクトが大きくなると、どうしてもビルドが遅いなと感じてしまう。

そこで、esbuildに着目してみた。Goで書かれてるので、劇的に早いようだ。

esbuild - An extremely fast bundler for the web

自分用の小さなAngular(Nx)プロジェクトがあるので、それにesbuildを入れてビルドがどのくらい早くなるのか試してみた。

esbuildの適用方法

下記を参考にインストールと設定ファイルの更新を行なった。

Nx-ng-esbuild NPM | npm.io
Check Nx-ng-esbuild 0.5.3 package - Last release 0.5.3 with MIT licence at our NPM packages aggregator and search engine.

インストール

設定ファイルの更新

設定ファルはこんな感じで更新された

速度比較

よし、これで準備は整ったので、速度比較だ。

ビルド

まず、通常のビルドは4秒。

次にesbuildは1秒。

アプリ起動

通常の起動は1.8秒(1877ms)。

次にesbuildの起動は0.1秒(105.966ms)。

結果

ビルドアプリ起動
通常4秒1877ms
esbuild1秒105.966ms
差分-3秒-1.7秒

今回試したAngularプロジェクトが小さいですが、それでも結構な差が開きましたね。

確かにesbuildは早いことが分かりました。恐らく、大きいプロジェクトだともっと大きな差が開くのではないでしょうか??

コメント

タイトルとURLをコピーしました