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相关依赖

javascript 复制代码

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。

javascript 复制代码

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

3. 安装其他插件依赖

项目使用了sass样式，需要安装插件。修改package.json，在devDependencies中增加下列插件并npm i安装或者直接用npm i 插件 -D方式安装。

javascript 复制代码

 "@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

javascript 复制代码

{
  "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 变量，并使用斜杠进行连接：

javascript 复制代码

-  <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指定了入口文件。

javascript 复制代码

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）。

javascript 复制代码

[rsbuild-cli] Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'

【解决】在项目中重新安装webpack5模块，我这里安装的是"webpack": "^5.97.1"。

2.sass样式

项目使用了sass中的全局变量，在迁移到rsbuild启动时会报错。需要在配置文件中配置全局变量文件。可以在每个Sass文件编译前自动引入全局Sass变量‌。这样做可以确保项目中的所有组件都能访问这些全局定义的Sass变量。

javascript 复制代码

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

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