Build Umi based on Rsbuild
English | 简体中文
支持使用Rsbuild作为Umi的bundler
- 十倍以上的构建性能提升;
- 保留Umi插件体系，无差别的使用体验
- 低成本切换，5分钟内完成Umi历史项目的迁移
Notice: Umi版本需要大于4.0.0
npm add @aumi/aumi@latest -S- import { defineConfig } from 'umi';
+ import {defineAUMIConfig} from "@aumi/aumi";
- export default defineConfig({
+ export default defineAUMIConfig({
...,
});.umirc.ts下的配置，因bundler兼容性，或未经过测试，不能够支持以下几个配置项
| 配置字段 | 无法使用原因 | 替换手段 |
|---|---|---|
| autoprefixer | 改用其他方式 | 1. 改用browserlist 2. 改用 .umirc.ts下的targets配置 |
| cssMinifier | 改用其他方式 | Rsbuild使用lightningcss, 可通过.umirc.ts下的minify来配置 |
| classPropertiesLoose | babel插件配置, Rsbuild使用swc | 通过.umirc.ts下的swcLoader配置swc的选项 |
| deadCode | webpack plugin, 暂未测试rspack兼容性 | 无 |
| depTranspiler | 用于指定使用esbuild等工具处理node_modules中符合条件的代码, 实际上@umijs/bundler-webpack没用到 | 无 |
| esbuildMinifyIIFE | 此字段用于修复 esbuild 压缩器自动引入的全局变量导致的命名冲突问题, 不需要使用 | 无 |
| extraBabelIncludes | 改为extraIncludes |
通过.umirc.ts下的extraIncludes |
| extraBabelPlugins | 不支持babel, 改为swcLoader配置支持 |
改用swcLoader配置, 具体详见Rsbuild |
| extraBabelPresets | 同上 | 同上 |
| exportStatic | 暂未支持与测试 | 无 |
| extraPostCSSPlugins | 改为postcssLoader配置 |
改用.umirc.ts下的postcssLoader, 类型参考Rsbuild |
| forget | 暂未支持与测试 | 无 |
| jsMinifier | 改为minify配置来支持 |
改用.umirc.ts下的minify来支持, 类型参考Rsbuid |
| jsMinifierOptions | 同上 | 同上 |
| legacy | 不支持 | 无 |
| mdx | 不支持 | 可通过chainWebpack自行配置 |
| mfsu | 暂未支持与测试 | 改为.umirc.ts下的新增配置moduleFederation来支持, 参考Rsbuild |
| runtimePublicPath | 使用RuntimePublicPathPlugin webpack插件, 暂未测试rspack兼容性 |
暂无 |
| srcTranspiler | 不支持, 默认使用swcLoader |
无 |
| srcTranspilerOptions | 同上 | 无 |
defineAUMIConfig方法，除去插件的配置TS类型无法提供之外，其余类型基于Rsbuild的类型，具有完善的TS类型
更改package.json下的scripts字段
{
"scripts": {
- "dev": "umi dev",
+ "dev": "aumi dev",
- "build": "umi build",
+ "build": "aumi build",
+ "analyze": "RSDOCTOR=true aumi build",
- "postinstall": "umi setup",
+ "postinstall": "aumi setup",
- "setup": "umi setup",
+ "setup": "aumi setup",
"start": "npm run dev"
}
}其中analyze代替UMI原有的analyze功能，使用Rsdoctor做分析功能
参考Umi的快速上手，新建一个项目；然后遵循上述迁移步骤进行变更
| 字段 | 默认值 | 作用 |
|---|---|---|
| rsbuildConfig | undefined | 完正的RsbuildConfig，优先级高于其他配置，会通过mergeRsbuildConfig与其他配置合并，类型参考Rsbuild |
| aliasStrategy | 'prefer-alias' | alias配置的优先级，参考 |
| transformImport | undefined | 能力类似babel-plugin-import，参考Rsbuild |
| react | 参考 | Rsbuild插件@rsbuild/plugin-react的配置 |
| rspack | undefined | 修改rspack的配置项，参考 |
Umi通过插件体系，提供了大量的自定义方法，可以在构建流程中使用（可查看Umi文档）。因bundler修改，部分底层构建流程与@umijs/bundler-webpack存在不一致的地方，因此去掉了部分自定义方法，如果在插件和构建流程中使用这些方法，则会报错，停止构建
去除了以下扩展方法，主要是babel相关
- addExtraBabelPresets
- addExtraBabelPlugins
- addBeforeBabelPresets
- addBeforeBabelPlugins
- modifyWebpackConfig
- modifyViteConfig
- modifyServerRendererPath
- modifyBabelPresetOpts
新增了以下扩展方法
modifyRsbuildPlugins: 用于修改Rsbuild插件
示例：
api.modifyRsbuildPlugins(plugins => {
return plugins.slice(1);
});modifyRsbuildConfig: 用于修改RsbuildConfig，优先级最高
示例：
api.modifyRsbuildConfig(config => {
config.root = './';
return config;
});TODO