将绑定到小型原始常量（null、undefined、boolean、number 或最多 6 字节的 string）的 ESM 导出在每个导入位置内联，用字面量值替换导入的绑定。一旦所有导入都被替换，导入依赖变为非活跃状态，导出变为未使用，死代码消除可以删除该导出，并且如果模块没有副作用，整个模块也会被删除。

optimization.inlineExports 的默认值取决于 mode：

webpack.config.js

export default {
  // ...
  optimization: {
    inlineExports: true,
  },
};

这分两步进行。给定以下模块：

// flags.js
export const DEBUG = false; // 一个 ≤6 字节的布尔值

// app.js
import { DEBUG } from "./flags.js";

if (DEBUG) doSomething();

首先，每个对导入绑定的引用都被替换为其字面量值（内联）：

{/* eslint-skip */}

// app.js（概念结果）
if (false) doSomething();

然后，由于没有导入再引用 DEBUG，export const DEBUG 变为未使用，死代码消除会将其删除。如果 flags.js 没有副作用，整个模块也会被移除。消费代码还可以进一步折叠现在为常量的分支（if (false) ...）。

T> 只有小型原始常量会被内联：null、undefined、boolean、number 或最多 6 字节的 string。对象、数组和较长的字符串会保留为常规导出。

内联还实现了跨模块死分支跳过：当导入的常量可以静态内联时，webpack 会评估守卫分支的条件，并跳过仅存在于可证明为死分支中的依赖（ESM 导入说明符、require() 调用和动态 import() 调用），因此不可达的模块永远不会被添加到 bundle 中。

// env.js
export const isDEV = false;

// app.js
import { devOnly } from "./dev-tools";
import { isDEV } from "./env";
import { prodOnly } from "./prod-tools";

export const tools = isDEV ? devOnly : prodOnly;

因为 isDEV 内联为 false，devOnly 分支是死分支，所以 ./dev-tools 永远不会被打包。对于仅存在于死分支中的 require() 和动态 import() 调用也是如此。

T> 支持的守卫形式包括三元表达式（isDEV ? A : B）、if 语句，以及 &&、||、?? 和 ! 运算符，包括嵌套组合。

optimization.mangleExports

boolean string: 'deterministic' | 'size'

optimization.mangleExports 允许控制导出名的混淆。

optimization.mangleExports 的默认值取决于 mode：

支持以下值：

webpack.config.js

export default {
  // ...
  optimization: {
    mangleExports: true,
  },
};

optimization.mangleWasmImports

boolean = false

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

webpack.config.js

export default {
  // ...
  optimization: {
    mangleWasmImports: true,
  },
};

optimization.mergeDuplicateChunks

boolean = true

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

webpack.config.js

