什么是 Rspack
Rspack 是一个基于 Rust 的高性能 Web 构建工具,具备与 Webpack 生态系统的互操作性,可以被 Webpack 项目低成本集成,并提供更好的构建性能。
相较于 Webpack,Rspack 的构建性能有明显提升,除了 Rust 带来的语言优势,这也来自于它的并行架构和增量编译等特性。经过 benchmark 验证,Rspack 可以带来 5 ~ 10 倍编译性能的提升。
Modern.js 提供开箱即用的 Rspack 支持,你可以在成熟的 Webpack 和更快的 Rspack 之间进行切换。
这篇文档会向你介绍如何在 Modern.js 中开启 Rspack 构建模式。
Modern.js 生成器会提供一个可交互的问答界面,只需将构建工具选择为 Rspack,即可创建一个 Rspack 项目:
$ npx @modern-js/create myapp
? 请选择你想创建的工程类型:Web 应用
? 请选择开发语言:TS
? 请选择包管理工具:pnpm
? 请选择构建工具:Rspack
项目创建完成后,在项目中执行 pnpm run dev
即可体验项目,更多信息可参考快速上手。
TIP
在使用 Rspack 作为打包工具时,由于部分能力尚在开发中,以下 features 暂时无法使用,我们将在未来提供支持:
在一个已有的 Modern.js 项目中,你可以通过执行 pnpm run new
来启用 Rspack 构建:
$ pnpm run new
? 请选择你想要的操作:启用可选功能
? 启用可选功能:启用「Rspack 构建」
执行以上命令后,在 modern.config.ts
中添加 Rspack 相关配置即可:
import appTools, { defineConfig } from '@modern-js/app-tools';
+ export default defineConfig<'rspack'>({
plugins: [
appTools({
+ bundler: 'experimental-rspack',
}),
],
});
TIP
从 webpack 迁移至 Rspack 时,存在一些构建能力和配置上的差异,详情可参考:配置差异