我把大型团队项目从 vite 前端迁移到了 rsbuild，收益如何？

o翔哥o2024-10-15 20:26

背景

我们团队的项目一直是使用 vite 作为打包工具的，由于 vite 开发环境和生产环境的打包策略不同（开发环境按需打包，生产环境全量打包），所以存在开发环境和线上环境打包产物表现不一致的风险。其中 css 样式不一致的问题尤为容易发生，目前在需求开发过程中，已多次遇到本地开发环境 css 样式符合 UI 稿，发布到测试环境或者线上之后就出现了差异的场景。

基于上述背景，我们期望迁移至一款开发和生产环境打包产物一致的工具。

方案调研

除上述背景外，我们期望的打包工具还应该满足以下特性：

  • 开发和生产环境打包产物一致
  • 打包性能优异
  • 生态良好、项目足够稳定
  • 迁移成本较低

要满足打包性能优异的特性，除 vite 外，我们的打包工具范围最终锁定在由 rust 开发项目内：

Turbopack Farm Rsbuild（基于rspack）
产物一致性 ❌ 不一致 ✅ 一致 ✅ 一致
打包性能 ✅ 快 ✅ 快 ✅ 快
生态及稳定性 ❌ 全新生态，生态链较差 ✅ 兼容 vite 插件(先试验了下 farm，遇到的坑太多了且解决不了，根据 github 的用户数以及 npm 下载量，感觉目前尚未达到稳定可用状态) ✅ 兼容 webpack 插件且已有众多线上项目验证
迁移成本 ❌ 高(没有对应的插件) ❌ 高(踩坑太多且无解决思路，应该是farm本身的坑) ✅ 中

经过调研和实践，最终选定 rsbuild 作为最终的工具。

最终收益

  • 打包时长：300s 左右 > 60s 左右，性能提升大概 400% 左右

    • 迁移前 vite 打包时长：292s
    • 迁移后 webpack 打包时长：66s

  • 流水线构建时长：360s 左右 > 130s 左右，减少 150%（整条流水线上除了打包之外，还有拉代码仓库、代码质量检测、安装依赖、上传 CDN 等其他工作，而构建工具只是减少了打包这一阶段的工作时长，但打包依然是占最大头的，所以收益还是很明显）

  • 冷启动时长：

    • 首页面渲染：10s 左右 > 25s 左右（这里指的是从执行 npm run dev 到页面渲染出内容的时长）
    • 其他页面首次切换：5s 左右 > 1s 内（vite 由于资源是按需加载，在加载其他页面时需要对新页面资源进行 esbuild 构建，所以会慢）

    可以看到首屏冷启动时长性能有比较大的劣化，这是因为 vite 是根据页面按需资源打包，而 rsbuild 是全量打包。（但全量打包目前应该是解决开发和生产产物不一致的必要条件，为解决我们的背景问题必不可少）

    冷启动时长综合对比，如果在开发过程中切换页面比较多的话，最终的等待时长 rspack 会胜于 vite；如果只关注于一个页面的开发，vite 这方面占优

  • 热更新：0.5s 内 > 1.5s 内（都是很低的数值，体感没有差别）

  • 资源分包数：以我们项目的首屏为例，可以看到 rsbuild 的分包策略要由于 vite（打包总体积几乎无变化的情况下，分包数少了很多）：

    • css 文件数: 38项 > 9 项
    • js 文件数：81项 > 55 项

迁移过程及踩坑

安装相关依赖

安装 rsbuild 核心包：

sql 复制代码 
yarn add @rsbuild/core @rsbuild/plugin-babel @rsbuild/plugin-less @rsbuild/plugin-sass @rsbuild/plugin-vue @rsbuild/plugin-vue-jsx -D

其他插件根据自己项目的需要进行安装，可以在 rsbuild 官网找到。常用的有：

less 复制代码 
@rsbuild/plugin-babel
@rsbuild/plugin-less
@rsbuild/plugin-sass
@rsbuild/plugin-vue
@rsbuild/plugin-vue-jsx

