新的打包工具 Rsbuild 尝鲜：Vue2-cli 项目迁移 Rsbuild

当前时间 2024-08-31

看到一个新的打包工具，于是想试一试，这里是官网

---

测试

用过 vue-cli 的同志们应该有所感受，启动项目挺慢的，我这个项目不太大，第一次启动是最慢的，之后启动快了一些些，而且也是编译了三四次，也花费了六七秒的时间（第一次的时间大概有10多秒，我没录下来）

再试试 rsbuild，用了不到 4s，不过对比第一次冷启动还是快了不少的

---

迁移过程

不同脚手架的项目迁移，具体参照的是 官网的迁移

因为我是 Vue2-cli 的项目，所以参考了下面的链接：

对于使用 Vue CLI 的项目，可以参考 Rsbuild - 从 Vue CLI 迁移

只是添加了一个 rsbuild.config.js 文件，还有添加了几个依赖包

我的 rsbuild.config.js 里主要配置了 pluginVue2 以及静态资源的 alias(路径别名)

什么是 alias ：路径别名（alias）允许开发者为模块定义别名，以便于在代码中更方便的引用它们。当你想要使用一个简短、易于记忆的名称来代替冗长复杂的路径时，这将非常有用。

// rsbuild.config.js
import { defineConfig } from "@rsbuild/core";
import { pluginVue2 } from "@rsbuild/plugin-vue2";
import path from "path";

export default defineConfig({
  html: {
    template: "./public/index.html",
  },
  plugins: [pluginVue2()],

  source: {
    // Specify the entry file
    entry: {
      index: "./src/main.js",
    },
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "/static": path.resolve(__dirname, "public/static"),
    },
  },
  output: {
    distPath: {
      root: 'build',
      js: 'resource/js',
    },
  },
});

新增的依赖也挺少的：

---

热更新

两者都还可以，一个0.1秒左右，一个 0.4秒左右

rsbuild 的热更新如下：

vue-cli-serve 热更新如下：

打包测试

同时打包：

感觉处理器资源会有抢夺，所以在试试分开打包：

vue-cli 的打包：

rsbuild 的打包：

速度大概是 8s vs 4.39s （只测了一轮）

体积是图片如下:

	打包速度	打包体积
Rsbuild	4.39s	7MB
Vue2-cli	8s	7.3MB

---

和之前的打包工具共存

因为是在尝鲜阶段，所以想着 vue-cli 和 rsbuild 共存，我测试了一下，当前组合是可以的

问题

Q1: 打包的时候报错： Cannot find module ‘webpack/lib/rules/BasicEffectRulePlugin’

 Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'

安装这个：

npm install vue-loader@latest