背景高性能なアプリケーションを実現する上で最も重要なポイントの 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 データベースをインストールする (非常に詳細なチュートリアル)
1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...
目次1. はじめに2. 設定手順1. はじめに1. NAT モード (VMnet8) は、仮想マシン...
目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...
Supervisor は非常に優れたデーモン管理ツールです。自動起動、ログ出力、自動ログカットなど、...
メモリリークとは何ですか?メモリ リークとは、新しいメモリが作成されたが、解放またはガベージ コレ...
序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...
プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...
目次1. レンダリング2. 実施原則3. まとめ1. レンダリング 2. 実施原則幅と高さが等しい拡...
この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...
IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...
目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...
概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...
私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...
この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...
目次1. 解凍コマンド1.1 構文1.2 オプション2. 例1. 解凍コマンドunzip コマンドは...