背景
由于远程机器配置较低，每次运行vue2项目都会非常卡。后期项目文件、路由更多的时候，启动到一半直接会跳出open too many files类似的错误，尝试将路由屏蔽掉只剩下开发所需的一个路由也不行（不是说webpack的打包是全部打包，不在路由里的文件也会编译么？？？）。只能想想其他办法了。
网上说改造方案有四种：
· Webpack+SWC 或 Webpack+Esbuild：速度虽然有所改善，但仍然基于 Webpack，整体优化空间有限。
· Vite：说是很快，但有许多使用 CommonJS 的引用，迁移成本太大。
· Rsbuild：Rust 版本的 Webpack，大部分 Webpack 配置都兼容，是首选。
· Turbopack：暂时不支持 Vue 等框架。
浅试了一下vite方案，启动有许多报错，先放弃。鉴于rsbuild兼容webpack，因此直接选用rsbuild方案。官方提供了一个简短的迁移指南，非常简短，只能作为基本参考（官方地址）。这里记录了一下详细的迁移过程，最终效果完美。各位看官敬请享用（不要吝啬点赞收藏哟）。
一、修改依赖
1. 移除vue-cli相关依赖
npm remove @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint core-js2. 安装rsbuild依赖
注意，这里是vue2的项目，使用rsbuild/plugin-vue2。Vue3项目使用rsbuild/plugin-vue。
npm add @rsbuild/core @rsbuild/plugin-vue2 -D3. 安装其他插件依赖
项目使用了sass样式，需要安装插件。修改package.json，在devDependencies中增加下列插件并npm i安装或者直接用npm i 插件 -D方式安装。
"@rsbuild/plugin-babel": "^1.0.3",
"@rsbuild/plugin-basic-ssl": "^1.1.1",
"@rsbuild/plugin-less": "^1.1.0",
"@rsbuild/plugin-node-polyfill": "^1.2.0",
"@rsbuild/plugin-sass": "^1.1.2",
"@rsbuild/plugin-vue2-jsx": "^1.0.3",二、修改文件
1. 修改package.json
{
"scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
+ "serve": "rsbuild dev",
+ "build": "rsbuild build",
+ "preview": "rsbuild preview"
}
}2.修改index.html
在 HTML 模板中，如果使用了 Vue CLI 的 BASE_URL 变量，请替换为 Rsbuild 的 assetPrefix 变量，并使用斜杠进行连接：
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <link rel="icon" href="<%= assetPrefix %>/favicon.ico">3.新增rsbuild.config.ts
在package.json同级目录下新建rsbuild.config.ts文件，并可以按如下配置添加内容：
其中pluginSass中配置了sass的全局变量文件；html指定了文档HTML模板位置；source entry指定了入口文件。
import { defineConfig,loadEnv } from '@rsbuild/core';
import path from "path";
import { pluginVue2 } from '@rsbuild/plugin-vue2';
import { pluginSass } from "@rsbuild/plugin-sass";
import { pluginNodePolyfill } from "@rsbuild/plugin-node-polyfill";
const { publicVars } = loadEnv({ prefixes: ["VUE_APP_"] });
export default defineConfig({
plugins: [pluginVue2(),
pluginNodePolyfill(),
pluginSass({
sassLoaderOptions: {
additionalData: `@import "@/style/variable.scss";`
},
}),
],
html: {
template: "./public/index.html",
},
source: {
// 指定入口文件
entry: {
index: './src/main.js',
},
define: publicVars,
},
tools: {
rspack: {
resolve: {
extensions: [".vue", ".js", ".jsx", ".tsx", ".ts", ".json"],
alias: {
"@": path.resolve(__dirname, "src"),
},
},
},
},
server: {
port: 8080,
}
});三、注意
1.webpack
启动项目时报错找不到webpack/lib/rules/BasicEffectRulePlugin模块（相关issue）。
[rsbuild-cli] Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'【解决】在项目中重新安装webpack5模块，我这里安装的是"webpack": "^5.97.1"。
2.sass样式
项目使用了sass中的全局变量，在迁移到rsbuild启动时会报错。需要在配置文件中配置全局变量文件。可以在每个Sass文件编译前自动引入全局Sass变量。这样做可以确保项目中的所有组件都能访问这些全局定义的Sass变量。
pluginSass({
sassLoaderOptions: {
additionalData:`@import "@/style/variable.scss";`
},
}),3.Require方式引入
代码中有require方式引入资源或者文件，需要安装并引入plugin-node-polyfill插件。
四、性能对比
电脑配置 windows10 64G内存 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
1.首次启动
Webpack 启动 105 s，热重启 11.8 s
Rsbuild 启动 11.7 s，热重启 0.5 s
2.打包
webpack 耗时75s
rsbuild 耗时31s
只能说大大提升了牛马的效率。
