CC 4.0 协议声明

本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。

以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。

Optimization

优化:该选项用于自定义优化配置。你可以通过 optimization 来自定义优化配置。默认情况下,Rspack 会根据 mode 来选择合适的优化配置。

optimization.moduleIds

设置 Rspack 在生成模块 id 时使用的算法。

支持以下字符串值:

选项 描述
natural 根据模块加载的顺序使用自增数字作为模块 id。
named 使用有意义、方便调试的内容当作模块 id。
deterministic 使用对模块标识符哈希后的数字当作模块 id,有益于长期缓存。默认使用 3 位数字。
rspack.config.js
module.exports = {
  optimization: {
    moduleIds: 'deterministic',
  },
};

optimization.chunkIds

设置 Rspack 在生成 Chunk id 时使用的算法。

支持以下字符串值:

选项 描述
'natural' 根据 Chunk 加载的顺序使用自增数字作为 Chunk id。
'named' 使用有意义、方便调试的内容当作 Chunk id。
'deterministic' 简短的数字 id,在多次编译的场景下,会尽量保持其稳定性。适合长期缓存。默认使用 3 位数字。
'size' 使用让初始下载包大小更小的数字 id。
'total-size' 使用让总下载包大小更小的数字 id。
rspack.config.js
module.exports = {
  optimization: {
    chunkIds: 'deterministic',
  },
};

optimization.mergeDuplicateChunks

  • 类型: boolean
  • 默认值:true

是否合并重复的 chunks,将 optimization.mergeDuplicateChunks 设置成 false 来关闭该优化。

rspack.config.js
module.exports = {
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

是否使用 optimization.minimizer 中声明的压缩器对产物进行压缩。

rspack.config.js
module.exports = {
  optimization: {
    minimize: true,
  },
};

optimization.minimizer

  • 类型: Array<Plugin>
  • 默认值:[new SwcJsMinimizerRspackPlugin(), new LightningCssMinimizerRspackPlugin()]

自定义压缩器。默认使用 rspack.SwcJsMinimizerRspackPluginrspack.LightningCssMinimizerRspackPlugin

当设置了 optimization.minimizer 时,默认的压缩器会被禁用。

rspack.config.js
const TerserPlugin = require('terser-webpack-plugin');

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

使用 Rspack 内置的压缩器,并自定义压缩选项:

rspack.config.js
const rspack = require('@rspack/core');

module.exports = {
  optimization: {
    // 当声明了 `optimization.minimizer`,默认压缩器会被禁用
    // 但你可以配合使用 '...',它代表默认压缩器
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        minimizerOptions: {
          format: {
            comments: false,
          },
        },
      }),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: {
          errorRecovery: false,
        },
      }),
    ],
  },
};

optimization.removeEmptyChunks

  • 类型: boolean
  • 默认值:true

检测并移除打包过程中产生的空 Chunk。将 optimization.removeEmptyChunks 设置为 false 来禁用该优化。

