Viteの新しい体験の詳細な説明

Vite とは何ですか? (フロントエンドの新しいおもちゃです)

Vite は、ネイティブ ES モジュールのインポートを通じて開発プロセス中にコードを更新し、迅速な更新を実現する Web 開発および構築ツールです。

特徴

• 超高速コールドサーバーブート
• 即時モジュール更新
• 真のオンデマンドコンパイル
• より小さなパッケージサイズ

始める

Vue ユーザーへの注意: Vite は現在、Vue 3.x でのみ動作します。これは、Vue 3 とまだ互換性のないライブラリを使用できないことも意味します。

インストール

npm init vite-app <プロジェクト名> 
cd <プロジェクト名> 
npmインストール 
npm 実行 dev
## 上記のコマンドを実行すると、vue3.0プロジェクトがviteを使用していることを意味します

経験の面で、vite と webpack の違いは何ですか?

Vite についての私の現在の感想は、一言で言えば「速い」です。

• デバッグ サービスを初めて起動する場合、webpack の 2 倍の速度になります。
• 梱包速度も2倍以上速くなります。
• パッケージ化されたファイルのサイズは、元の webpack ファイルの半分以下になります。

Viteはどのように機能しますか?

著者の言葉を借りれば、.vueファイルを直接リクエストし、ブラウザに解析させるということです。

ブラウザの最新バージョンでは、import キーワードと export キーワードの直接使用がサポートされています。つまり、ブラウザはモジュール機能をネイティブにサポートし始めており、これは Vite で使用される機能の 1 つでもあります。

「そんなに言った後、バッグを持って見てみたらどうですか？」

もちろん！ここではHelloWorld.vueファイルのみを変更しました

その後、App.vue ファイルを再度修正しました(タイムスタンプが異なっていても気にしないでください。誤って削除してしまい、最初からやり直すのが面倒だっただけです)

この時点で、オンデマンド読み込みを実装するWebpackのコード分割方式と比較して、Viteは確かにはるかに高速な体験を提供してくれました。

やっと

Vite は非常に優れていますが、現在の RC 1 バージョンは Vue3.x にのみ適しており、Vue3 と互換性のないライブラリは使用できません。 (あらゆる面でwebpackよりも確実に高速です)

Vite の新しい体験に関するこの記事はこれで終わりです。Vite の新しい体験についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。