スピードをパッケージ改善のWebPACK

そして、プラグインを使用することにより、プラグインのパラメータを設定します。

1.パッキング速度の解析

速度測定-のWebPACK-プラグインを介して各プラグインパッケージやローダーの最初の時間がかかる分析。次に、特定の問題、具体的な分析。

プラグインをフォロー

NPM --save-devのスピードメジャー-WebPACKの-プラグインをインストール

コンフィギュレーション・オブジェクトを使用する場合、プラグインは、そのパッケージ全体が必要

CONST SpeedMeasureWebpackPlugin =（ '速度尺度-WebPACKの-Plugin'を必要とします）。

constのSMP = 新しいSpeedMeasureWebpackPlugin（）;

module.exportsは = smp.wrap（スマート（ベース、{
   // ... 
}））。

2スタートJS平行圧縮及びキャッシュ構成プラグ

プラグのWebPACKのJS圧縮terser-WebPACKの-のプラグインです。

CONST TerserWebpackPlugin =（ 'terser-WebPACKの-Plugin'を必要とします）。
最適化：{
   最小化：[
     新しいTerserWebpackPlugin（{
        パラレル：trueに、   // 平行圧縮有効 
        キャッシュ：trueに、     // キャッシュ有効
     }）
   ]
}

3.使用の合理化のハッシュ値は、ファイル名を変更するには

まず、ハッシュの3種類の概念を理解します

1.ハッシュ 
それぞれのハッシュ値を生成するためにコンパイル。すべてのファイルが変更されていない場合は、ハッシュ値は変更されません。ファイルに変更があった場合には、ハッシュ値が変更されます。すべて、同じハッシュ値をファイル名のハッシュを使用します。
2. chunkhash
入口モジュールに関連する変更のハッシュファイルは、モジュール対応するエントリは、ハッシュ値が変化する変更された場合、変更は、入口モジュール、同じハッシュに依存しています。各ファイルの異なるハッシュ。
3. contenthash
内容に応じて生成されたハッシュ値。

キャッシュをより良く利用するためには、contenthash値を使用します。

真の、デフォルトのコールwebpack.HotModuleReplacementPluginプラグ：モードを開発する場合❎、devServerのホットを設定します。このとき、[contenthash】許可されていない、[ハッシュ]を使用してもよいです。

// 出力用contenthashの   
出力：{
    パス：path.join（__ dirnameは、 'DIST' ）、
    ファイル名：」。[名前] [contenthash]の.js'、// キーに対応する名前のエントリ、できない、デフォルトのメイン
  }
 // CSSファイルcontenthash 
    新しい新しいMiniCssExtractPlugin（{
      ファイル名： '[名] [contenthash]の.css' 、
    }）

4. module.noParse

サードパーティのライブラリの大規模な導入のための解決の依存関係に構文木に解析さとスピードを構築改善する必要はありません。構成モジュールで定義されている、/インポートと呼ばれる必要/導入されるようなメカニズムを定義することはできません。

  モジュール：{
    Nofrse： / Lodash | jQueryの/、

ダイナミックリンクライブラリDLL

大幅梱包/コンパイル速度を向上させることができます。

DLLファイルを生成1.

DllPluginのDLLファイル最初の使用を生成し、別のファイルwebpack.dll.config.jsを構成する必要

CONSTパスは=（「パス」を必要とします）。
CONSTのWebPACK =（ 'WebPACKの'を必要とします）。

module.exportsは = {
  モード：「なし」、
  エントリー：{
    反応：[ '反応'、 '-DOM反応します' ]
  }、
  出力：{
    ファイル名： '[名] .dll.js' 、
    パス：path.join（__ dirnameは、 'DIST' ）、
    ライブラリー： '_dll_ [名前]' 、
  }、
  プラグイン：[
    新しいwebpack.DllPlugin（{
      名前： '_dll_ [名前]'、// 名前はoutputli.braryされている必要があります 
      パス：path.join（__ dirnameは、 'manifest.jsonを' ）
    }）
  ]
}

package.json configureスクリプトコマンドは、DLLファイルを生成します

  "スクリプト" ：{
     "DLL"： "のWebPACK --config webpack.dll.config.js" 
  }

2. DllReferencePlugin構成mainfestマップ

webpack.config.jsにプラグインを追加します。

    新しいwebpack.DllReferencePlugin（{
       // 建立索引 
      マニフェスト：path.resolve（__ dirnameは、 'manifest.jsonを' ）、
    }）、
    新しい新しいCleanWebpackPlugin（{
       // 各非空のみのdllファイルのdllファイル保存 
      cleanOnceBeforeBuildPatterns：[ '** / *'、 '！react.dll.js' ]、
    }）、

3. DLLパッケージ紹介HTMLファイル

contentBase devServerが./dist設定した場合、相対パスは、以下の配置しました

< スクリプトSRC = "../ react.dll.js" > </ スクリプト>