次世代フロントエンドツール「Vite」をNuxt.jsに導入してみた

こんにちは！

毎年、健康診断の前日は何かしらにぶら下がることで少しでも身長を伸ばそうとするまるやまです。

今回は次世代フロントエンドツールとして話題のViteをNuxt.jsに導入し、超高速なNuxt.js開発環境を実現してみました。

Viteとは？

viteとは、より速く無駄のない開発体験を提供することを目的としたフロントエンドビルドツールです。開発者はVue.js作者のEvan You氏です。

なぜ速いのか

従来型であるバンドルベースのビルドツールでは、アプリケーション全体をくまなくクロールし、依存関係を解決したうえでビルドを実行していました。一方ViteではesbuildとNative ESMを利用した事前バンドルというプロセスを実行することで、高速なサーバー起動を実現しています。

esbuildとNative ESMについて端的に説明すると、esbuildはGo言語によって開発されており、JavaScript製であるWebpackの10倍から100倍高速なバンドルツールです。またNative ESMはモジュールグラフの解決（import文から必要なファイルを読み込むこと）というバンドラ処理をブラウザ側で実行するために、この工程をサーバー起動から省略できるものになります。

※esbuildとNative ESMの詳しい説明については別途記事にする予定です。

従来型開発サーバー

Native ESM型開発サーバー

実際に試してみた

まずはNuxt.jsアプリにNuxt.js用のnpmパッケージであるnuxt-viteをインストールします。

$ yarn add --dev nuxt-vite

次にnuxt.config.jsのbuildModulesにnixt-viteを追記します。

// nuxt.config.js

buildModules: [
  'nuxt-vite'
],

基本的な導入はこれで完了ですので、サーバーを起動します。

$ yarn dev

問題なく起動できました。サーバー起動だけでなくホットリロードもかなり高速になっており、開発体験の著しい向上が期待できます。

Viteを導入した所感

これまで、Nuxt.jsプロジェクトが大きくなったときビルドに時間がかかることがよくあり、ビルドの最適化に開発コストを割かなければならないことも少なくありませんでした。この作業がプロダクトの品質に直結するものではないため毎回モヤモヤしていたのですが、Viteの登場によってより多くの工数をプロダクト本体の品質向上に充てられるようになるでしょう。

また、本番アプリへの導入も検討したのですがSass系のエラーなどいくつか問題があるため現時点での適用は見送りました。Nuxt3系ではViteが標準サポートされるようなので、それまで首を長くして待ちたいと思います。

最後に

KeepAliveでは技術研究部というインターナル活動があり、最新技術の研究や社内共有を実施しています。noteにも毎週、レポート記事が投稿されていますのでぜひご覧ください！

技術研究部についてはこちら！

参考

・Vite