最適化

Webpack は選択されたmodeに応じて最適化を実行しますが、すべての最適化は手動で構成およびオーバーライドできます。

optimization.checkWasmTypes

boolean

WebAssemblyモジュールがインポート/エクスポートされる際に、互換性のない型をチェックするようにwebpackに指示します。デフォルトでは、optimization.checkWasmTypesはproduction modeで有効になり、それ以外の場合は無効になります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    checkWasmTypes: false,
  },
};

optimization.chunkIds

boolean = false string: 'natural' | 'named' | 'size' | 'total-size' | 'deterministic'

チャンクIDを選択する際に使用するアルゴリズムをwebpackに指示します。optimization.chunkIdsをfalseに設定すると、カスタムアルゴリズムをプラグイン経由で提供できるため、組み込みのアルゴリズムは使用されないことをwebpackに指示します。optimization.chunkIdsにはいくつかのデフォルトがあります。

• また、環境が開発環境の場合は、optimization.chunkIdsが'named'に設定され、本番環境では'deterministic'に設定されます。
• 上記以外の場合、optimization.chunkIdsはデフォルトで'natural'になります。

以下の文字列値がサポートされています

webpack.config.js

module.exports = {
  //...
  optimization: {
    chunkIds: 'named',
  },
};

デフォルトでは、optimization.chunkIdsが'deterministic'に設定されている場合、最小長3桁が使用されます。デフォルトの動作をオーバーライドするには、optimization.chunkIdsをfalseに設定し、webpack.ids.DeterministicChunkIdsPluginを使用します。

webpack.config.js

module.exports = {
  //...
  optimization: {
    chunkIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicChunkIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.concatenateModules

boolean

モジュールグラフのセグメントを検索し、それらを単一のモジュールに安全に連結するようにwebpackに指示します。optimization.providedExportsとoptimization.usedExportsに依存します。デフォルトでは、optimization.concatenateModulesはproduction modeで有効になり、それ以外の場合は無効になります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    concatenateModules: true,
  },
};

optimization.emitOnErrors

boolean = false

optimization.emitOnErrorsを使用して、コンパイル中にエラーが発生した場合にアセットを出力します。これにより、エラーが発生しているアセットが確実に出力されます。重大なエラーは生成されたコードに出力され、実行時にエラーが発生します。

webpack.config.js

module.exports = {
  //...
  optimization: {
    emitOnErrors: true,
  },
};

optimization.flagIncludedChunks

boolean

他のチャンクのサブセットであるチャンクを特定してフラグを設定し、大きいチャンクが既にロードされている場合はサブセットをロードする必要がないようにwebpackに指示します。デフォルトでは、optimization.flagIncludedChunksはproduction modeで有効になり、それ以外の場合は無効になります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    flagIncludedChunks: true,
  },
};

optimization.innerGraph

boolean = true

optimization.innerGraphは、未使用のエクスポートに対して内部グラフ分析を実行するかどうかをwebpackに指示します。

webpack.config.js

module.exports = {
  //...
  optimization: {
    innerGraph: false,
  },
};

optimization.mangleExports

boolean string: 'deterministic' | 'size'

optimization.mangleExportsを使用すると、エクスポートのマングルを制御できます。

デフォルトでは、optimization.mangleExports: 'deterministic'はproduction modeで有効になり、それ以外の場合は無効になります。

次の値がサポートされています

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleExports: true,
  },
};

optimization.mangleWasmImports

boolean = false

trueに設定すると、インポートを短い文字列に変更することでWASMのサイズを小さくするようにwebpackに指示します。モジュール名とエクスポート名をマングルします。

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleWasmImports: true,
  },
};

optimization.mergeDuplicateChunks

boolean = true

同じモジュールを含むチャンクをマージするようにwebpackに指示します。optimization.mergeDuplicateChunksをfalseに設定すると、この最適化は無効になります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

boolean = true

TerserPluginまたはoptimization.minimizerで指定されたプラグインを使用して、バンドルを最小化するようにwebpackに指示します。

webpack.config.js

module.exports = {
  //...
  optimization: {
    minimize: false,
  },
};

optimization.minimizer

[TerserPlugin] および/または [function (compiler)] または undefined | null | 0 | false | ""

別のミニマイザーを提供するか、カスタマイズされた1つ以上のTerserPluginインスタンスを提供することで、デフォルトのミニマイザーをオーバーライドできます。webpack 5.87.0以降では、偽の値を使用して特定のミニマイザーを条件付きで無効にできます。

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
    ],
  },
};

または、関数として

module.exports = {
  optimization: {
    minimizer: [
      (compiler) => {
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({
          /* your config */
        }).apply(compiler);
      },
    ],
  },
};

デフォルトでは、webpackはoptimization.minimizerを次の値に設定します

[
  {
    apply: (compiler) => {
      // Lazy load the Terser plugin
      const TerserPlugin = require('terser-webpack-plugin');
      new TerserPlugin({
        terserOptions: {
          compress: {
            passes: 2,
          },
        },
      }).apply(compiler);
    },
  },
]; // eslint-disable-line

これは、optimization.minimizerをカスタマイズするときに保持したい場合に'...'でアクセスできます

module.exports = {
  optimization: {
    minimizer: [new CssMinimizer(), '...'],
  },
};

基本的に、'...'は、webpackがそれ以外の場合に設定するデフォルトの構成値にアクセスするためのショートカットです。

optimization.moduleIds

boolean: false string: 'natural' | 'named' | 'deterministic' | 'size'

