背景高性能なアプリケーションを実現する上で最も重要なポイントの 1 つは、ユーザーが可能な限り毎回必要なリソースのみを読み込むようにすることです。優先度が高すぎないリソースは、遅延読み込みなどのテクノロジを使用して段階的に取得し、ページの最初の画面速度を確保する必要があります。コード シャーディングは、webpck パッケージング ツールに固有のテクノロジです。この機能により、コードを特定の形式に分割できるため、ユーザーは一度にすべてのコードをロードする必要はなく、必要に応じてロードできます。 コモンズチャンクプラグインこのプラグインは webpack4 では推奨されなくなりましたが、それでも理解しておく必要があります。このプラグインは、複数のチャンクから共通部分を抽出できます。共通モジュールの抽出は、複数のプロジェクトにさまざまな利点をもたらします。
このプラグインのデフォルトのルールでは、モジュールが 2 つのエントリ チャンクで使用されている限り、そのモジュールは抽出されます。たとえば、a と b が react を使用している限り、react が抽出されます。しかし、まだいくつか欠点があります:
分割チャンクこれは、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 のデフォルトの抽出条件は次のとおりです。
構成分割チャンク: { チャンク: 'async'、 最小サイズ: { ジャバスクリプト: 30000, スタイル: 50000, }, 最大サイズ: 0, 最小チャンク数: 1, 最大非同期リクエスト: 5, 最大初期リクエスト数: 3, 自動名前区切り文字: '~', 名前: 真、 キャッシュグループ: ベンダー: テスト: /[\\/]node_modules[\\/]/, 優先度: -10、 }, デフォルト: { 最小チャンク数: 2, 優先度: -20、 既存のチャンクを再利用: true } } } マッチングパターン 一致する条件 名前 キャッシュグループ リソースを非同期に読み込む非同期リソース読み込みによって解決される主な問題は、モジュールが多すぎてリソース サイズが大きすぎる場合に、一時的に使用されていない一部のモジュールの読み込みが遅れる可能性があることです。この方法では、ページが初めてレンダリングされるときにユーザーがダウンロードするリソースが可能な限り小さくなり、後続のモジュールは必要に応じて読み込まれるようにトリガーされるため、一般的にオンデマンド読み込みと呼ばれます。 要約するコードを分割する方法はいくつかあります(CommonChunkPlugin または SplitChunks、および非同期リソースの読み込み)。これらの方法を利用することで、リソース サイズを効果的に削減できると同時に、キャッシュをより有効に活用して、ユーザーにとってより使いやすいエクスペリエンスを提供できます。 webpack コードスライシングの実装に関するこの記事はこれで終わりです。より関連性の高い webpack コードスライシングのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様、今後とも 123WORDPRESS.COM を応援してください。 以下もご興味があるかもしれません:
|
<<: MySQL ステートメントを使用した簡単な追加、削除、変更、クエリ操作の例
>>: VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)
HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...
目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...
MySQL の遅いクエリの説明MySQL スロー クエリ ログは、MySQL が提供するログ レコー...
アカウントにログイン DOCKER_REGISTRY=registry.cn-hangzhou.al...
OO、デザイン パターン、および多くのオブジェクト指向の原則について話す前に、まず 1 つのことを習...
目次バックグラウンドで10,000個のデータが失われた再帰法非再帰的方法要約するバックグラウンドで1...
起動時に Ubuntu デュアル システムが停止する問題の解決方法 (Ubuntu 16.04 およ...
最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...
目次序文1. Ingressの展開と構成2. httpsを使用する序文k8sクラスタサービスがデプロ...
CSS にカスケード メカニズムがあるのはなぜですか? CSS では、同じ要素の特定のプロパティに同...
<area> タグは、イメージ マップ内の領域を定義します (注: イメージ マップはク...
目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...
1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...
Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....
1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...