rspack.config.js
module.exports = {
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

  • 类型: boolean | string | { name: string } | { name: (entrypoint: { name: string }) => string }
  • 默认值:false

用来控制 Rspack 的 runtime chunk 如何生成。

默认为 false,这意味着运行时代码会被内联到入口的 chunks 中。

设置为 true'multiple' 会为每个入口添加一个仅包含运行时的额外 chunk。该设置等同于:

rspack.config.js
module.exports = {
  optimization: {
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`,
    },
  },
};

设置为 'single' 会将所有入口的运行时代码抽离到一个单独的 chunk。该设置等同于:

rspack.config.js
module.exports = {
  optimization: {
    runtimeChunk: 'runtime',
  },
};

设置为对象时,可以提供 name 属性,该属性代表 runtime chunk 的名称。

rspack.config.js
module.exports = {
  optimization: {
    runtimeChunk: {
      // 这将生成一个名为 `my-name.js` 的 chunk
      name: 'my-name',
    },
  },
};
TIP

被导入的模块在每个 runtime chunk 中是单独初始化的,因此,如果你在单个页面中包含多个入口 chunks,请留意这种行为。你需要将 optimization.runtimeChunk 设置为 'single' 或使用其他配置,以保证页面仅包含一个 runtime 实例。

optimization.realContentHash

在产物处理完成后,添加额外的哈希计算步骤根据产物的文件内容计算该产物的哈希。该功能在生产环境下会默认开启。

如果将 realContentHash 设置为 false,则使用编译流程中的内部数据计算哈希,在某些情况下,即使产物内容完全一致也可能导致哈希变化。

rspack.config.js
module.exports = {
  //...
  optimization: {
    realContentHash: true,
  },
};

optimization.splitChunks

  • 类型: false | object

Rspack 支持通过 optimization.splitChunks 配置项来对 Chunk 进行拆分。

该优化选项默认情况下是开启的,你可以将其设为 false 来关闭它。

有关配置此行为的可用选项,请参见 SplitChunksPlugin 页面。

optimization.providedExports

  • 类型: boolean
  • 默认值:true

开启后 Rspack 将会分析模块提供哪些导出,包括重导出模块,引用模块不存在的导出时会发出提示。默认情况下,optimization.providedExports 已启用,该分析会增加构建时间,你可以考虑在 development 模式中关闭该配置,关闭后有可能会遇到SideEffects 章节运行时循环依赖的错误。

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

optimization.sideEffects

{
  "name": "npm module",
  "version": "1.0.0",
  "sideEffects": ["**/src/*.js"]
}

告诉 Rspack 识别 package.json 中的 sideEffects 标志或者 module.rules(模块配置中的规则),以跳过那些被标记为没有副作用但未被使用的模块。

TIP

请注意,如果你的项目需要使用 npm 模块的话,sideEffects 应该在 npm 模块的 package.json 文件中,并需要在你自己的项目的 package.json 中将 sideEffects 设置为 false

optimization.sideEffects 依赖于启用 optimization.providedExports。这在构建时会有一定的成本,但消除模块对性能有积极的影响,因为生成的代码更少。这个优化的效果取决于你的代码库,尝试使用它来获得可能的性能提升。

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

如果你只希望 Rspack 使用手动指定的 sideEffects 标志(通过 package.jsonmodule.rule.sideEffects),而不分析源代码,可以这样配置:

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

默认情况下,'flag' 值在非生产环境构建中使用。

TIP

optimization.sideEffectstrue 时,如果模块中只包含无副作用的语句,Rspack 也会将它们标记为无副作用。

optimization.usedExports

告诉 Rspack 对每个模块确定使用的导出。这取决于 optimization.providedExportsoptimization.usedExports 收集的信息被其他优化或代码生成使用,即不会为未使用的导出生成导出信息,当所有用法兼容时,导出名称会被缩短为单个字符标识符。压缩器中的死代码消除将受益于此,并且可以删除未使用的导出。

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

如果需要在运行时取消使用的导出分析:

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

optimization.mangleExports

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

支持以下选项:

option description
'named' 使用有意义且易于调试的内容作为标识符。在开发模式下,默认启用此选项。
'deterministic' 使用哈希模块标识符作为标识符,以便从长期缓存中受益。在生产模式下,默认启用此选项。
true 与 'deterministic' 相同。
false 保留原始名称。适用于可读性和调试。

optimization.innerGraph

optimization.innerGraph 告诉 Rspack 是否对变量传递进行更详细的分析,这有助于 Rspack 识别未使用的模块导出,从而减少打包产物的体积。

例如:

import { value } from 'lib';

const value2 = value;

function f1() {
  console.log(value);
}

function f2() {
  console.log(value2);
}

这里我们将 value 赋值给了 value2value2value 也分别在函数 f2f1 中被访问,但函数没有被调用,因此没有使用到 value2value,因此 value 的导入是可以被删除的。

optimization.concatenateModules

开启模块拼接优化,允许将多个模块拼接成单个模块以降低产物体积,提升压缩效率。此优化需要开启 optimization.providedExportsoptimization.usedExports。默认情况下,optimization.concatenateModulesproduction 模式下启用,其它模式则禁用。

optimization.nodeEnv

  • 类型: boolean | string
  • 默认值:false

Rspack 将 process.env.NODE_ENV 设置为给定的字符串。除非该值被明确设置为 false,否则 optimization.nodeEnv 将使用 DefinePluginoptimization.nodeEnv默认值mode,否则将设置为 'production'

可能的值:

  • 任意字符串:设置 process.env.NODE_ENV 的值。
  • false:不设置 process.env.NODE_ENV 的值。
rspack.config.js
module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};
TIP

mode 被设置为 'none' 时,optimization.nodeEnv 默认为 false

optimization.emitOnErrors

开启 optimization.emitOnErrors 时,即使编译过程中发生错误,Rspack 也会生成产物。这些错误会被注入到产物代码中,运行它们时会抛出错误。

rspack.config.js
module.exports = {
  optimization: {
    emitOnErrors: true,
  },
};