Skip to content
Latchkey

Vite vs Create React App: より高速なReactビルド

ViteはesbuildとRollupを使うモダンで高速なビルドツール。Create React Appは、現在はメンテナンスされていないWebpackベースのレガシーなscaffolderです。

ViteはネイティブESMとesbuildにより即座の開発起動を提供し、本番ビルドにはRollup、そして豊富なプラグインエコシステムを備えます。Create React Appは長年のReactデフォルトscaffolderでWebpack上に構築されていましたが、事実上非推奨で遅いです。新しいReactアプリは圧倒的にViteで始まります。

ViteCreate React App
開発起動即座 (ネイティブESM)遅い (先にbundle)
BuildRollup / esbuildWebpack
メンテナンス活発事実上非推奨
設定柔軟、plugins隠蔽 / eject
最適な用途新しいReactアプリレガシープロジェクトのみ

CIでは

Viteのビルドはより高速で、より小さくモダンな出力を生成し、依存関係のcacheも素直です。CRAのビルドは遅く、ツールチェーンはもはやメンテナンスされていません。新規プロジェクトでは、ViteがCIと開発の明確な選択肢です。CRAからの移行が推奨されます。

高速化する

node_modulesとViteのbuild cacheを実行間でcacheします。両方ともCI runner上でビルドされます。高速なmanaged runnerは本番bundleのステップを短縮します。

結論

新しいReactプロジェクトにはViteを使いましょう - より高速で、モダンで、活発にメンテナンスされています。Create React Appは、まだ移行していない既存アプリにのみ意味があります。その移行を計画しましょう。

関連ガイド