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 を応援してください。

以下もご興味があるかもしれません: