合作机构:阿里云 / 腾讯云 / 亚马逊云 / DreamHost / NameSilo / INWX / GODADDY / 百度统计
最近,字节跳动的 Rspack 家族又新增了一员:Rsdoctor。至此,Rspack 家族目前已经拥有了 4 个成员:Rspack、Rsbuild、Rspress、Rsdoctor。本文就来看看这些工具都是什么,有什么特点!
图片
2023 年 3 月 10 日,由字节跳动 Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具 Rspack 正式发布。它拥有高性能、兼容 Webpack 生态、定制性强等多种优点,旨在打造高性能的前端工具链。
图片
创建 Rspack 的原因是要解决在 ByteDance 维护构建工具时遇到的各种性能问题。由于 ByteDance 内部存在许多巨石应用,它们都具有复杂的构建配置,生产环境构建需要耗费十几分钟,甚至超过半小时;开发环境的耗时也超过十几分钟。在 Webpack 上尝试了多种方法来优化这些巨石应用,但是效果甚微。意识到在 Webpack 上的优化已经难以为继,必须要从底层改造,才能适应需求。因此决定自研 Rspack。
图片
Rspack 的特点如下:
自 Rspack 发布之后,受到了社区的广泛好评,很多用户表示迁移到 Rspack 之后,构建性能得到了大幅提升。
图片
图片
Github:https://github.com/web-infra-dev/rspack
Rsbuild 是基于 Rspack 的 Web 构建工具,是一个增强版的 Rspack CLI,更易用、更开箱即用。作为 Rspack 团队对 Web 构建最佳实践的探索,Rsbuild 提供从 Webpack 到 Rspack的 顺畅迁移方案,大幅减少配置需求,提升构建速度达 10 倍。
图片
Rsbuild 具备以下特性:
Rsbuild 的构建性能与原生 Rspack 处于同一水平。由于 Rsbuild 内置了更多开箱即用的功能,因此性能数据会略微低于 Rspack。
图片
构建 1000 个 React 组件的时间Github:https://github.com/web-infra-dev/rsbuild
Rspress 是基于 Rspack 的静态站点生成器,依托React框架进行高效渲染。内置便捷的文档主题,助力迅速搭建专业文档站点。同时,支持个性化主题定制,满足多样化的静态站需求,如博客站、产品主页等。
图片
Rspress 的特性如下:
以 Rspress 官网文档的内容为例,Rspress、Docusaurus 和 Nextra 三者的性能对比情况如下:
图片
Github:https://github.com/web-infra-dev/rspress
Rsdoctor 是一个全面诊断和分析 Webpack 和 Rspack 构建过程与产物的工具,提供编译耗时细节和行为展示,以及防止代码劣化的 Bundle Diff 功能。
图片
Rsdoctor 的特性如下:
构建产物支持资源列表及模块依赖等。
构建时分析支持 Loader、Plugin、Resolver 构建过程分析。
支持 Rspack 的 builtin:swc-loader 分析。
构建规则支持重复包检测及 ES Version Check 检查等。
通过概览页能够知道项目配置、诊断信息、编译信息、产物情况。
图片
诊断模块:
图片
编译分析:
图片
图片
图片
产物分析:
图片
Bundle Diff:
图片
Github:https://github.com/web-infra-dev/rsdoctor
TOP