序文

構築ツールの Vite は、現在 vue3 のみが Vite を使用できます。この記事が役に立ったら、ブロガーを 3 回サポートしてください。

1.Viteの紹介

Viteは、最新のブラウザー向けの軽量で高速なフロントエンドビルドツールであり、フロントエンドの開発エクスペリエンスを大幅に向上させることができます。Vite に加えて、よく知られているフロントエンド構築ツールには、Webpack と Gulp があります。現在、Vite は Vite2 をリリースしており、Vite の新しいプラグインアーキテクチャと滑らかな開発経験は、Vue3 と完全に組み合わせることができます。

1. ヴィートの組成

ネイティブ ES モジュールに基づくホットモジュールアップデート (HMR) などの豊富な組み込み機能を提供する開発サーバー。コードをロールアップにバンドルする一連のビルド手順で、本番用に最適化された静的アセットを出力するように事前構成されています。一般に、Vite はすぐに使える構成を提供することを望んでいますが、そのプラグイン API と JavaScript API は高度な拡張性をもたらします。ただし、Vue-cli 構成と比較して、Vite によってビルドされたプロジェクトには、開発者自身が処理する必要がある多くの構成がまだあります。

2. なぜ Vite を選ぶのですか?

時が経つにつれて、webpack、Rollup、Parcel などのツールが変更され、フロントエンド開発者の開発エクスペリエンスが大幅に向上しました。

しかし、ますます大規模なアプリケーションの構築を開始するにつれて、処理する JavaScript コードの量が指数関数的に増加しました。何千ものモジュールを含む大規模なプロジェクトはかなり一般的です。JavaScript に基づいて開発されたツールは、パフォーマンスのボトルネックにぶつかり始めます: 通常、開発サーバーの起動には長い時間 (数分!) がかかり、ホットモジュール交換 (HMR) を使用しても、ファイル変更の効果が現れるまでに数秒かかります.ブラウザ。このようなサイクルが延々と続き、フィードバックの遅さは開発者の開発効率や幸福度に大きく影響します。

Vite は、エコシステムの新しい開発を利用して上記の問題を解決することを目指しています。ブラウザーは ES モジュールをネイティブにサポートし始め、ますます多くの JavaScript ツールがコンパイル済み言語で記述されています。

2. Viteのメリットとデメリット

Vite の速度は主に、高速コールドスタートと高速ホットアップデートの 2 つの側面に反映されます。Vite がこれほど優れたパフォーマンスを実現できるのは、Vite がブラウザの ESM 仕様のサポートを利用し、Webpack とはまったく異なるアンバンドルメカニズムを採用しているためです。

クイックコールドスタート: Vite は静的ページのみでサーバーを起動し、すべてのプロジェクトファイルコードをパッケージ化するわけではありません. サーバーは、クライアントの要求に応じてさまざまなモジュールをロードし、オンデマンドのロードを実現します。プロジェクト全体を一度パッケージ化してから、dev-server を起動します.プロジェクトが大規模な場合、パッケージング時間は非常に長くなります.
パッケージングとコンパイル速度: vite は、本番環境にパッケージングする必要がある場合、パッケージングに従来のロールアップを使用するため、vite の利点が開発段階に反映されます.また、vite は ES Module を使用するため、vite を使用することはできません。コード CommonJs を使用します。
ホットモジュールアップデート: HRM ホットアップデートに関しては、モジュールの内容が変更された場合、webpack のようにモジュールのすべての依存関係を再コンパイルするのではなく、ブラウザにモジュールを再リクエストさせるだけです。

1.バイトアドバンテージ

-アンバンドルメカニズムのコア:
モジュール間の依存関係の分析はブラウザーによって実装され、
ファイルの変換は開発サーバーのミドルウェアによって実装され、キャッシュされます。
ソースファイルはマージおよびバンドルされません。

2.viteのデメリット

アンバンドルメカニズムにより、最初の画面期間と遅延読み込み中に次の追加作業を行う必要があります。、これは必然的にフォールド上のパフォーマンスの低下につながります。ただし、最初の画面のパフォーマンスの低下は、開発サーバーの起動後に初めてページが読み込まれたときにのみ発生します。後でページをリロードすると、最初の画面のパフォーマンスが大幅に向上します。その理由は、開発サーバーが以前に変換されたコンテンツをキャッシュするためです。

ソースファイルに対してマージおよびバンドル操作を実行しないでください。結果として、大量の http 要求が発生します。開発サーバーの操作中に、ソースファイルに対して解決、読み込み、変換、および解析操作を行います。ビルド前およびビルド前のセカンダリ操作も、ビルド前の最初の画面リクエストが完了するまで。

3. Vite を使用して Vue3 プロジェクトを作成する

1. vite プロジェクトを作成する

vite に基づいて vue 3.x エンジニアリングプロジェクトを作成するには、次のコマンドを実行します。

npm init vite-app プロジェクト名
CDプロジェクト名
npm インストール
npm 実行 dev

2. プロジェクトの構造

node_modules ディレクトリは、サードパーティの依存パッケージを保存するために使用されます

public はパブリックの静的リソースディレクトリです。

src は、プロジェクトのソースコードディレクトリです (プログラマーが作成したすべてのコードは、このディレクトリに配置する必要があります)。

.gitignore は Git の無視ファイルです

index.html は、SPA シングルページアプリケーションの唯一の HTML ページです。

package.json は、プロジェクトのパッケージ管理構成ファイルです。

assets ディレクトリは、プロジェクト内のすべての静的リソースファイル (css、フォントなど) を保存するために使用されます。

components ディレクトリは、プロジェクト内のすべてのカスタムコンポーネントを保存するために使用されます。

App.vue はプロジェクトのルートコンポーネントです。

index.css は、プロジェクトのグローバルスタイルシートファイルです。

main.js は、プロジェクト全体のパッケージ化されたエントリファイルです。

Viteの詳しい説明

目次

序文