更改打包配置文件

下面是以我们的项目为例（一些敏感代码没有在上面展示），将 vite.config.ts 迁移到 rsbuild.config.ts ，可以进行参考：

  • vite.config.ts：

    ts 复制代码 
    import { defineConfig, loadEnv, UserConfigExport } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import Inspect from 'vite-plugin-inspect';
import AutoImport from 'unplugin-auto-import/vite';
import { codeInspectorPlugin } from 'code-inspector-plugin';
import path from 'path';

const isProduction = env => env === 'production';
const cdn = 'https://xxx.com/xyz/';

export default ({ mode }: { mode: string }): UserConfigExport =>
    defineConfig({
        base: isProduction(mode) ? cdn : '/',
        plugins: [
            vue(),
            vueJsx(),
            codeInspectorPlugin({
                bundler: 'vite',
            }), // 开发环境 Meta + shift 切换开启/关闭，点击 dom 跳转源代码
            AutoImport({
                imports: ['vue', 'vue-router'],
                dts: 'src/auto-import.d.ts',
            }),
        ],
        resolve: {
            alias: [
                {
                    find: '@',
                    replacement: path.resolve(__dirname, './src'),
                },
            ],
        },
        server: {
            host: '0.0.0.0',
            port: 4000,
            open: true,
            cors: true,
            proxy: {
                '/api/': {
                    target: loadEnv(mode, process.cwd()).VITE_APP_HOST, // 转发域名
                    changeOrigin: true,
                    headers: {
                        referer: loadEnv(mode, process.cwd()).VITE_APP_REFERER,
                        host: loadEnv(mode, process.cwd()).VITE_APP_HOST,
                        Cookie: loadEnv(mode, process.cwd()).VITE_APP_COOKIE, // 转发
                    },
                },
            },
        }
    });

  • rsbuild.config.ts：

    ts 复制代码 
    import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginLess } from '@rsbuild/plugin-less';
import AutoImport from 'unplugin-auto-import/rspack';
import { codeInspectorPlugin } from 'code-inspector-plugin';
import path from 'path';


const isProduction = env => env === 'production';
const cdn = 'https://xxxx.com/xyz/';

const { VITE_APP_HOST, VITE_APP_COOKIE, VITE_APP_REFERER } = import.meta.env;

export default defineConfig(({ env }) => ({
    output: {
        assetPrefix: isProduction(env) ? cdn : '/',
        distPath: {
            root: 'dist',
            html: './',
            js: './',
            jsAsync: './',
            css: 'assets',
            cssAsync: 'assets',
            svg: 'assets',
            font: 'assets',
            image: 'assets',
            media: 'assets',
        },
        sourceMap: {
            js: isProduction(env) ? 'source-map' : 'cheap-module-source-map',
            css: true,
        },
    },
    plugins: [
        pluginLess({
            lessLoaderOptions: {
                lessOptions: {
                    javascriptEnabled: false,
                },
                implementation: require.resolve('less'),
            },
        }),
        pluginBabel({
            include: /.(?:jsx|tsx)$/,
        }),
        pluginVue(),
        pluginVueJsx(),
    ],
    tools: {
        htmlPlugin: {
            template: './index.html',
        },
        rspack: {
            plugins: [
                AutoImport({
                    imports: ['vue', 'vue-router'],
                    dts: 'src/auto-import.d.ts',
                }),
                codeInspectorPlugin({
                    bundler: 'rspack',
                }),
            ],
            module: {
                rules: [
                    {
                        resourceQuery: /raw/,
                        type: 'asset/source',
                    },
                ],
            },
        },
    },
    source: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
        define: {
            'import.meta.env.VITE_APP_HOST': `'${VITE_APP_HOST}'`,
        },
    },
    server: {
        host: '0.0.0.0',
        port: 4000,
        open: true,
        cors: true,
        proxy: {
            '/api/': {
                target: loadEnv(mode, process.cwd()).VITE_APP_HOST, // 转发域名
                changeOrigin: true,
                headers: {
                    referer: loadEnv(mode, process.cwd()).VITE_APP_REFERER,
                    host: loadEnv(mode, process.cwd()).VITE_APP_HOST,
                    Cookie: loadEnv(mode, process.cwd()).VITE_APP_COOKIE, // 转发
                },
            },
        },
    },
}));

