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 上编辑此页
上一页dev.hmr
下一页dev.liveReload

#dev.lazyCompilation

  • 类型:
type LazyCompilationOptions =
  | boolean
  | {
      /**
       * 为 entries 启用 lazy compilation
       */
      entries?: boolean;
      /**
       * 为 dynamic imports 启用 lazy compilation
       */
      imports?: boolean;
      /**
       * 指定哪些导入的模块应该被延迟编译
       */
      test?: RegExp | ((m: Module) => boolean);
      /**
       * 指定一个自定义的运行时代码路径,用于覆盖默认的 lazy compilation client
       */
      client?: string;
      /**
       * 指定 client 需要请求的 server URL
       */
      serverUrl?: string;
    };
  • 默认值:
const defaultOptions = {
  imports: true,
  entries: false,
};

用于开启 lazy compilation(即按需编译),基于 Rspack 的 lazy compilation 特性实现。

#介绍

尽管 Rspack 本身具备良好的性能,但是面对具有大量模块的应用,其整体构建时间仍然可能不够理想。这是因为应用中的模块需要经过不同 loader 的编译,包括 postcss-loader、sass-loader、vue-loader 等,它们都会产生额外的编译开销。

Lazy compilation 是一个提升开发阶段启动性能的有效手段,它采用按需编译模块的方式,而非在启动时编译全部模块。这意味着开发者在启动 dev server 时,可以很快看到应用运行,并分次构建所需的模块。通过这种按需编译的机制,可以减少不必要的编译时间,且随着项目规模的扩大,编译时间不会显著增长,从而大幅提升开发体验。

TIP

Lazy compilation 仅在开发阶段有效,对于生产构建不会产生影响。

#示例

#启用 Lazy compilation

rsbuild.config.ts
export default {
  dev: {
    lazyCompilation: true,
  },
};

这等价于以下配置:

rsbuild.config.ts
export default {
  dev: {
    lazyCompilation: {
      imports: true,
      // 如果只有一个入口,则 Rsbuild 默认不启用 entries 选项
      entries: true,
    },
  },
};

#入口模块

通过 lazyCompilation.entries 来控制是否 lazy 编译入口模块:

rsbuild.config.ts
export default {
  dev: {
    lazyCompilation: {
      entries: true,
    },
  },
};

在启用 entries 选项后,当你启动 dev server 时, Rsbuild 不会编译所有的页面,而是仅在访问特定的页面时,才对该页面进行编译。

lazy 编译入口模块时,有以下注意事项:

  • 只适用于多页应用(MPA),对单页应用(SPA)没有优化效果。
  • 当你访问一个页面时,你需要等待页面编译完成才能看到页面的内容。

#异步模块

通过 lazyCompilation.imports 来控制是否 lazy 编译 dynamic import 引入的异步模块:

rsbuild.config.ts
export default {
  dev: {
    lazyCompilation: {
      imports: true,
    },
  },
};

开启 imports 选项后,所有的异步模块只有在被请求时才触发编译。如果你的项目是一个单页应用(SPA),并通过 dynamic import 进行了路由拆分,那么 dev 启动时间会有明显提升。

#Server URL

通过 lazyCompilation.serverUrl 指定 client 需要请求的 server URL:

rsbuild.config.ts
export default {
  dev: {
    lazyCompilation: {
      serverUrl: 'http://localhost:<port>',
    },
  },
};
TIP

Rsbuild 会自动将 <port> 占位符替换为 server 实际监听的端口号。

#版本历史

版本变更内容
v1.3.0新增配置项
v1.5.0默认值由 false 改为当前值