CC 4.0 许可证

本节内容源于以下链接的内容,并受 CC BY 4.0 许可证的约束。

除非另有说明,否则以下内容可以被认为是基于原始内容的修改和删除的结果。

优化

Rspack 会根据 mode 选择合适的优化配置。您也可以通过 optimization 自定义配置。

optimization.moduleIds

  • 类型: 'natural' | 'named' | 'deterministic'
选项 描述
natural 按使用顺序使用数字 ID。
named 使用有意义的、易于调试的内容作为 ID。此选项在开发模式下默认启用。
deterministic 使用哈希模块标识符作为 ID,以从长期缓存中获益。此选项在生产模式下默认启用。

optimization.chunkIds

  • 类型: 'named' | 'deterministic'
选项 描述
'named' 可读的 ID,便于调试。此选项在开发模式下默认启用。
'deterministic' 短的数字 ID,在编译之间不会改变。适合长期缓存。此选项在生产模式下默认启用。

optimization.minimize

是否最小化捆绑包。

optimization.mergeDuplicateChunks

  • 类型: boolean
  • 默认值:true

是否合并包含相同模块的块。将 optimization.mergeDuplicateChunks 设置为 false 将禁用此优化。

optimization.minimizer

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

自定义最小化器。默认情况下,使用 rspack.SwcJsMinimizerRspackPluginrspack.LightningCssMinimizerRspackPlugin。当指定 optimization.minimizer 时,默认最小化器将被禁用。

rspack.config.js
const terserPlugin = require('terser-webpack-plugin');
module.exports = {
  context: __dirname,
  target: 'node',
  entry: {
    main: './index.js',
  },
  optimization: {
    minimize: true,
    minimizer: [new terserPlugin()],
  },
};

使用内置最小化器,并使用自定义选项

rspack.config.js
const rspack = require('@rspack/core');
module.exports = {
  // ...
  optimization: {
    minimize: process.env.NODE_ENV === 'production',
    // when `optimization.minimizer` is specified, the default minimizers are disabled by default
    // but you can use '...', it represents the default minimizers
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        minimizerOptions: {
          format: {
            comments: false,
          },
        },
      }),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: {
          errorRecovery: false,
        },
      }),
    ],
  },
};

optimization.removeEmptyChunks

  • 类型: boolean
  • 默认值:true

删除编译中生成的空块。

optimization.runtimeChunk

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

用于控制运行时块的生成方式。

将其设置为 true'multiple' 将为每个入口点添加一个额外的块,该块仅包含运行时。

将其设置为 'single' 将将所有入口点的运行时代码提取到一个单独的块中。

optimization.realContentHash

在资产处理完后添加一个额外的哈希编译阶段,以获取正确的资产内容哈希值。此功能在生产模式下将默认启用。

如果将 realContentHash 设置为 false,则将使用内部数据来计算哈希值,并且在某些情况下,当资产完全相同时,哈希值可能会发生变化。

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

optimization.splitChunks

  • 类型: false | object

Rspack 支持使用 optimization.splitChunks 配置项拆分块。

它默认情况下对动态导入的模块启用。

要关闭它,请将其设置为 false

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

optimization.sideEffects

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

告诉 Rspack 识别 package.json 或规则中的 sideEffects 标志,以跳过那些被标记为当导出未被使用时不包含副作用的模块。

提示

请注意,sideEffects 应该位于 npm 模块的 package.json 文件中,并不意味着您需要在自己的项目的 package.json 中将 sideEffects 设置为 false,而该项目需要该 npm 模块。

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' 值在非生产构建中默认使用。

提示

optimization.sideEffects 为 true 时,Rspack 还会将包含只有无副作用语句的模块标记为无副作用。

optimization.providedExports

  • 类型: boolean
  • 默认值:true

启用后,Rspack 将分析模块提供的导出,包括重新导出的模块。当导入引用不存在的导出的成员时,将发出警告或错误。默认情况下,optimization.providedExports 已启用。此分析会增加构建时间。您可能考虑在开发模式下禁用此配置。禁用它可能会导致与运行时循环依赖相关的错误,如 SideEffects 部分 中所述。

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

optimization.usedExports

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

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

要选择退出每个运行时的使用导出分析

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

optimization.mangleExports

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

支持以下值

选项 描述
'named' 使用有意义的、易于调试的内容作为 id。此选项在开发模式下默认启用
'deterministic' 使用哈希的模块标识符作为 id,以从长期缓存中获益。此选项在生产模式下默认启用
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

告诉 Rspack 查找模块图中可以安全地连接到单个模块的段。取决于 optimization.providedExportsoptimization.usedExports。默认情况下,optimization.concatenateModulesproduction 模式下启用,而在其他模式下禁用。

optimization.nodeEnv

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

告诉 Rspack 将 process.env.NODE_ENV 设置为给定的字符串值。optimization.nodeEnv 使用 DefinePlugin,除非设置为 false。optimization.nodeEnv 默认值mode(如果设置),否则回退到 'production'

可能的值

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

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

optimization.emitOnErrors

使用 optimization.emitOnErrors 在编译时出现错误时始终发出资产。这将确保发出有错误的资产。严重错误将被发出到生成的代码中,并且将在运行时导致错误。