CommonsChunkPlugin を使用してパブリック モジュールを抽出する方法

ここで、CommonsChunkPlugin によるパブリック モジュールの抽出について簡単に説明します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

はじめに

Webpack プラグイン CommonsChunkPlugin の主な機能は、Webpack プロジェクトのエントリ チャンクの共通部分を抽出することです。あまり詳しくない場合は、具体的な使用方法はあまり紹介しません。 webpack 公式 Web サイト の概要を参照してください。

プラグインは、webpack プロジェクトで一般的に使用される最適化機能であり、ほぼすべての webpack プロジェクトで使用されます。このプラグインを使用する利点:

Webpack のパッケージ化速度とプロジェクト サイズの向上: Webpack エントリのチャンク ファイル内のすべての共通コードを抽出してコード サイズを削減し、同時に Webpack のパッケージ化速度を向上させます。

キャッシュ メカニズムを利用する: 依存するパブリック モジュール ファイルは通常、めったに変更されないか、変更されないため、独立したモジュール ファイルを長期間キャッシュできます。

しかし、プロジェクトでは、プラグインを開く方法が間違っていると、上記の 2 番目の点を達成することは実際には不可能です。この場合:

変更されていないパブリック コードまたはライブラリ コードによってパッケージ化されたエントリ チャンク他のビジネス コードが変更されると変更され、ページ上の長いキャッシュ メカニズムが失敗します。

それでは、CommonsChunkPlugin を正しく開きましょう。

CommonsChunkPlugin の間違った使用法

ビジネスコードから、react、react-dom、react-router などのプロジェクトのパブリック ライブラリを分離し、ベンダー チャンクとして抽出すると、webpack の設定は次のようになります。

const webpack = require("webpack");
const path = require('path');
module.exports = {
 entry: {
 app: "./app.js",
 vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
 },
 output: {
 path: path.resolve(__dirname, 'output'),
 filename: "[name].[chunkhash].js"
 },
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]})
 ]
};

上記の内容は、プロジェクトのいくつかの基本ライブラリは、vendor という名前のチャンクにパッケージ化され、ビジネス関連のコードは、app という名前のチャンクにパッケージ化されます。

Webpack のパッケージ化とコンパイルの結果は次のとおりです。

その中のビジネスを分析しました コード app.js が変更された後の再コンパイル結果は次のとおりです:

CommonsChunkPlugin の設定では、ビジネス コード アプリが変更されると、ライブラリ コードも変更され、ベンダーのチャンクハッシュも変更されるため、ベンダー参照の名前もそれに応じて変更され、ブラウザ側のロング キャッシュ メカニズムが失敗します。

問題の原因webpackがパッケージ化されコンパイルされるたびにベンダーが変わる理由:

webpackはビルドされるたびにランタイムコードを生成します。ファイルが 1 つだけの場合、ランタイム コードはこのファイルに直接挿入されます。複数のファイルがある場合、ランタイム コードは共通ファイルに抽出されます。これは、上記の CommonsChunkPlugin によって構成されたベンダー チャンクです。

グローバル webpackJsonp メソッドの定義やモジュールの依存関係のメンテナンスを含む、webpack がコンパイルされるたびに生成されるランタイム コード 詳細については、こちらの commons.js を参照してください。

つまり、上記の webpack の CommonsChunkPlugin 設定では、これらのコードはコンパイルされるたびにベンダーにパッケージ化され、ベンダーのチャンクハッシュが毎回変更されることになります。

その後、ベンダー チャンクを構成し、共通コード、つまり Webpack ランタイム コードを抽出します。これにより、プロジェクトが依存する基本ライブラリ モジュールをビジネス モジュールから分離できます。これらのファイルは変更されないためです。 . なので、これらのファイルはロングキャッシュの機能を実現できます。具体的な構成は次のとおりです。

module.exports = {
 entry: {
 app: "./app.js",
 vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
 },
 ....
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]}),
 new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['vendor']
 })
 ]
};

このように、ビジネス アプリのコードが変更されても、プロジェクトが依存する基本ライブラリ ベンダー チャンクは毎回変更されず、抽出されたマニフェスト チャンクのみが変更されます。サイズが非常に小さいため、ベンダーに比べてメリットが大きいと言われています。以下に示すように:

アプリのコードを変更した後のパッケージ化とコンパイルの結果は次のとおりです。ベンダーのチャンクハッシュが変更されていないことがわかります

CommonsChunkPluginを構成する際には、1つのことに注意する必要があります。 webpack 内:

webpack の出力項目を設定します。ファイル名と chunkFilename には chunkhash を使用する必要があります。ハッシュを使用しないでください。使用しないと、上記の構成に従っても、期待される結果が得られません。ハッシュとチャンクハッシュの違いについては、github の回答を参照してください

上記は、皆さんのためにまとめたものです。将来的には皆さんのお役に立てれば幸いです。

関連記事:

Vue2.0の親コンポーネントと子コンポーネント間のディスパッチ機構の実装について(詳細なチュートリアル)

jQuery+SpringMVC_jqueryでのチェックボックスの選択と値の受け渡しの例

SpringMVC Getへの投稿方法複数選択ボックスの値 (コード例)

Vue を使用して複数のクラスを設定する方法

以上がCommonsChunkPlugin を使用してパブリック モジュールを抽出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。