vite と webpack の違いは何ですか

相違点: 1. Webpack サーバーの起動速度は vite より遅いですが、vite は起動時にパッケージングを必要とせず、モジュールの依存関係を解析してコンパイルする必要がないため、起動速度が非常に速くなります。 2. Vite ホット アップデートは webpack よりも高速です。Vite の HRM の観点から、特定のモジュールのコンテンツが変更された場合、ブラウザーにモジュールを再リクエストさせるだけです。 3. Vite は esbuild を使用して依存関係を事前構築しますが、webpack はノードに基づいています。 4. Vite のエコロジーは webpack ほど良くなく、ローダーとプラグインが十分に豊富ではありません。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

最初に書きました

• 最近の

  vite は非常に人気があり、バージョン 2.0 がリリースされました。vue の作者こちらもおすすめです。

• 前回の記事で、

  vite の欠点は、現在のエコロジーが webpack として十分に成熟していないことであると述べました。ただし、できる限りこの欠点を補うことで、現在の webpack 市場

のほとんどを置き換えることができる可能性が高くなります。 vite と webpack の包括的な比較

webpack パッケージ化プロセス

• 1. エントリ ファイルを特定する

• 2.パス モジュールの依存関係をレイヤーごとに特定します。 (Commonjs、amd、または es6 インポート、webpack がそれを分析します。コードの依存関係を取得するため)

• 3. webpack が行うことはコードを分析することです。コードを変換し、コードをコンパイルし、コードを出力します

• #4. 最後に、パッケージ化されたコード

webpackを形成しますパッケージ化の原則

• 1.

  まず、依存関係を段階的に再帰的に特定し、依存関係グラフを構築します

• 2. コードを AST 抽象構文ツリーに変換します

##3. AST ステージでコードを処理します

• ##4. AST 抽象構文ツリーをプロセッサが認識できるブラウズ コードに変換し、出力します。
#キー ポイント: ここでは、依存関係を再帰的に特定し、依存関係グラフを構築する必要があります。グラフ オブジェクトは次のようになります。

{ './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として宣言する場合

• 例:

 <script type="module" src="/src/main.js"></script>

ブラウザは、サーバー

• http://localhost:3000/src/main.js请求main.js文件：
  
  // /src/main.js:
  import { createApp } from 'vue'
  import App from './App.vue'
  createApp(App).mount('#app')

  ブラウザは main.js ファイルをリクエストし、インポートによって導入されたパッケージがファイルに含まれていることを検出し、コンテンツを取得するために内部インポート参照への HTTP リクエストを開始します。モジュールのファイル。

  • 例:

    GET http://localhost:3000/@modules/vue.js

  • 例:

    GET http://localhost:3000/src/App.vue

  • ##Vite

    の主な機能は次のとおりです。ブラウザのこれらのリクエストをハイジャックし、バックエンドで対応する処理を実行して、プロジェクトで使用されるファイルを単純に分解して統合し、ブラウザに返します。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 に似ています。私は非常に楽観的でした。

  #vite デメリット2. 現在Rollupを使用している本番環境の構築

  理由 その理由は、esbuild が CSS とコード分割にあまり適していないためです

  • #vite 欠点 3.は大規模に使用されておらず、多くの問題や要求が実際には明らかにされていません

  Vite が本当に台頭する日は、vue3 に関係しています。 Vite は本番環境で広く使用されるようになり、徐々に誰もが採用する可能性が高くなります。

  webpack サーバーの起動は vite よりも遅い

  • Vite は起動時にパッケージングを必要としないため、モジュールの依存関係を解析してコンパイルする必要がないため、起動速度が非常に速くなります。速い。ブラウザが必要なモジュールをリクエストすると、モジュールがコンパイルされます。このオンデマンドの動的コンパイル モードにより、コンパイル時間が大幅に短縮されます。プロジェクトが大きくなり、ファイルの数が増えると、Vite の開発上の利点がより明白になります。

  vite ホット アップデートは webpack よりも高速ですvite HRM の観点からは、特定のモジュールのコンテンツが変更された場合、モジュールを再リクエストするのではなく、ブラウザにモジュールを再リクエストさせるだけです。 webpack のように、このモジュールのすべての依存関係を再コンパイルします。

  vite は esbuild (Go で書かれた) を使用して依存関係を事前構築しますが、webpack は、nodejs に基づいており、webpack よりも 10 ～ 100 倍高速です。 node

  • vite エコロジーは webpack ほど優れておらず、ローダーとプラグインは十分に豊富ではありません

  • [関連する推奨事項:

    vuejs ビデオ チュートリアル

    、

    Web フロントエンド開発
  ]

  以上がvite と webpack の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。