Vite と Vue CLI の長所と短所

Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 10 ～ 100 倍高速な開発サーバーを備えています。

これは、Vue CLI が時代遅れであることを意味しますか? この記事では、2 つのビルド ツールを比較し、それぞれの長所と短所を説明します。これにより、次のプロジェクトにどちらが適しているかを判断できます。

Vue CLI の概要

ほとんどの Vue 開発者は、Vue CLI が標準のビルド ツールとベスト プラクティス構成を使用して Vue ベースのプロジェクトをすばやくセットアップするために不可欠なツールであることを知っています。

主な機能は次のとおりです。

• エンジニアリング足場
• ホットモジュールリロードを備えた開発サーバー
• プラグインシステム
• ユーザーインターフェース
  

この説明の目的上、Vue CLI は Webpack 上に構築されているため、開発サーバーおよびビルド機能とパフォーマンスは Webpack のスーパーセットになることに注意することが重要です。

Viteの概要

Vue CLI と同様に、Vite も基本的なプロジェクト スキャフォールディングと開発サーバーを提供するビルド ツールです。

ただし、Vite は Webpack に基づいているわけではなく、ブラウザのネイティブ ES モジュールを利用する独自の開発サーバーを備えています。このアーキテクチャにより、Vite は Webpack の開発サーバーよりも桁違いに高速になります。 Vite は Rollup を使用して構築されており、より高速です。

Vite はまだテスト段階です。Vite プロジェクトの目的は、Vue CLI のようなオールインワンツールになることではなく、高速な開発サーバーと基本的なビルドツールを提供することに重点を置いているようです。

Vite はなぜこんなに速いのでしょうか?

Vite 開発サーバーは Webpack よりも少なくとも 10 倍高速です。基本的なプロジェクトの場合、開発ビルド/リビルド時間の差は 2.5 秒に対して 250 ミリ秒です。

より大規模なプロジェクトでは、この違いはより顕著になります。 webpack 開発サーバーは、ビルド/リビルド時に 25 ～ 30 秒ほど遅くなることがあり、場合によってはそれよりも遅くなることもあります。同時に、Vite 開発サーバーは同じプロジェクトを一定 250 ミリ秒で処理している可能性があります。

これは明らかに開発体験に大きな変化をもたらす違いですが、Vite はこれをどのように実現するのでしょうか?

Webpack 開発サーバー アーキテクチャ

Webpack の動作は、アプリケーション内のすべての import と require を解析し、実行時にファイル (Sass、TypeScript、SFC など) を変換することで、アプリケーション全体を JavaScript ベースのバンドルに構築します。

これらはすべてサーバー側で行われ、依存関係の数と変更後のビルド/再構築にかかる時間の間にはほぼ直線関係があります。

Vite 開発サーバー アーキテクチャ

Vite にはアプリケーション サーバーはバンドルされていません。代わりに、ブラウザの JavaScript モジュール (比較的新しい機能である ES モジュールとも呼ばれます) に対するネイティブ サポートに依存します。

ブラウザは必要に応じて HTTP 経由で JS モジュールを要求し、実行時に処理します。 Vite 開発サーバーは、あらゆるファイル (Sass、TypeScript、SFC など) をオンデマンドで変換します。

このアーキテクチャは、アプリケーション全体をサーバー側でバンドルすることを回避し、ブラウザの効率的なモジュール処理を活用して、大幅に高速化された開発サーバーを提供します。

ヒント: Vite は、開発中でも必要なモジュールのみをロードするため、アプリケーションをコード分割してツリーシェイクすると高速になります。これは、コード分割がプロダクションバンドルにのみメリットをもたらす Webpack とは異なります。

Viteのデメリット

ご存知のとおり、Vite の主な特徴は、驚くほど高速な開発サーバーです。

この機能がなければ、Vue CLI と比較して追加機能がなく、いくつかの欠点があるため、おそらくこれ以上議論されることはないでしょう。

Vite は JavaScript モジュールを使用するため、依存関係でも JavaScript モジュールを使用するのが最適です。最新の JS パッケージのほとんどはこれを提供していますが、一部の古いパッケージでは CommonJS モジュールのみが提供される場合があります。

Vite は CommonJS を JavaScript モジュールに変換できますが、一部の特殊なケースでは変換できない場合があります。もちろん、JavaScript モジュールをサポートするブラウザも必要です。

Webpack/Vue CLI とは異なり、Vite は古いブラウザや Web コンポーネントなどを対象としたバンドルを作成できません。

また、Vue CLI とは異なり、開発サーバーおよびビルド ツールは異なるシステムであるため、本番環境と開発環境で動作に一貫性がなくなる可能性があります。

Vue CLI と Vite の概要

Viteの未来

上記の比較は Vite と Vue CLI の現在の状態に焦点を当てていますが、考慮すべき点がいくつかあります。

• ブラウザでの JavaScript モジュールのサポートが改善されるにつれて、Vite も改善されます。
• JS エコシステムが追いつくにつれて、より多くのパッケージが JavaScript モジュールをサポートするようになり、Vite が処理できないエッジケースの数が減ります。
• Vite はまだベータ版であり、機能は変更される可能性があります。
• Vue CLI は最終的に Vite と統合され、どちらか一方を使用する必要がなくなる可能性があります。
  

注目すべきは、ブラウザの JavaScript モジュールを活用する開発サーバー プロジェクトは Vite だけではないということです。さらに有名な Snowpack もあり、Vite の開発を圧迫する可能性もあります。時間が教えてくれる

以上がViteとVue CLIのメリットとデメリットの詳しい内容です。ViteとVue CLIの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。