Webpack を使用する理由

より多くの JavaScript を使用します

最新のブラウザを通じてより多くのユーザー インターフェイスが提供されます

サービス プロセス中にページ全体が更新されるのは最小限に抑えられます

そのため、Web サイトではクライアント上で多くのコードが実行されています。巨大なコードベースは秩序ある方法で管理する必要があり、モジュールシステム「モジュールシステム」は、コードベースをモジュール「モジュール」に分割する機能を提供します

モジュールシステムの派生

モジュールとモジュールの依存関係の定義があります

「モジュールシステムを使わない」メソッド

CommonJS

AMD

ES6モジュールシステム

他…

scriptタグ

このメソッド各モジュールはモジュール システムを使用しません。各モジュールはグローバル オブジェクト (たとえば、ウィンドウ オブジェクト) にインターフェイスをエクスポートします。他のモジュールは、グローバル オブジェクトを通じてこのインターフェイスにアクセスします。

短所:

競合が発生しやすい

モジュールのロード順序に細心の注意を払う必要がある

モジュールのユーザーはモジュールの依存関係を分解する必要がある

大規模なプロジェクトでは、管理する必要があるモジュールが多数あり、管理は非常に難しい

CommonJS: 同期 require メソッド

このメソッドは、同期 require メソッドを使用して依存モジュールをロードし、インターフェイスを返します。モジュールのエクスポート オブジェクトを定義するには、エクスポート オブジェクト「exports」に属性を追加するか、module.exports に値を割り当てます。

このメソッドは通常、サーバーサイドのNodeJSで使用されます

利点

サーバーレベルのコードを利用できます

ネットワーク環境に適しており、ネットワークリクエストは非同期です

複数のモジュールをロードする場合、並列ロードはありません

AMD: 非同期 require メソッドはブラウザ環境のモジュール システムに適用されます。同期 require はサポートされていませんが、非同期 require メソッドを提供します。 :

利点

ネットワーク環境での非同期リクエスト メソッドに準拠します。

複数のモジュールを使用できます。並列ロード

欠点

コーディングのオーバーヘッドが追加。可読性が悪い

一時的な解決策のようなもの

実装: RequireJS

ES6 モジュール システム

ECMAScript 2015 "6th Edition" は、別のモジュール システムを形成するための JavaScript の言語構造をいくつか提供します

利点

静的解析を容易にする

未来指向性 ES 標準

短所

ブラウザがこの機能をサポートするには時間がかかります

この方法で書かれたモジュールはまだ比較的少ないです

客観的な解決策

開発者は既存のコードベースができるモジュールシステムを選択しましょう「他のモジュールシステムを使用している場合でも」実行します。

送信

モジュールはクライアントで実行される前にサーバーからクライアントに送信される必要があります。極端な送信方法が 2 つあり、どちらも広く使用されていますが、どちらも最適ではありません

一度に 1 つのモジュールがリクエスト

一度にすべてのモジュールがリクエスト

一度に 1 つのモジュールがリクエスト

利点 :必要なモジュールが送信されます

短所: リクエストのオーバーヘッドが過剰です

短所: リクエストの遅延が大きく、プログラムの起動が遅くなります

すべてのモジュールを一度にリクエストします

長所: リクエストのオーバーヘッドが比較的小さい遅延が少ない

欠点: 未使用のモジュールもクライアントにダウンロードされる

断片化された送信

ほとんどのシナリオでは、上記の 2 つの中間である、より柔軟な送信方法が必要です 極端なケースの間:

すべてのモジュールをコンパイルする場合、一連のモジュールを小さなシャード「チャンク」のセットに分解します

すべてのモジュールを一度にリクエストする場合と比較して、シャーディング方法では、ネットワークリクエストが複数のより小さく、より頻繁なクイックリクエストになります。プログラムが開始されると、必要のないフラグメントが必要なときにロードされます。 一度に 1 つのモジュールをリクエストする場合と比較して、プログラムの初期化が高速化されますが、それでも実際の使用中により多くのコードを取得でき、「ネットワーク リクエストのオーバーヘッドを削減」できます。

どのようにシャードするか、どこでシャードするかは開発者が決定します。大規模なコードベースはこの方法で編成できます。

結論

上記2つの主要なテーマに関して、Webpackは複数のモジュールシステムスタイルをサポートし、柔軟なチャンク送信「コードスプリット」をサポートします。

Webpack は、Web Web サイトの JS コード ライブラリまたはサードパーティのコード ライブラリをパッケージ化するために使用できる JS モジュール パッケージ化ツールです。 AMD のみをサポートする RequireJs とは異なり、NodeJS は CommonJS、SeaJS は CMD のみをサポート、そして現在は ES6 モジュールもあります...Webpack はオールインワンのようなもので、開発者は自分の好みに応じて柔軟にコーディングできます。