优化

Webpack 会根据你选择的 mode 运行优化，但所有优化都可用于手动配置和覆盖。

optimization.checkWasmTypes

boolean

指示 webpack 在导入/导出 WebAssembly 模块时检查不兼容的类型。默认情况下，optimization.checkWasmTypes 在 production 模式下启用，否则禁用。

webpack.config.js

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

optimization.chunkIds

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

指示 webpack 在选择 chunk ID 时使用哪种算法。将 optimization.chunkIds 设置为 false 会告诉 webpack 不应使用任何内置算法，因为可以通过插件提供自定义算法。optimization.chunkIds 有几个默认值

• 此外，如果环境是 development，则 optimization.chunkIds 设置为 'named'，而在 production 环境中则设置为 'deterministic'
• 如果以上都不是，optimization.chunkIds 将默认设置为 'natural'

支持以下字符串值

选项	描述
'natural'	按使用顺序排列的数字 ID。
'named'	可读的 ID，便于调试。
'deterministic'	短数字 ID，在编译之间不会改变。适合长期缓存。在 production 模式下默认启用。
'size'	专注于最小初始下载大小的数字 ID。
'total-size'	专注于最小总下载大小的数字 ID。

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 模式下启用，否则禁用。

webpack.config.js

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

optimization.emitOnErrors

boolean = false

使用 optimization.emitOnErrors 在编译期间出现错误时也发出资源。这确保了出错的资源也能被发出。关键错误会被发出到生成的代码中，并将在运行时导致错误。

webpack.config.js

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

optimization.avoidEntryIife

boolean = false

5.95.0+

使用 optimization.avoidEntryIife 避免在需要时将入口模块包装在 IIFE 中（在 JavascriptModulesPlugin 中搜索 "This entry needs to be wrapped in an IIFE because"）。此方法有助于优化 JavaScript 引擎的性能，并在构建 ESM 库时启用 tree shaking。

目前，optimization.avoidEntryIife 只能优化单个入口模块以及其他模块。

默认情况下，optimization.avoidEntryIife 在 production 模式下启用，否则禁用。

webpack.config.js

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

optimization.flagIncludedChunks

boolean

指示 webpack 确定并标记那些是其他 chunk 子集的 chunk，这样当更大的 chunk 已经被加载时，子集就不必再次加载。默认情况下，optimization.flagIncludedChunks 在 production 模式下启用，否则禁用。

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 模式下启用，否则禁用。

支持以下值

选项	描述
'size'	短名称——通常是一个字符——专注于最小化下载大小。
'deterministic'	短名称——通常是两个字符——在添加或删除导出时不会改变。适合长期缓存。
true	与 'deterministic' 相同
false	保留原始名称。有利于可读性和调试。

webpack.config.js

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

optimization.mangleWasmImports

boolean = false

当设置为 true 时，指示 webpack 通过将导入更改为更短的字符串来减小 WASM 的大小。它会混淆模块和导出名称。

webpack.config.js

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

optimization.mergeDuplicateChunks

boolean = true

指示 webpack 合并包含相同模块的 chunk。将 optimization.mergeDuplicateChunks 设置为 false 将禁用此优化。

webpack.config.js

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

optimization.minimize

boolean = true

指示 webpack 使用 TerserPlugin 或 optimization.minimizer 中指定的插件来最小化 bundle。

webpack.config.js

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

optimization.minimizer

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

允许你通过提供一个或多个自定义的 TerserPlugin 实例来覆盖默认的最小化工具。从 webpack 5.87.0 开始，可以使用 falsy 值有条件地禁用特定的最小化工具。

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'

指示 webpack 在选择模块 ID 时使用哪种算法。将 optimization.moduleIds 设置为 false 会告诉 webpack 不应使用任何内置算法，因为可以通过插件提供自定义算法。

支持以下字符串值

选项	描述
natural	按使用顺序排列的数字 ID。
named	可读的 ID，便于调试。
deterministic	模块名称被哈希成小的数值。
size	专注于最小初始下载大小的数字 ID。

webpack.config.js

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

deterministic 选项对于长期缓存很有用，但与 hashed 相比仍会生成更小的 bundle。数字值的长度选择为最多填充 80% 的 ID 空间。默认情况下，当 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

指示 webpack 将 process.env.NODE_ENV 设置为给定的字符串值。除非设置为 false，否则 optimization.nodeEnv 使用 DefinePlugin。如果设置了 mode，则 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），则会自动启用。

webpack.config.js

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

optimization.providedExports

boolean

指示 webpack 找出模块提供了哪些导出，以便为 export * from ... 生成更高效的代码。默认情况下，optimization.providedExports 是启用的。

webpack.config.js

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

optimization.realContentHash

boolean

在资源处理完毕后添加额外的哈希编译阶段，以获取正确的资源内容哈希。如果 realContentHash 设置为 false，则使用内部数据计算哈希，当资源相同时它可能会改变。默认情况下，optimization.realContentHash 在 production 模式下启用，否则禁用。

webpack.config.js

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

optimization.removeAvailableModules

boolean = false

指示 webpack 检测并从 chunk 中移除那些已经包含在所有父级中的模块。将 optimization.removeAvailableModules 设置为 true 将启用此优化。

webpack.config.js

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

optimization.removeEmptyChunks

boolean = true

指示 webpack 检测并移除空的 chunk。将 optimization.removeEmptyChunks 设置为 false 将禁用此优化。

webpack.config.js

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

optimization.runtimeChunk

object string boolean

将 optimization.runtimeChunk 设置为 true 或 'multiple' 会为每个入口点添加一个只包含运行时的额外 chunk。此设置是以下内容的别名：

webpack.config.js

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

值 'single' 则会创建一个运行时文件，供所有生成的 chunk 共享。此设置是以下内容的别名：

webpack.config.js

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

通过将 optimization.runtimeChunk 设置为 object，只能提供 name 属性，该属性代表运行时 chunk 的名称或名称工厂。

默认为 false：每个入口 chunk 都嵌入运行时。

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

object

默认情况下，webpack v4+ 为动态导入的模块提供了新的开箱即用的公共 chunk 策略。有关配置此行为的可用选项，请参阅 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',
  },
};