vue2迁移至rsbuild

背景

由于远程机器配置较低，每次运行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-js

2. 安装rsbuild依赖

注意，这里是vue2的项目，使用rsbuild/plugin-vue2。Vue3项目使用rsbuild/plugin-vue。

npm add @rsbuild/core @rsbuild/plugin-vue2 -D

3. 安装其他插件依赖

项目使用了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

只能说大大提升了牛马的效率。