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

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

相关推荐
Boilermaker199219 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子31 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构