Parcel vs Vite: ゼロ設定 vs 開発サーバー型バンドラー
高速なネイティブ ESM 開発サーバーと大きなプラグインエコシステム (React/Vue/Svelte アプリに最適) が欲しいなら Vite を選び、自動変換と最小限のセットアップによる真のゼロ設定バンドリングが欲しいなら Parcel を選びましょう。
Parcel と Vite はどちらも設定を減らすことを目指したモダンな Web build ツールです。Parcel はゼロ設定を重視し、ファイルタイプから変換を推論して「そのまま build」します。Vite は、開発時にネイティブ ES モジュールを使い本番 build には Rollup (依存には esbuild) を使う高速な開発体験を重視し、豊富なプラグインエコシステムとフレームワークテンプレートを備えます。
| Parcel | Vite | |
|---|---|---|
| 設定 | デフォルトでゼロ設定 | 小さな vite.config.ts、プラグイン駆動 |
| 開発モデル | バンドル型の開発サーバー | ネイティブ ESM 開発サーバー (非常に高速な HMR) |
| 本番 build | Parcel バンドラー | Rollup (依存には esbuild) |
| エコシステム | 小さめのプラグインセット | 大きなプラグイン + フレームワークのエコシステム |
| 最適な用途 | 素早いアプリ、最小限のセットアップ | フレームワークアプリ、大きな開発エコシステム |
| キャッシュ | 組み込みの永続キャッシュ | 依存の事前バンドルキャッシュ |
それぞれが本当に優れている点
Parcel は、エントリファイルにツールを向けるだけで設定なしに動作する build が得られ、多くのアセットタイプの自動処理も含まれる点で優れます。Vite は開発サーバーの速度 (ネイティブ ESM によりほぼ即時の起動と HMR) とエコシステムで優れます。React、Vue、Svelte などの一級のテンプレートとプラグインがあり、多くのフレームワークがこれを基盤にする理由です。
CI では
どちらも一度 build して deploy できる静的アセットを生成します。Vite の本番 build は Rollup を通り高速です。依存の事前バンドルと node_modules をキャッシュして CI を素早く保ちましょう。Parcel は永続キャッシュを保持し、runner で復元されると再 build を高速化します。いずれにせよ、deploy 時に build するのではなく、CI で build して出力を artifact として公開しましょう。
正直な注意点
Parcel のゼロ設定は便利ですが、きめ細かい制御は少なく、プラグインコミュニティは Vite より小さいです。Vite は自明でないセットアップには (小さな) 設定が必要で、歴史的には開発 (ネイティブ ESM) と本番 (Rollup) の経路が十分に異なり時折驚かせることがありましたが、今ではよく理解されています。
結論
開発サーバーの速度と大きなフレームワーク/プラグインエコシステムが重要なアプリ開発には Vite を選びましょう。エコシステムの幅よりも真のゼロ設定と素早い立ち上げを重視するなら Parcel を選びましょう。