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 データベースをインストールする (非常に詳細なチュートリアル)

推薦する

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

VMware 構成 VMnet8 ネットワーク方法の手順

目次1. はじめに2. 設定手順1. はじめに1. NAT モード (VMnet8) は、仮想マシン...

シェルスクリプトを使用して Docker サービスを一括で開始および停止する

目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...

Linux でのプロセスデーモン スーパーバイザーのインストール、構成、および使用

Supervisor は非常に優れたデーモン管理ツールです。自動起動、ログ出力、自動ログカットなど、...

Vue: メモリリークの詳細な説明

メモリリークとは何ですか?メモリ リークとは、新しいメモリが作成されたが、解放またはガベージ コレ...

Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明

序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...

ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有

プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...

虫眼鏡の詳細のJavaScript実装

目次1. レンダリング2. 実施原則3. まとめ1. レンダリング 2. 実施原則幅と高さが等しい拡...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

IE6 で CSS スタイルの div または li の背景のタイリングと境界の破損を解決する方法

IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

プロセスごとにネットワーク帯域幅を監視する Linux ツール Nethogs のインストールと展開

概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...

win2008 サーバー セキュリティ設定の展開ドキュメント (推奨)

私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...

Vueはシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...

Linuxコマンドunzipの詳しい説明

目次1. 解凍コマンド1.1 構文1.2 オプション2. 例1. 解凍コマンドunzip コマンドは...