webpackコード断片化の実装

webpackコード断片化の実装

背景

高性能なアプリケーションを実現する上で最も重要なポイントの 1 つは、ユーザーが可能な限り毎回必要なリソースのみを読み込むようにすることです。優先度が高すぎないリソースは、遅延読み込みなどのテクノロジを使用して段階的に取得し、ページの最初の画面速度を確保する必要があります。コード シャーディングは、webpck パッケージング ツールに固有のテクノロジです。この機能により、コードを特定の形式に分割できるため、ユーザーは一度にすべてのコードをロードする必要はなく、必要に応じてロードできます。

コモンズチャンクプラグイン

このプラグインは webpack4 では推奨されなくなりましたが、それでも理解しておく必要があります。このプラグインは、複数のチャンクから共通部分を抽出できます。共通モジュールの抽出は、複数のプロジェクトにさまざまな利点をもたらします。

  • 開発プロセスではモジュールのパッケージ化の繰り返しが削減され、開発速度が向上します。
  • 全体的なリソース サイズを削減します。
  • 適切にセグメント化されたコードにより、クライアント キャッシュをより効果的に使用できます。

このプラグインのデフォルトのルールでは、モジュールが 2 つのエントリ チャンクで使用されている限り、そのモジュールは抽出されます。たとえば、a と b が react を使用している限り、react が抽出されます。しかし、まだいくつか欠点があります:

  • CommonChunkPlugin は 1 つのベンダーのみを抽出できます。複数のベンダーを抽出する場合は、複数のプラグインを構成する必要があり、重複する構成コードが大量に追加されます。
  • 先ほど述べたメインフェストでは、実際にはブラウザにもう 1 つのリソースが読み込まれるため、ページのレンダリング速度が低下します。
  • いくつかの内部設計上の欠陥により、CommonChunkPlugin は共通モジュールを抽出するときに元のチャンク内のモジュールの依存関係を破壊し、それ以上の最適化を実行することが困難になります。

分割チャンク

これは、CommonChunkPlugin のコード分割機能を改善し、再設計して実装した webpack の新機能です。CommonChunkPlugin よりも強力であるだけでなく、よりシンプルで使いやすくなっています。コードは次のとおりです

モジュール.エクスポート = {
    エントリ: './foo.js',
    出力: {
        ファイル名: 'foo.js',
        パブリックパス: '/dist/'
    },
    モード: '開発'、
    最適化:
        分割チャンク: {
            チャンク: 'すべて'、
        }
    }
}

// .js で始まる
'react' から React をインポートします。
'./bar.js' をインポートします。
document.write('foo.js', React.version);

//バー.js
'react' から react をインポートします。
console.log('bar.js', React.version);

splitChunk のデフォルトの抽出条件は次のとおりです。

  • 抽出されたチャンクは共有することも、node_modules ディレクトリから取得することもできます。これは理解しやすいです。複数回参照されるモジュールや node_modules にあるモジュールは共通モジュールである傾向があり、抽出に適しています。
  • 抽出された js チャンクは、対応するサイズ、たとえば 30KB より大きいサイズになります。CSS チャンクのサイズが 50KB より大きい場合も、比較的簡単に理解できます。抽出されたリソースのサイズが小さすぎる場合、最適化の効果は平均的になります。
  • オンデマンド読み込みプロセス中、並行して要求されるリソースの最大数は 5 以下です。オンデマンド読み込みとは、スクリプト タグを動的に挿入してスクリプトを読み込むことを意味します。通常、各リクエストにはリンクを確立して解放するコストがかかるため、同時に多くのリソースをロードすることは望ましくありません。そのため、抽出ルールは、並列リクエストがあまり多くない場合にのみ有効になります。
  • 最初の読み込み時に、並行して要求されるリソースの最大数は 3 以下です。これは前の項目と似ていますが、ページが初めて読み込まれるときはパフォーマンス要件が高くなることが多いため、ここでのデフォルトのしきい値も低くなります。

構成

分割チャンク: {
    チャンク: 'async'、
    最小サイズ: {
        ジャバスクリプト: 30000,
        スタイル: 50000,
    },
    最大サイズ: 0,
    最小チャンク数: 1,
    最大非同期リクエスト: 5,
    最大初期リクエスト数: 3,
    自動名前区切り文字: '~',
    名前: 真、
    キャッシュグループ:
        ベンダー:
            テスト: /[\\/]node_modules[\\/]/,
            優先度: -10、
        },
        デフォルト: {
            最小チャンク数: 2,
            優先度: -20、
            既存のチャンクを再利用: true
        }
    }
}