export default {
  // ...
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

boolean

告诉 webpack 使用 MinimizerPlugin 或 optimization.minimizer 中指定的插件来压缩 bundle。

optimization.minimize 的默认值取决于 mode：

webpack.config.js

export default {
  // ...
  optimization: {
    minimize: false,
  },
};

T> 了解 mode 是如何工作的。

optimization.minimizer

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

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

webpack.config.js

import MinimizerPlugin from "minimizer-webpack-plugin";

export default {
  optimization: {
    minimizer: [
      new MinimizerPlugin({
        parallel: true,
        minimizerOptions: {
          // https://github.com/webpack/minimizer-webpack-plugin#minimizeroptions
        },
      }),
    ],
  },
};

或者，作为函数：

import MinimizerPlugin from "minimizer-webpack-plugin";

export default {
  optimization: {
    minimizer: [
      (compiler) => {
        new MinimizerPlugin({
          /* 你的配置 */
        }).apply(compiler);
      },
    ],
  },
};

默认情况下，webpack 会将 optimization.minimizer 设置为以下值：

import MinimizerPlugin from "minimizer-webpack-plugin";

const minimizer = [
  {
    apply: (compiler) => {
      new MinimizerPlugin({
        minimizerOptions: {
          compress: {
            passes: 2,
          },
        },
      }).apply(compiler);
    },
  },
];

当你想在自定义 optimization.minimizer 时保留默认配置，可以使用 '...' 来访问它：

export default {
  optimization: {
    minimizer: [new CssMinimizer(), "..."],
  },
};

基本上，'...' 是访问 webpack 默认配置值的快捷方式，否则 webpack 会为我们设置该值。

optimization.moduleIds

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

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

optimization.moduleIds 的默认值取决于 mode：

支持以下字符串值：

webpack.config.js

export default {
  // ...
  optimization: {
    moduleIds: "deterministic",
  },
};

deterministic 选项适用于长期缓存，但与 hashed 相比，仍然会产生更小的 bundle。数字值的长度选择为填充 ID 空间的最大 80%。默认情况下，当 optimization.moduleIds 设置为 deterministic 时，会使用至少 3 位数字。要覆盖默认行为，请将 optimization.moduleIds 设置为 false，并使用 webpack.ids.DeterministicModuleIdsPlugin。

webpack.config.js

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

W> moduleIds: 'deterministic' 是在 webpack 5 中添加的，moduleIds: 'hashed' 已被弃用，推荐使用前者。

W> moduleIds: total-size 已在 webpack 5 中移除。

optimization.nodeEnv

boolean: false string

告诉 webpack 将 process.env.NODE_ENV 设置为给定的字符串值。optimization.nodeEnv 使用 DefinePlugin，除非设置为 false。

optimization.nodeEnv 的默认值取决于 mode：

可能的值：

• 任何字符串：要设置的 process.env.NODE_ENV 的值。
• false：不修改/设置 process.env.NODE_ENV 的值。

webpack.config.js

export default {
  // ...
  optimization: {
    nodeEnv: "production",
  },
};

T> 当 mode 设置为 'none' 时，optimization.nodeEnv 默认为 false。

optimization.portableRecords

boolean

optimization.portableRecords 告诉 webpack 生成带有相对路径的 records，以便能够移动上下文文件夹。

默认情况下 optimization.portableRecords 是禁用的。如果 webpack 配置中提供了至少一个 records 选项，则会自动启用：recordsPath、recordsInputPath、recordsOutputPath。

webpack.config.js

export default {
  // ...
  optimization: {
    portableRecords: true,
  },
};

optimization.providedExports

boolean

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

webpack.config.js

export default {
  // ...
  optimization: {
    providedExports: false,
  },
};

optimization.realContentHash

boolean

在资源被处理后增加一次额外的哈希编译过程，以获取正确的资源内容哈希。如果 realContentHash 设置为 false，则使用内部数据来计算哈希，并且当资源相同时，哈希可能会发生变化。

optimization.realContentHash 的默认值取决于 mode：

webpack.config.js

export default {
  // ...
  optimization: {
    realContentHash: false,
  },
};

optimization.removeAvailableModules

boolean = false

告诉 webpack 当某些模块已经包含在所有父级中时，检测并从 chunk 中移除这些模块。将 optimization.removeAvailableModules 设置为 true 将启用此优化。

webpack.config.js

export default {
  // ...
  optimization: {
    removeAvailableModules: true,
  },
};

W> optimization.removeAvailableModules 会降低 webpack 的性能。

optimization.removeEmptyChunks

boolean = true

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

webpack.config.js

export default {
  // ...
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

object string boolean

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

webpack.config.js

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

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

webpack.config.js

export default {
  // ...
  optimization: {
    runtimeChunk: {
      name: "runtime",
    },
  },
};

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

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

W> 导入的模块会为每个运行时 chunk 单独初始化，因此如果你在页面上包含多个入口点，请注意此行为。你可能希望将其设置为 single，或使用其他允许你只有一个运行时实例的配置。

webpack.config.js

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

optimization.sideEffects

boolean string: 'flag'

告诉 webpack 识别 package.json 或 rules 中的 sideEffects 标志，以跳过那些被标记为没有副作用且导出未被使用的模块。

package.json

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

T> 请注意，sideEffects 应该放在 npm 模块的 package.json 文件中，这并不意味着你需要在你自己项目的 package.json 中将 sideEffects 设置为 false，该项目依赖的是那个大型模块。

optimization.sideEffects 依赖于启用 optimization.providedExports。这种依赖会带来构建时间的开销，但消除模块会对性能产生积极影响，因为减少了代码生成。此优化的效果取决于你的代码库，可以尝试以获得可能的性能提升。

optimization.sideEffects 的默认值取决于 mode：

webpack.config.js

export default {
  // ...
  optimization: {
    sideEffects: true,
  },
};

仅使用手动标志而不分析源代码：

export default {
  // ...
  optimization: {
    sideEffects: "flag",
  },
};

T> 当模块只包含无副作用的语句时，optimization.sideEffects 也会将它们标记为无副作用。

optimization.splitChunks

object

默认情况下，webpack v4+ 为动态导入的模块提供了新的公共 chunk 策略。有关配置此行为的可用选项，请参阅 SplitChunksPlugin 页面。

optimization.usedExports

boolean string: 'global'

告诉 webpack 确定每个模块的已使用导出。这依赖于 optimization.providedExports。optimization.usedExports 收集的信息被其他优化或代码生成所使用，例如：不会为未使用的导出生成导出语句，当所有用法都兼容时，导出名称会被混淆为单字符标识符。压缩器中的死代码消除会受益于此，并且可以移除未使用的导出。

optimization.usedExports 的默认值取决于 mode：

webpack.config.js

export default {
  // ...
  optimization: {
    usedExports: false,
  },
};

选择在每个运行时中退出已使用导出分析：

export default {
  // ...
  optimization: {
    usedExports: "global",
  },
};