目次
webpack プロジェクトと vite プロジェクトの起動時間の比較
注: ここで作成されるのは vue3+vite プロジェクトです
viteを使用する理由
webpackに比べてviteは起動が早いです。
webpackとviteの比較
分析手順
Vite は esbuild の事前構築された依存関係を使用します。これは Go で記述され、JavaScript で記述されたパッケージャーの事前構築された依存関係よりも高速です。
Webpack が起動すると、依存関係が分析され、コンパイルおよびパッケージ化され、最後にレンダリングのためにローカル サーバーに渡されます。したがって、プロジェクトに含まれるモジュールが多いほど、依存関係も多くなり、起動が遅くなります。
ホット モジュール アップデート (HMR) を使用した場合でも、モジュールの数が増えると、パッケージ化されたファイル バンドルのサイズが増加し、応答速度が遅くなります。
Vite を起動すると、最初に開発サーバーが起動し、モジュールが要求されると、それらも動的にコンパイルされ、オンデマンドで表示されます。
最新のブラウザは ES モジュールをネイティブにサポートしているため、依存するモジュールに自動的にリクエストを作成します。
したがって、Vite は開発環境のモジュール ファイルを webpack のようにパッケージ化してローカル サーバーに渡すのではなく、ブラウザの実行ファイルとして使用します。
要約すると、Vite は起動時にファイルをバンドル ファイルにパッケージ化する必要があるため、モジュール間の依存関係を分析する必要はなく、必要な場合にのみ特定のモジュールのコンテンツをコンパイルする必要があります。
モジュールを変更する場合、webpackのようにモジュールと依存モジュールを一度コンパイルする必要がないため、ホットアップデートの効率が高くなります。
公式サイトのWebpackとviteの起動フローチャート
ウェブパック:
素早く：
webpack プロジェクトと vite プロジェクトの起動時間の比較
プロジェクトの作成
段階的に作成する
1. npm create vite@latest コマンドを使用します。
2、続けてもよろしいですか？(y)
3. プロジェクト名を入力します ? プロジェクト名: » vite-project
4. フレームを選択する
5. 言語を選択します
プロセス全体のスクリーンショット:
追加のコマンドラインを使用して直接作成する
次のように、追加のコマンド ライン オプションを使用して、使用するプロジェクト名とテンプレートを直接指定します。
npm 6.x バージョンのコマンド:
npm create vite@latest my-vue-app --template vue
npm はバージョン 7 以降のコマンドです。
npm create vite@latest my-vue-app -- --template vue
実行プロセスは次のとおりです。
vscodeを使用してプロジェクトを開始する
注: プロジェクトを初めて実行する前に Vite をインストールする必要があります。インストールしないとエラーが報告されます。
npm install コマンドを実行した後、プロジェクトを再起動します。
起動後のインターフェース:
公式サイトリンク
さらに詳しく知りたい場合は、公式ウェブサイトを確認してください。
vue3公式サイト： https: //cn.vuejs.org/
vite公式サイト： https: //vitejs.cn/