最適化

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

optimization.checkWasmTypes

布尔值

当导入/导出 WebAssembly 模块时，告诉 webpack 检查不兼容的类型。默认情况下，optimization.checkWasmTypes 在 production 模式 下启用，在其他情况下禁用。

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 位的数字。若要覆盖默认行为，请将 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 会为我们设置。

optimization.moduleIds

布尔值：false 字符串：'natural' | 'named' | 'deterministic' | 'size'

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

支持以下字符串值

webpack.config.js

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

deterministic 选项对于长期缓存很有用，但与 hashed 相比，它仍然会生成较小的包。数字值的长度被选为最多填充 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 设置为给定的字符串值。optimization.nodeEnv 使用 DefinePlugin，除非将其设置为 false。如果设置了 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',
  },
};