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