字节 Rspack 家族再添一员，又一个全新构建工具来了！(前端充电宝2024年08月07日文章)

分享到：

作者：前端充电宝 | 更新时间：2024-08-09 01:48:13

最近，字节跳动的 Rspack 家族又来了一个新成员：Rslib。至此，Rspack 家族目前已经拥有了 5 个成员：Rspack、Rsbuild、Rspress、Rsdoctor、Rslib。本文就来看看这些工具都是什么，有什么特点！Rs...

A股板块轮动加剧，跨年大妖来袭，这几只票主力已明显介入！微信搜索关注【研讯小组】公众号（可长按复制），回复666，领取代码！

最近，字节跳动的 Rspack 家族又来了一个新成员：Rslib。至此，Rspack 家族目前已经拥有了 5 个成员：Rspack、Rsbuild、Rspress、Rsdoctor、Rslib。本文就来看看这些工具都是什么，有什么特点！

Rslib

Rslib 是一个由 Rsbuild 驱动的库构建工具，基于 Rsbuild 的配置和插件构建，提供最佳的 ESM 和CJS 输出。

Rslib 解决了传统打包工具（如Webpack和Rspack）在构建ESM包时可能引入过多运行时代码的问题，这对包的使用者不够友好。Rslib不仅继承了webpack和Rspack构建的庞大生态系统中诸如代码 tree shaking、代码拆分、模块联邦等强大功能，还优化了 ESM 输出的质量。

Rslib 的特点如下：

开箱即用的配置：Rslib为库开发提供了预配置的设置，支持TypeScript、JSX、Sass、Less、CSS Modules和Wasm的编译。
DTS生成：包括隔离声明在内的类型定义文件（DTS）生成。
模块联邦：支持模块联邦功能，便于微前端等场景的应用。
资源压缩：可以对资源进行压缩，减小输出文件的大小。
类型检查：提供类型检查功能，增强代码的健壮性。
PostCSS和Lightning CSS：集成PostCSS和Lightning CSS，方便进行CSS处理和优化。
生态系统的优势：利用webpack和Rspack的强大生态系统，包括 tree shaking、代码拆分等功能。

目前，Rslib 仍处于早期阶段，正在积极开发中。计划在 2024 年第三季度完成 Rslib 的核心功能，并使用 Rslib 构建 Rspack 和 Rsbuild；在 2024 年第四季度推出公开稳定版本。

Github：https://github.com/web-infra-dev/rslib

Rspack

2023 年 3 月 10 日，由字节跳动 Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具 Rspack 正式发布。它拥有高性能、兼容 Webpack 生态、定制性强等多种优点，旨在打造高性能的前端工具链。

创建 Rspack 的原因是要解决在 ByteDance 维护构建工具时遇到的各种性能问题。由于 ByteDance 内部存在许多巨石应用，它们都具有复杂的构建配置，生产环境构建需要耗费十几分钟，甚至超过半小时；开发环境的耗时也超过十几分钟。在 Webpack 上尝试了多种方法来优化这些巨石应用，但是效果甚微。意识到在 Webpack 上的优化已经难以为继，必须要从底层改造，才能适应需求。因此决定自研 Rspack。

Rspack 的特点如下：

启动速度极快：基于 Rust，项目启动速度极快，带给你极致的开发体验。
闪电般的 HMR：内置增量编译机制，HMR 速度极快，完全胜任大型项目的开发。
兼容 webpack：针对 webpack 的架构和生态进行兼容，无需从头搭建生态。
内置常见构建能力：对 Typescript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。
默认生产优化：默认内置多种优化策略，如 Tree Shaking、代码压缩等等。
框架无关：不和任何前端框架绑定，保证足够的灵活性。

Github：https://github.com/web-infra-dev/rspack

Rsbuild

Rsbuild 是基于 Rspack 的 Web 构建工具，是一个增强版的 Rspack CLI，更易用、更开箱即用。作为 Rspack 团队对 Web 构建最佳实践的探索，Rsbuild 提供从 Webpack 到 Rspack的顺畅迁移方案，大幅减少配置需求，提升构建速度达 10 倍。

Rsbuild 具备以下特性：

易于配置：Rsbuild 的目标之一，是为 Rspack 用户提供开箱即用的构建能力，使开发者能够在零配置的情况下开发 web 项目。同时，Rsbuild 提供一套语义化的构建配置，以降低 Rspack 配置的学习成本。
性能优先：Rsbuild 集成了社区中基于 Rust 的高性能工具，包括 Rspack 和 SWC，以提供一流的构建速度和开发体验。与基于 Webpack 的 Create React App 和 Vue CLI 等工具相比，Rsbuild 提供了 5 ~ 10 倍的构建性能，以及更轻量的依赖体积。
插件生态：Rsbuild 内置一个轻量级的插件系统，提供一系列高质量的官方插件。此外，Rsbuild 兼容大部分的 webpack 插件和所有的 Rspack 插件，这意味着你可以在 Rsbuild 中使用社区或公司内沉淀的现有插件，而不需要重写相关代码。
产物稳定：Rsbuild 设计时充分考虑了构建产物的稳定性，它的开发环境产物和生产构建产物具备较高的一致性，并自动完成语法降级和 polyfill 注入。Rsbuild 也提供插件来进行类型检查和产物语法检查，以避免线上代码的质量问题和兼容性问题。
框架无关：Rsbuild 不与前端 UI 框架耦合，并通过插件来支持 React、Vue 3、Vue 2、Svelte、Solid、Lit 等框架，未来也计划支持社区中更多的 UI 框架。

Rsbuild 的构建性能与原生 Rspack 处于同一水平。由于 Rsbuild 内置了更多开箱即用的功能，因此性能数据会略微低于 Rspack。