修改对应指令

json 复制代码 
// package.json
{
  "scripts": {
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview",
    // others...
  },
  // ...others
}

修改 index.html

移除掉 index.html 之前的 <script src="main.ts"></script> 引入代码。

踩坑

import.meta 不兼容

import.meta 是浏览器 module 模块中独有的语法，rsbuild 在 rsbuild.config.js 中可以使用 import.meta，但是在项目源代码中并不支持，所以我们需要对原本代码中的 import.meta 进行适配。

以我们项目为例，大部分代码中的 import.meta.XXX 都是在本地的 .env.local 文件中定义的，我们可以借助 source.define 去进行全局的声明：

ts 复制代码 
import { defineConfig } from '@rsbuild/core';

const { VITE_APP_HOST } = import.meta.env;

export default defineConfig(({ env }) => ({
    source: {
        define: {
            'import.meta.env.VITE_APP_HOST': `'${VITE_APP_HOST}'`,
        },
    },
}));

另外我们项目还用到了 import.meta.url 去引入资源，这种需要改为 import 方式去引入：

javascript 复制代码 
// 改之前：
const href = new URL('../assets/icon.png', import.meta.url).href;

// 改之后：
import IconPNG from '../assets/icon.png';
const href = IconPNG;

:deep 和 & 兼容问题

目前已知 @rsbuild/plugin-less 插件对于在 :deep 内部使用 less 的 & 符号会有问题，例如：

  • case1: 生效
less 复制代码 
.container {
    .content {
        &_title {
            font-weight: bold;
        }
    }
}
  • case2: 生效
less 复制代码 
.container {
    :deep(.content) {
        .content_title {
            font-weight: bold;
        }
    }
}
  • case3: 不生效
less 复制代码 
.container {
    :deep(.content) {
        &_title {
            font-weight: bold;
        }
    }
}

后面会去 github 提个 issue，我们项目内部这种使用情况很少，所以暂时手动修改为不使用 &。

css 中使用 v-bind 不支持三元运算符

不支持在 css 中 v-bind 使用三元运算符，可以改成在 js 中使用三元运算符替代

less 复制代码 
// 改之前：
.container {
  height: v-bind(title ? '24px' : '48px');
}

// 改之后：
const containerHeight = title ? '24px' : '48px'; // js中写
.container {
  height: v-bind(containerHeight);
}

结论

我们的项目目前有 2500+ 文件、30w+ 行代码，算是一个很大的项目了。对于这样一个大型项目而言，从 vite 迁移 rsbuild 的过程中遇到的坑可以算很少了，而且迁移后的收益很明显，足以证明 rsbuild 及 rspack 是一个十分优秀的项目，且完全可以在生产环境中去应用了。

对于 webpack 构建的项目，我相信收益会更加明显，有折腾想法的朋友可以年底迁移一波作为 KPI 试试

最后的最后，快手基础平台团队招前端，欢迎在平台私信我投简历~

相关推荐
IT瘾君2 小时前
JavaWeb：Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程（反查重优化版）
java·开发语言·前端·游戏
喝拿铁写前端2 小时前
从圣经Babel到现代编译器：没开玩笑，普通程序员也能写出自己的编译器！
前端·架构·前端框架
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面？原因和解决方案都在这啦！
前端·vue.js
拉不动的猪3 小时前
前端自做埋点，我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常3 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展：从扫雷小游戏开发再探问题分解与 AI 代码调试能力（中）
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中3 小时前
前端面经-JS篇（三）--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木3 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师4 小时前
OpenAI为何觊觎Chrome？AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）