久々に Vueのプロジェクトを作ろうとして Viteを使ってみました。
今までは vue-cliを使って Vueプロジェクトを用意したり、 Nuxt.jsを使ってプロジェクトを用意したりしていました。
Vite って具体的に何が良いの？
1. 高速な開発サーバー
Viteは開発サーバーの起動が非常に速く、HMR（ホットモジュールリプレースメント）を提供しています。これにより、コードの変更が即座にブラウザに反映されるため、開発の生産性が向上します。
2. ESMベースのアプローチ
ViteはESM（ESモジュール）を使用してモジュールをロードします。これにより、開発中のビルドプロセスが最小限に抑えられ、素早いフィードバックが得られます。
3. 高速なビルド
ViteはRollupを内部的に使用してビルドを行うため、最終的なプロダクションビルドも高速です。また、ビルド時の最適化も行うため、生成されるバンドルは効率的で軽量です。
4. モダンな機能サポート
Viteは最新のブラウザ機能を活用しており、コードスプリッティングや動的インポートなどのモダンなJavaScript機能をサポートしています。また、TypeScriptやCSSのプリプロセッサ（Sass、LESSなど）にも対応しています。
5. プラグインエコシステム
Viteはプラグインシステムを持っており、豊富なプラグインエコシステムが存在します。これにより、簡単に機能を拡張したり、特定のニーズに合わせてカスタマイズすることができます。
6. シンプルな設定
設定ファイルがシンプルで分かりやすく、初期設定が最小限で済みます。また、設定の拡張も容易です。
7. コミュニティとサポート
ViteはVue.jsの作者である尤雨溪（Evan You）によって開発されており、活発なコミュニティとサポートが存在します。これにより、問題が発生した際にも迅速に解決策を見つけやすいです。
結論
Viteは、特に開発速度とモダンな機能サポートに優れており、開発者の生産性を大幅に向上させます。これらの利点から、最近では多くのプロジェクトや企業がViteを採用しています。
Vite vs Webpack
1. 開発サーバーのアーキテクチャ
Vite:
ESMベースの開発サーバー: ViteはネイティブのESモジュール（ESM）を使用します。これにより、ブラウザが直接モジュールをインポートできるため、バンドルを必要とせず、即座に反映されます。 ホットモジュールリプレースメント（HMR）: 非常に高速で、変更を瞬時にブラウザに反映します。
Webpack:
バンドルベースの開発サーバー: Webpackはすべてのモジュールを一つのバンドルにまとめるため、変更があるたびにバンドルの再ビルドが必要です。 ホットモジュールリプレースメント（HMR）: HMRをサポートしていますが、バンドルの再ビルドが必要になるため、Viteに比べると遅くなることがあります。
2. ビルド速度
Vite:
開発中のビルド速度: 開発時にバンドルを行わないため、初期起動や変更の反映が非常に速いです。 プロダクションビルド: ViteはRollupを使用してプロダクションビルドを行い、高速で最適化されたバンドルを生成します。
Webpack:
開発中のビルド速度: モジュールをバンドルするため、初期起動や変更反映時に時間がかかることがあります。 プロダクションビルド: Webpackもプロダクションビルド時に高度な最適化を行いますが、大規模なプロジェクトではビルド時間が長くなることがあります。
3. 設定と使いやすさ
Vite:
設定ファイルのシンプルさ: デフォルトでシンプルな設定が提供されており、必要に応じて簡単にカスタマイズできます。 プラグインの容易な追加: Viteのプラグインシステムは簡単に使えるよう設計されています。
Webpack:
設定の複雑さ: 柔軟性が高い反面、設定ファイルが複雑になりがちで、初心者には敷居が高いです。 プラグインとローダー: 強力なプラグインとローダーのエコシステムがあり、さまざまなカスタマイズが可能ですが、設定が複雑になることがあります。
4. モジュールフォーマット
Vite:
ESモジュール: 開発時にはESモジュールをそのまま使用し、プロダクションビルド時にバンドルを行います。
Webpack:
CommonJSやその他のモジュール形式: さまざまなモジュール形式に対応していますが、すべてのモジュールを一つにバンドルします。
5. エコシステムとコミュニティ
Vite:
Vueエコシステム: Vue.jsの作者によって開発されており、Vueとの相性が非常に良いです。しかし、Reactや他のフレームワークにも対応しています。 新しいが成長中: Viteのコミュニティは比較的新しいですが、急速に成長しています。
Webpack:
成熟したエコシステム: 長い歴史があり、多くのプラグインとツールが存在します。 広範なサポート: ほとんどのフレームワークやライブラリに対応しています。
結論
Viteは開発速度と使いやすさに重点を置いて設計されており、特にモダンな開発環境に適しています。一方、Webpackは高度な柔軟性と幅広いカスタマイズ性を提供します。プロジェクトの規模や要件に応じて、どちらのツールが適しているかを選択すると良いでしょう。
Vite で Vue3 プロジェクトを作ってみる
知識の話はこの辺にしておいて、Vite のドキュメントを見ながら、プロジェクトを作ってみます。
$ npm create vite@latest > npx > create-vite ✔ Project name: … vite-project ✔ Select a framework: › Vue ✔ Select a variant: › TypeScript Scaffolding project in /tmp/a/vite-project... Done. Now run: cd vite-project npm install npm run dev
$ cd vite-project $ npm install $ npm run dev
Select a framework について
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
❯ Vue
React
Preact
Lit
Svelte
Solid
Qwik
OthersSelect a variant について
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
JavaScript
Customize with create-vue ↗
Nuxt ↗
