当前时间 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
