背景

????????由于遠程機器配置較低，每次運行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

只能說大大提升了牛馬的效率。