相違点: 1. Webpack サーバーの起動速度は vite より遅いですが、vite は起動時にパッケージングを必要とせず、モジュールの依存関係を解析してコンパイルする必要がないため、起動速度が非常に速くなります。 2. Vite ホット アップデートは webpack よりも高速です。Vite の HRM の観点から、特定のモジュールのコンテンツが変更された場合、ブラウザーにモジュールを再リクエストさせるだけです。 3. Vite は esbuild を使用して依存関係を事前構築しますが、webpack はノードに基づいています。 4. Vite のエコロジーは webpack ほど良くなく、ローダーとプラグインが十分に豊富ではありません。
#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。
最初に書きました
のほとんどを置き換えることができる可能性が高くなります。 vite と webpack の包括的な比較
webpack パッケージ化プロセス
- 1. エントリ ファイルを特定する
- 2.パス モジュールの依存関係をレイヤーごとに特定します。 (Commonjs、amd、または es6 インポート、webpack がそれを分析します。コードの依存関係を取得するため)
- 3. webpack が行うことはコードを分析することです。コードを変換し、コードをコンパイルし、コードを出力します
- #4. 最後に、パッケージ化されたコード
webpackを形成しますパッケージ化の原則
{ './app.js':
{ dependencies: { './test1.js': './test1.js' },
code:
'"use strict";\n\nvar _test = _interopRequireDefault(require("./test1.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(test
1);' },
'./test1.js':
{ dependencies: { './test2.js': './test2.js' },
code:
'"use strict";\n\nvar _test = _interopRequireDefault(require("./test2.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(\'th
is is test1.js \', _test["default"]);' },
'./test2.js':
{ dependencies: {},
code:
'"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports["default"] = void 0;\n\nfunction test2() {\n console.log(\'this is test2 \');\n}\n\nvar _default = tes
t2;\nexports["default"] = _default;' } }ログイン後にコピー
vite 原則
スクリプト タグ タイプを moduleとして宣言する場合
ブラウザは、サーバー
http://localhost:3000/src/main.js请求main.js文件：
// /src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')ログイン後にコピー
-
例:
GET http://localhost:3000/@modules/vue.js
-
例:
GET http://localhost:3000/src/App.vue
-
の主な機能は次のとおりです。ブラウザのこれらのリクエストをハイジャックし、バックエンドで対応する処理を実行して、プロジェクトで使用されるファイルを単純に分解して統合し、ブラウザに返します。Vite はプロセス全体でファイルをパッケージ化してコンパイルしません。元の webpack よりも速度が速くなります - 開発とコンパイルの速度がはるかに速くなります。
Webpack のデメリット 1.サーバーの起動が遅い
開発サーバーをコールド スタートする場合、パッケージャー ベースのアプローチでは、アプリケーションを提供する前にアプリケーション全体を熱心にクロールしてビルドします。
-
vite は、アプリケーション内のモジュールを依存関係と依存関係の両方に区別することで、
Vite を改善します。ソース コード カテゴリにより、開発サーバーの起動時間が短縮されます。
- 依存関係はほとんどが純粋な JavaScript であり、開発中に変更されることはありません。一部の大きな依存関係 (数百のモジュールを含むコンポーネント ライブラリなど) の処理にもコストがかかります。また、依存関係は通常、何らかの方法 (ESM や CommonJS など) で多数の小さなモジュールに分割されます。
- Vite は esbuild を使用して依存関係を事前構築します。 Esbuild は Go で書かれており、JavaScript で書かれたパッケージャーを使用して依存関係を事前に構築するよりも 10 ～ 100 倍高速です。
- ソース コードには通常、直接 JavaScript ではなく変換が必要なファイル (JSX、CSS、Vue/Svelte コンポーネントなど) が含まれており、頻繁に編集されます。同時に、すべてのソース コードを同時にロードする必要はありません。 (例: ルート分割に基づくコード モジュール)。
- Vite はネイティブ ESM モードでソース コードを提供します。これにより、基本的に、ブラウザーがパッケージャーの作業の一部を引き継ぐことができます。Vite は、ブラウザーがソース コードを要求したときに変換するだけで済み、オンデマンドでそれを提供します。コンテキストに基づいて動的にインポートされるコード。つまり、現在の画面で実際に使用される場合にのみ処理されます。
-
Webpack の欠点 2.node.js を使用して
# を実装します
##vite の改善
Vite は esbuild
事前構築された依存関係を使用します。 Esbuild は Go で書かれており、
Node.js で書かれたパッケージャーを使用して依存関係を事前に構築するよりも 10 ～ 100 倍高速です。 -
webpack の致命的な欠点 3. ホットアップデートは効率が悪い
パッケージャーベースで起動すると、ファイルの編集後、ファイル自体が再構築されます。明らかに、パッケージ全体を再構築すべきではありません。再構築すると、アプリケーションのサイズが大きくなるにつれて更新速度が急激に低下するからです。
一部のパッケージャ開発サーバーは、ファイルが変更されたときにモジュール グラフの一部を非アクティブ化するだけで済むようにメモリ内にビルドを保持します[1]が、全体のリビルドとリロードも必要になります。ページ。これにはコストがかかり、ページを再ロードするとアプリケーションの現在の状態が消去されるため、パッケージャーは動的モジュール ホット リロード (HMR) をサポートしています。これにより、ページの残りの部分に影響を与えることなく、モジュール自体が「ホット リプレース」できるようになります。これにより、開発エクスペリエンスが大幅に向上しますが、実際には、アプリのサイズが大きくなるにつれて、HMR の更新速度さえも大幅に低下することがわかりました。
#vite の改善
##Vite では、HMR はネイティブ ESM で実行されます。ファイルを編集するとき、- Vite は編集されたモジュールとその最も近い HMR 境界 (ほとんどの場合はモジュール自体) の間のリンクを正確に無効にするだけで済み、アプリのサイズに関係なく、HMR の更新が常に高速になります
。
Vite は、ページ全体のリロードを高速化するために HTTP ヘッダーも使用します (ここでも、ブラウザーに多くのことを行わせます): ソース コード モジュールのリクエストは、304 Not に従ってネゴシエートされ、キャッシュされます。変更された依存モジュールのリクエストは、Cache-Control: max-age=31536000、immutable を通じて強力にキャッシュされるため、一度キャッシュされると再度リクエストする必要はありません。
#vite 欠点 1. エコロジー、エコロジー、エコロジーは webpack ほど良くありません
#wepback 素晴らしい 利点はローダーとプラグインが非常に豊富なことですが、エコロジーになるのは時間の問題だと思います。現在の Vite は当時出たばかりの M1 チップ Mac に似ています。私は非常に楽観的でした。
理由 その理由は、esbuild が CSS とコード分割にあまり適していないためです
-
#vite 欠点 3.は大規模に使用されておらず、多くの問題や要求が実際には明らかにされていません
Vite が本当に台頭する日は、vue3 に関係しています。 Vite は本番環境で広く使用されるようになり、徐々に誰もが採用する可能性が高くなります。
vite ホット アップデートは webpack よりも高速ですvite HRM の観点からは、特定のモジュールのコンテンツが変更された場合、モジュールを再リクエストするのではなく、ブラウザにモジュールを再リクエストさせるだけです。 webpack のように、このモジュールのすべての依存関係を再コンパイルします。
以上がvite と webpack の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
