Webpack 最適化戦略

単一ページのアプリケーション (vue、React) を構築するとき、またはプラグインをパッケージ化するときは、JavaScript パッケージ化ツールである webpack を使用する可能性が高くなります
ただし、プロジェクトのコードが増えるにつれて、webpack のいくつかの単純な構成が公開されるようになります。様々なデメリット(パッケージング時間が長い、コードが大きい)。
以下は、Webpackの自己開発と学習のプロセスに基づいて問題を解決する方法をまとめたものです。

パッケージング時間が長い

DllPlugin

知っている人も多いwebpack.optimize .CommonsChunkPluginこのプラグインはパブリックライブラリを抽出するために使用されますが、このプラグインはパブリックライブラリの繰り返しパッケージ化の問題を解決できません
DllPluginこのプラグインはそれを解決できます。 -in は最初にパブリック ライブラリをパッケージ化します。 独自の独立した Webpack 構成ファイルがあり、構成ファイルのエントリ ポイントはパッケージ化する必要があるパブリック ライブラリです。
パッケージ化されると、パブリック js パッケージと

マニフェストが作成されます。 .json.
manifest.jsonはメイン設定ファイルを作成するために使用されます DLLReferencePluginは関連する依存関係にマップされますdevtool easy-module-eval-source-map

webpackを使用するときコードをパッケージ化すると、コンパイルされるため、デバッグが困難になります。

そこで webpack は devtool を提供し、API はソース マップを通じてエラーの正しい場所を見つけます。

cheap-module-eval-source-map
を選択します。その理由は、各モジュールが eval() を使用して連続構築の効率を大幅に向上させ、生成された列マッピングがないためです。 パフォーマンスの最適化

スタイルの分離と圧縮により構築時間が節約されます。

各スクリプトのスタイルを抽出するには、

extract-text-webpack-plugin

を使用します。allChunks: true
を設定すると、抽出されたスタイルは1つのファイルにマージされます。optimize-を使用します。 css-assets-webpack-pluginを使用してスタイルを圧縮します。
スクリプト圧縮

uglifyjs-webpack-pluginを使用します

スクリプトを圧縮します。

jsパフォーマンスの最適化Webpackの各モジュールはクロージャ関数.Use

webpack.optimize.ModuleConcatenationPlugin

がそれを関連付けます モジュールはクロージャに入れられます。
これによりクロージャの数が減ります。パブリックコードを抽出します

DllPlugin

または

webpackを使用します.optimize.CommonsChunkPlugin はパブリック コードを抽出し、他のファイルにパッケージ化します。 繰り返しのパッケージ化を避けることで、パッケージのサイズを削減します。 サーバーの事前圧縮 サービスが事前圧縮をオンにするとき。ファイル名に

.gz

を加えたファイルが最初に取得されます。このファイルは圧縮されています。ファイルのサイズは小さくなります。

CompressionWebpackPluginを使用すると、対応する圧縮ファイルが生成されます。関連する推奨事項:
react、webpack、クロスドメインプロキシマルチページ

Vue+webpackの基本設定の共有

webpackプロジェクトのネットワーク最適化コード共有

以上がWebpack 最適化戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。