Rsbuild v0.6 发布,基于 Rspack 的构建工具

Rsbuild 是基于 Rspack 的高性能构建工具,由字节跳动 Web Infra 开源,可以为 webpack 项目减少 90% 的配置,并提升 10 倍构建速度。

Rsbuild v0.6 已与 Rspack v0.6 同步发布!

本次发布的主要特性包括:

  • 🦀 升级 Rspack v0.6
  • 🌟 默认启用 error overlay
  • 🍭 支持 Vue JSX HMR
  • 🔥 全新的 transform 插件 API
  • 🎯 默认端口调整为 3000

🦀 升级 Rspack v0.6

Rsbuild 已将依赖的 Rspack 升级至 v0.6 版本,并适配了 Rspack v0.6 包含的 CSS Modules 不兼容更新。

在新版本中,Rspack 默认开启了新版 tree shaking 算法,使产物体积和产物稳定性得到显著提升。

比如,新版算法支持了 reexports optimization(重导出优化) ,能够更精确地移除未使用的模块,以 import { Button } from 'antd' 为例,新版算法使产物体积从 159kB 下降到 129kB,提升约 20%。

请参考 # Rspack v0.6.0 发布,全新 Tree Shaking 算法 了解更多。


🌟 默认启用 error overlay

从 Rsbuild v0.6 开始,dev.client.overlay 的默认值调整为 true。这意味着当出现编译错误时,Rsbuild 将默认弹出 error overlay 来展示错误信息:

如果你不需要此功能,可以将 dev.client.overlay 设置为 false 来禁用:

ts 复制代码
export default defineConfig({
  dev: {
    client: {
      overlay: false,
    },
  },
});

🍭 支持 Vue JSX HMR

@rsbuild/plugin-vue-jsx 现已支持 JSX HMR,当你在 Vue 3 应用中修改 JSX 代码时,会自动触发模块热替换,并保留当前页面的状态。

该功能由社区贡献者 @liyincode 实现 ❤️,并且发布为独立的 babel-plugin-vue-jsx-hmr 包,以便在 Rsbuild 以外的项目中使用。


🔥 全新的 transform API

Rsbuild 插件现已支持 transform API,这可以理解为 Rspack loader 的一个轻量化实现,它提供了简单易用的 API,并在底层自动调用 Rspack loader 进行代码转换。

在 Rsbuild 插件中,你可以通过 api.transform 快速实现代码转换功能,能够满足大部分常见场景,而无须学习 Rspack loader 的编写方法。

比如匹配以 .pug 为后缀的模块,并转换为 JavaScript 代码:

ts 复制代码
import pug from 'pug';

const pluginPug = () => ({
  name: 'my-pug-plugin',
  setup(api) {
    api.transform({ test: /\.pug$/ }, ({ code }) => {
      const templateCode = pug.compileClient(code, {});
      return `${templateCode}; module.exports = template;`;
    });
  },
});

对于一些复杂的代码转换场景,api.transform 可能无法满足,此时你可以使用 Rspack loader 进行实现。


🎯 默认端口调整为 3000

Rsbuild 已将 server.port 的默认值从 8080 调整到 3000

端口 3000 通常用于 web 开发领域,也是 create-react-app 等工具默认使用的端口。通过更改默认端口为 3000,可以避免在使用 8080 时可能遇到的端口冲突问题。

如果你需要使用 8080 端口,可以手动设置:

ts 复制代码
export default defineConfig({
  server: {
    port: 8080,
  },
});

📍 下一步

我们计划在 2024 年 7 月发布 Rsbuild v1.0 正式版,如果你想了解更多,欢迎:

相关推荐
懒大王爱吃狼24 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js