ネット上でViteというフロントエンド開発ツールが爆速だと噂されているので、試してみました。
ViteはVue.jsの作者であるEvan You氏が作ったフロントエンド用開発ツールですが、Vueだけでなく、ReactやSvelteなど多数のフロントエンド・ライブラリー／フレームワークに対応した開発ツールです。
イタリア語のViteにはブドウという意味もあります
使い方
使い方ですが公式ページの手順には
npm create vite@latestと書かれていますが、この場合プロジェクトのパスやライブラリーをインタラクティブに入力・選択するようになるので、React+TypeScriptのプロジェクトを作成するには以下のようします。
npm create vite@latest PROJECT_PATH -- --template react-tsところで、npm createなんてnpmコマンドあったけ？ と思い調べてみましたがnpm initのエイリアスのようで以下と同等です。
npm init vite@latest PROJECT_PATH -- --template react-tsまた、npxコマンドで使うには以下のようにします。
npx create-vite PROJECT_PATH --template react-ts計測結果
Facebook純正のReact開発ツールCreate React AppとViteの開発モードでのビルド時間を測定してみました。Create React Appは内部ではwebpackを使っているので、今回の比較ではwebpack vs Viteになります。
テスト対象のアプリはVue3に入門してみた（TypeScriptを使ったReactとVue3の比較）で使ったシンプルなジャンケンを行うアプリと、そのUIをMUI(Material-UI)にしたアプリで計測してみました。
webpack, Vite両ツールともに2回目以降は初回で作成したキャッシュファイル（webpackは node_modules/.cache/、 Viteはnode_modules/.vite/）を使うので別に測定しました。
また、ビルド時間（開発サーバー用ビルド時間）は毎回変わるので3回の平均値にしました。
測定したのはiMac (Retina 4K, 21.5-inch, 2019) MacOS Big Sur、node.jsはv16.13.0です。
| アプリ | Tool | 初回ビルド時間 | 2回目以降ビルド時間 |
|---|---|---|---|
| シンプル | webpack | 4.1秒 | 1.1秒 |
| シンプル | vite | 0.3秒 | 0.2秒 |
| Material-UI | webpack | 9.3秒 | 1.6秒 |
| Material-UI | vite | 1.1秒 | 0.2秒 |
Viteはwebpackに比べ爆速です！ 2回目以降はアプリの大きさによらず0.2秒でした、初回も10倍程度高速でした🤩
なぜ早いのか
Viteは、webpackをはじめParcel, Rollupなどツールとは大きく違うところがあります。それはJavaScriptの歴史にも関連します。
昔々
JavaScriptはブラウザー上で動く小さな言語として生まれました。したがって大規模なソフトウェアを書くのには必要なモジュールシステムなどはありませんでした。その時代ライブラリー制作者は即時関数(Immediately Invoked Function Expression)等を使いグローバルな名前空間での関数名等の衝突を防いでいました。
CommonJS
時代が進み汎用のJavaScript処理系としてのNode.jsが登場し、サーバーサイドやツールとして利用されるようになりました。そしてNode.jsにはモジュールシステムがありました。
そのモジュール（パッケージ）の管理システムnpmには多数のライブラリー（パッケージ）が登録されるようになりました。
しかし、その時点でもブラウザー用のJavaScript(ES5)にはモジュールはありませんでしたが、Node.jsのモジュールと同じコードで扱えるCommonJS仕様が決まり、ブラウザー用JavaScriptでCommonJS形式のモジュールを扱うためのツールBrowserifyやwebpackなどの開発ツールが生まれました。
Browserifyやwebpack
Browserifyやwebpackは、プロジェクトで必要な全てのCommonJS形式のJavaScriptファイルを読み込み、ブラウザーで実行出来るモジュールを使っていないJavaScript(ES5)に変換した単一ファイルを作成します。
かなり強引なやり方ですが、これで人類はモダンなJavaScript開発環境を手に入れました。ただし全てのコードを読み込み変換するので、ビルドに時間がかかるようになりました。
ES6(ES2015)
2015年にリリースされたES6(正確にはES2015)はJavaScriptの言語仕様に多数の追加が行われました。そしてimport/export等のES6モジュール機能が追加されました。
Chromeなどのモダンなブラウザーはいち早くES6をサポートしましたが、スマフォ版のブラウザーではES6サポートは少しおくれました。さらにIEではごく一部しかサポートされました。
そこでwebpackはES6モジュール形式(import/export)で書いたコードもCommonJS形式と同様に扱えるようになりました。
さらばIE11
ES6でJavaScriptにモジュールが追加されたのですが、以前はシェアの高かったIEがサポートしてない事でES6モジュールは使われないままでした🥺
しかし、IE11も2022年6月15日をもって廃止が決まりました。 → Death-to-IE11.com
これからはES6が堂々と使えます！
ViteはES6モジュール
長々と書きましたがViteはES6モジュールを使っています。webpcakのように全てのソースコードを読み込んで変換する処理などは行っていないので爆速なのです !!
ただし、npm run buildでリリース用ビルドを行うとwebpack同様の変換を行ってくれるので安心ですね。😊