モジュールIDを選択する際に使用するアルゴリズムをwebpackに指示します。optimization.moduleIdsをfalseに設定すると、カスタムアルゴリズムをプラグイン経由で提供できるため、組み込みのアルゴリズムは使用されないことをwebpackに指示します。

以下の文字列値がサポートされています

webpack.config.js

module.exports = {
  //...
  optimization: {
    moduleIds: 'deterministic',
  },
};

deterministicオプションは長期キャッシュに役立ちますが、hashedと比較してバンドルが小さくなります。数値の長さは、IDスペースの最大80％を埋めるように選択されます。デフォルトでは、optimization.moduleIdsがdeterministicに設定されている場合、最小長3桁が使用されます。デフォルトの動作をオーバーライドするには、optimization.moduleIdsをfalseに設定し、webpack.ids.DeterministicModuleIdsPluginを使用します。

webpack.config.js

module.exports = {
  //...
  optimization: {
    moduleIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicModuleIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.nodeEnv

boolean = false string

process.env.NODE_ENVを指定された文字列値に設定するようにwebpackに指示します。optimization.nodeEnvは、falseに設定されていない限り、DefinePluginを使用します。optimization.nodeEnvは、設定されている場合はmodeをデフォルトとし、それ以外の場合は'production'に戻ります。

可能な値

• 任意の文字列: process.env.NODE_ENVに設定する値。
• false: process.env.NODE_ENVの値を変更/設定しません。

webpack.config.js

module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};

optimization.portableRecords

boolean

optimization.portableRecordsは、コンテキストフォルダを移動できるように、相対パスを持つレコードを生成するようにwebpackに指示します。

デフォルトでは、optimization.portableRecordsは無効になっています。webpack構成に提供されるレコードオプション（recordsPath、recordsInputPath、recordsOutputPath）の少なくとも1つが提供されている場合は、自動的に有効になります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    portableRecords: true,
  },
};

optimization.providedExports

boolean

モジュールによって提供されるエクスポートを把握し、export * from ...に対してより効率的なコードを生成するようにwebpackに指示します。デフォルトでは、optimization.providedExportsは有効になっています。

webpack.config.js

module.exports = {
  //...
  optimization: {
    providedExports: false,
  },
};

optimization.realContentHash

boolean = true

アセットが処理された後、正しいアセットのコンテンツハッシュを取得するために、追加のハッシュコンパイルパスを追加します。realContentHash が false に設定されている場合、内部データを使用してハッシュが計算され、アセットが同一の場合でも変更される可能性があります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    realContentHash: false,
  },
};

optimization.removeAvailableModules

boolean = false

モジュールがすべての親に含まれている場合、webpackにチャンクからモジュールを検出して削除するように指示します。optimization.removeAvailableModules を true に設定すると、この最適化が有効になります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeAvailableModules: true,
  },
};

optimization.removeEmptyChunks

boolean = true

webpackに空のチャンクを検出して削除するように指示します。optimization.removeEmptyChunks を false に設定すると、この最適化が無効になります。

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

object string boolean

optimization.runtimeChunk を true または 'multiple' に設定すると、各エントリポイントにランタイムのみを含む追加のチャンクが追加されます。この設定は、以下のエイリアスです。

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};

値 'single' は、代わりに生成されたすべてのチャンクで共有されるランタイムファイルを作成します。この設定は、以下のエイリアスです。

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
  },
};

optimization.runtimeChunk を object に設定すると、ランタイムチャンクの名前または名前ファクトリを表す name プロパティのみを提供できます。

デフォルトは false です。各エントリチャンクにランタイムが埋め込まれます。

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
    },
  },
};

optimization.sideEffects

boolean = true string: 'flag'

webpack に、sideEffects フラグを package.json またはルールで認識し、エクスポートが使用されていない場合に副作用がないとフラグが立てられたモジュールをスキップするように指示します。

package.json

{
  "name": "awesome npm module",
  "version": "1.0.0",
  "sideEffects": false
}

optimization.sideEffects は、optimization.providedExports が有効になっていることに依存します。この依存関係にはビルド時間のコストがかかりますが、モジュールを削除するとコード生成が少なくなるため、パフォーマンスにプラスの影響があります。この最適化の効果はコードベースに依存するため、パフォーマンスが向上する可能性があるかどうかを試してみてください。

webpack.config.js

module.exports = {
  //...
  optimization: {
    sideEffects: true,
  },
};

手動フラグのみを使用し、ソースコードを分析しない場合

module.exports = {
  //...
  optimization: {
    sideEffects: 'flag',
  },
};

'flag' 値は、非プロダクションビルドでデフォルトで使用されます。

optimization.splitChunks

オブジェクト

デフォルトでは、webpack v4 以降では、動的にインポートされたモジュールに対して、新しい共通チャンク戦略がすぐに使用できます。この動作を構成するための利用可能なオプションについては、SplitChunksPlugin ページを参照してください。

optimization.usedExports

boolean = true string: 'global'

webpack に各モジュールで使用されているエクスポートを決定するように指示します。これは、optimization.providedExports に依存します。optimization.usedExports によって収集された情報は、他の最適化またはコード生成に使用されます。つまり、未使用のエクスポートに対してはエクスポートが生成されず、すべての使用が互換性がある場合はエクスポート名が単一の文字の識別子にマングルされます。ミニマイザーでのデッドコード除去は、この恩恵を受け、未使用のエクスポートを削除できます。

webpack.config.js

module.exports = {
  //...
  optimization: {
    usedExports: false,
  },
};

ランタイムごとの使用済みエクスポート分析をオプトアウトするには

module.exports = {
  //...
  optimization: {
    usedExports: 'global',
  },
};