close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 在 GitHub 上编辑此页
上一页performance.bundleAnalyze
下一页performance.dnsPrefetch

#performance.chunkSplit

  • 类型: ChunkSplit
  • 默认值: { strategy: 'split-by-experience' }

performance.chunkSplit 用于配置 Rsbuild 的拆包策略。

TIP

请参考 代码拆分 来了解完整的用法。

#chunkSplit.strategy

Rsbuild 支持设置以下几种拆包策略:

  • split-by-experience: 根据经验制定的拆分策略,自动将一些常用的 npm 包拆分为体积适中的 chunk。
  • split-by-module: 按 npm 包的粒度拆分,每个 npm 包对应一个 chunk。
  • split-by-size:根据模块大小自动进行拆分。
  • all-in-one:将所有代码全部打包到一个 chunk 中。
  • single-vendor:将所有 npm 包的代码打包到一个单独的 chunk 中。
  • custom: 自定义拆包配置。

#类型定义

performance.chunkSplit 的类型定义如下:

type ForceSplitting = RegExp[] | Record<string, RegExp>;

interface BaseChunkSplit {
  strategy?:
    | 'split-by-module'
    | 'split-by-experience'
    | 'all-in-one'
    | 'single-vendor';
  override?: Rspack.OptimizationSplitChunksOptions;
  forceSplitting?: ForceSplitting;
}

interface SplitBySize extends BaseSplitRules {
  strategy: 'split-by-size';
  minSize?: number;
  maxSize?: number;
}

interface SplitCustom extends BaseSplitRules {
  strategy: 'custom';
  splitChunks?: SplitChunks;
}

type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;

#默认策略

Rsbuild 默认采用 split-by-experience 策略,如果你想使用其他拆包策略,可以通过 strategy 选项来指定,比如:

export default {
  performance: {
    chunkSplit: {
      strategy: 'all-in-one',
    },
  },
};

#chunkSplit.minSize

  • 类型: number
  • 默认值: 10000

当 chunkSplit.strategy 为 split-by-size 时,可以通过 chunkSplit.minSize 配置项来指定 chunk 的最小大小,单位为字节。默认值为 10000。比如:

export default {
  performance: {
    chunkSplit: {
      strategy: 'split-by-size',
      minSize: 20000,
    },
  },
};

#chunkSplit.maxSize

  • 类型: number
  • 默认值: Number.POSITIVE_INFINITY

当 chunkSplit.strategy 为 split-by-size 时,可以通过 chunkSplit.maxSize 配置项来指定 chunk 的最大大小,单位为字节。默认值为 Number.POSITIVE_INFINITY。比如:

export default {
  performance: {
    chunkSplit: {
      strategy: 'split-by-size',
      maxSize: 50000,
    },
  },
};

#chunkSplit.forceSplitting

  • 类型: RegExp[] | Record<string, RegExp>
  • 默认值: []

通过 chunkSplit.forceSplitting 配置项可以将指定的模块强制拆分为一个独立的 chunk。

比如将 node_modules 下的 axios 库拆分到 axios.js 中:

export default {
  performance: {
    chunkSplit: {
      forceSplitting: {
        axios: /node_modules[\\/]axios/,
      },
    },
  },
};

相比直接配置 Rspack 的 splitChunks,这是一个更加简便的方式。

TIP

注意,通过 forceSplitting 配置拆分的 chunk 会通过 <script> 标签插入到 HTML 文件中,作为首屏请求的资源。因此,请根据实际场景来进行适当地拆分,避免首屏资源体积过大。

#chunkSplit.splitChunks

当 chunkSplit.strategy 为 custom 时,可以通过 chunkSplit.splitChunks 配置项来指定自定义的 Rspack 拆包配置。此配置会和 Rspack 的 splitChunks 配置进行合并(cacheGroups 配置也会合并)。比如:

export default {
  performance: {
    chunkSplit: {
      strategy: 'custom',
      splitChunks: {
        cacheGroups: {
          react: {
            test: /node_modules[\\/](react|react-dom)[\\/]/,
            name: 'react',
            chunks: 'all',
          },
        },
      },
    },
  },
};

#chunkSplit.override

当 chunkSplit.strategy 为 split-by-experience、split-by-module、split-by-size 或 single-vendor 时,可以通过 chunkSplit.override 配置项来自定义 Rspack 拆包配置,此配置会和 Rspack 的 splitChunks 配置进行合并(cacheGroups 配置也会合并)。比如:

export default {
  performance: {
    chunkSplit: {
      override: {
        cacheGroups: {
          react: {
            test: /node_modules[\\/](react|react-dom)[\\/]/,
            name: 'react',
            chunks: 'all',
          },
        },
      },
    },
  },
};

#产物类型

performance.chunkSplit 仅在 output.target 为 web 时生效。这意味着,当 output.target 为 node 或 web-worker 时,performance.chunkSplit 配置项不会生效。

通常 Node bundles 不需要通过 split chunks 来优化加载性能,如果你需要对 Node bundles 进行拆包,可以使用 tools.rspack 来配置 Rspack 的 optimization.splitChunks 选项:

export default {
  tools: {
    rspack: {
      optimization: {
        splitChunks: {
          // options
        },
      },
    },
  },
};