最佳化

Webpack 會根據所選的 mode 為您執行最佳化，但所有最佳化都可手動設定和覆寫。

optimization.checkWasmTypes

布林值

指示 webpack 在匯入/匯出 WebAssembly 模組時檢查不相容的類型。預設情況下，optimization.checkWasmTypes 在 production mode 中啟用，在其他情況下則停用。

webpack.config.js

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

optimization.chunkIds

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

告訴 webpack 在選擇區塊 ID 時要使用哪種演算法。將 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 位數的 ID。若要覆寫預設行為，請將 optimization.chunkIds 設定為 false，並使用 webpack.ids.DeterministicChunkIdsPlugin。

webpack.config.js

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

optimization.concatenateModules

布林值

告訴 webpack 找出可以安全串接成單一模組的模組圖形區段。取決於 optimization.providedExports 和 optimization.usedExports。預設情況下，optimization.concatenateModules 在 production 模式 中啟用，在其他情況下則停用。

webpack.config.js

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

optimization.emitOnErrors

布林值 = false

使用 optimization.emitOnErrors 在編譯時發生錯誤時發射資產。這確保發射有錯誤的資產。重大錯誤會發射到產生的程式碼中，並會在執行時造成錯誤。

webpack.config.js

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

optimization.flagIncludedChunks

布林值

指示 webpack 判斷並標記為其他區塊子集的區塊，這樣當較大的區塊已載入時，就不必載入子集。預設情況下，optimization.flagIncludedChunks 在 production 模式 中啟用，在其他情況下則停用。

webpack.config.js

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

optimization.innerGraph

布林值 = true

optimization.innerGraph 告訴 webpack 是否對未使用的匯出執行內部圖形分析。

webpack.config.js

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

optimization.mangleExports

布林值 字串: 'deterministic' | 'size'

optimization.mangleExports 允許控制匯出混淆。

預設情況下，optimization.mangleExports: 'deterministic' 在 production 模式 中啟用，在其他情況下則停用。

支援下列值

webpack.config.js

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

optimization.mangleWasmImports

布林值 = false

設為 true 會指示 webpack 將 WASM 的大小縮小，方法是將匯入變更為較短的字串。它會混淆模組和匯出名稱。

webpack.config.js

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

optimization.mergeDuplicateChunks

布林值 = true

指示 webpack 合併包含相同模組的區塊。將 optimization.mergeDuplicateChunks 設為 false 會停用此最佳化。

webpack.config.js

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

optimization.minimize

布林值 = true

指示 webpack 使用 TerserPlugin 或 optimization.minimizer 中指定的外掛來最小化套件。

webpack.config.js

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

optimization.minimizer

[TerserPlugin] 和或 [function (compiler)] 或 undefined | null | 0 | false | ""

允許您透過提供一個或多個自訂的 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 預設設定值 的捷徑，否則 webpack 會為我們設定。

optimization.moduleIds

布林值: false 字串: 'natural' | 'named' | 'deterministic' | 'size'

告訴 webpack 在選擇模組 ID 時要使用哪種演算法。將 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

布林值 = false 字串

指示 webpack 將 process.env.NODE_ENV 設為指定字串值。除非設為 false，否則 optimization.nodeEnv 會使用 DefinePlugin。如果已設定，optimization.nodeEnv 預設為 模式，否則會回復為 'production'。

可能值

• 任何字串：要將 process.env.NODE_ENV 設為的值。
• false：不要修改/設定 process.env.NODE_ENV 的值。

webpack.config.js

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

optimization.portableRecords

布林值

optimization.portableRecords 指示 webpack 產生具有相對路徑的記錄，以便移動內容資料夾。

預設情況下，optimization.portableRecords 停用。如果提供給 webpack 設定的記錄選項中至少啟用一個，則會自動啟用：recordsPath、recordsInputPath、recordsOutputPath。

webpack.config.js

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

optimization.providedExports

布林值

指示 webpack 找出模組提供的輸出，以產生更有效率的 export * from ... 程式碼。預設情況下，optimization.providedExports 已啟用。

webpack.config.js

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

optimization.realContentHash

布林值 = true

在處理資產後，新增一個額外的雜湊編譯程序，以取得正確的資產內容雜湊。如果 realContentHash 設為 false，將使用內部資料計算雜湊，且當資產相同時，雜湊可能會變更。

webpack.config.js

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

optimization.removeAvailableModules

布林值 = false

當這些模組已包含在所有父項中時，會指示 webpack 偵測並從區塊中移除模組。將 optimization.removeAvailableModules 設為 true 會啟用此最佳化。

webpack.config.js

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

optimization.removeEmptyChunks

布林值 = 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 辨識 package.json 或規則中的 sideEffects 旗標，以略過標記為不包含副作用，且匯出未使用的模組。

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',
  },
};