マッチングパターン
チャンクには、async(デフォルト)、initial、all の 3 つの値があります。 async は非同期チャンクのみを抽出し、initial はエントリチャンクのみで動作し、all は両方のモードを同時に有効にします (推奨)

一致する条件
minSize、minChunks、maxAsyncRequests、maxInitialRequests

名前
デフォルトは true です。つまり、新しく生成されたチャンクは、cacheGroups とスコープに従って自動的に名前が付けられ、automaticNameDelimiter によって区切られます。

キャッシュグループ
これは、チャンクを分割するためのルールとして理解できます。デフォルトでは、ベンダーとデフォルトの 2 つのルールがあります。ベンダー
これは、node_modules 内のすべての修飾されたモジュールを抽出するために使用され、複数回参照されるモジュールには default が使用されます。これらのルールを追加または変更できます。ルールを無効にする場合は、false に設定することもできます。モジュールが同時に複数の cacheGroups に準拠する場合、優先度構成項目を使用して優先度が決定されます。

リソースを非同期に読み込む

非同期リソース読み込みによって解決される主な問題は、モジュールが多すぎてリソース サイズが大きすぎる場合に、一時的に使用されていない一部のモジュールの読み込みが遅れる可能性があることです。この方法では、ページが初めてレンダリングされるときにユーザーがダウンロードするリソースが可能な限り小さくなり、後続のモジュールは必要に応じて読み込まれるようにトリガーされるため、一般的にオンデマンド読み込みと呼ばれます。
webpack には、import (webapck2 以降) と require.ensure (webapck1) という 2 つの非同期読み込みメソッドがあります。import と es6 モジュールの違いは、トップレベルの読み込みを必要とせず、使用するとすぐに読み込むことができることです。これは単なる単純な関数呼び出しなので、ここではこれ以上の説明はありません。

要約する

コードを分割する方法はいくつかあります(CommonChunkPlugin または SplitChunks、および非同期リソースの読み込み)。これらの方法を利用することで、リソース サイズを効果的に削減できると同時に、キャッシュをより有効に活用して、ユーザーにとってより使いやすいエクスペリエンスを提供できます。

webpack コードスライシングの実装に関するこの記事はこれで終わりです。より関連性の高い webpack コードスライシングのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様、今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません:
  • Electron-vueはwebpackを使用して複数ページのエントリファイルをパッケージ化します
  • Webpack プロジェクトでローダー プラグインをデバッグする方法
  • Webpackプラグインを書いてnpmに公開するための80行のコード
  • Webpackを使用して複数ページのプログラムを構築するための実装手順
  • Webpack コンポーネントの使用状況統計を実装するための 50 行のコード
  • webpack -v エラー解決

<<:  MySQL ステートメントを使用した簡単な追加、削除、変更、クエリ操作の例

>>:  VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

推薦する

HTMLのimgタグで画像の中心部分だけを表示する方法(3つの方法)

HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

Mysql の遅いクエリ操作の概要

MySQL の遅いクエリの説明MySQL スロー クエリ ログは、MySQL が提供するログ レコー...

docker コンペ応募でよく使われるコマンドのまとめ

アカウントにログイン DOCKER_REGISTRY=registry.cn-hangzhou.al...

コピー&ペーストはパッケージングの敵です

OO、デザイン パターン、および多くのオブジェクト指向の原則について話す前に、まず 1 つのことを習...

JavaScript のフラット配列をツリー構造に変換する例

目次バックグラウンドで10,000個のデータが失われた再帰法非再帰的方法要約するバックグラウンドで1...

Ubuntuデュアルシステムが起動時に停止する問題の解決方法の詳細な説明

起動時に Ubuntu デュアル システムが停止する問題の解決方法 (Ubuntu 16.04 およ...

IE7 互換モードで IE8 を有効にするコード

最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...

k8s に ingress-nginx をデプロイする手順

目次序文1. Ingressの展開と構成2. httpsを使用する序文k8sクラスタサービスがデプロ...

CSSカスケーディングメカニズムについての簡単な説明

CSS にカスケード メカニズムがあるのはなぜですか? CSS では、同じ要素の特定のプロパティに同...

HTMLエリアタグの詳しい説明

<area> タグは、イメージ マップ内の領域を定義します (注: イメージ マップはク...

Javascript 文字列メソッドの詳細な説明

目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...

MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明

1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...

さまざまな Tomcat ログと catalina.out ファイルのセグメンテーションの関係についての簡単な分析

Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....

rpm を使用して指定されたバージョンの docker (1.12.6) をインストールする詳細な手順

1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...