Rspack发布了v1.0.0，性能碾压一众打包工具

白哥学前端
536 阅读4分钟

就在昨天，我刷github的时候看到期待已久的Rspack发布了v1.0.0的版本。
image.png
于是打开官网，rspack.dev/zh/，立马体验了一把。

说明：Rspack是一个打包工具，Rsbuild是由 Rspack 驱动的构建工具。就跟vite使用了esbugongild一样。

体验一把

创建项目

使用Rsbuild先生成一个react项目。
Rsbuild 是由 Rspack 驱动的高性能构建工具，由 Rspack 团队开发。它默认包含了一套精心设计的构建配置，提供开箱即用的开发体验，并能够充分发挥出 Rspack 的性能优势：

npm create rsbiuld@latest

它内置了很多前端框架的模版，我选择了react的版本
image.png
进入项目，安装好依赖

cd rsbuild-project2
pnpm install

最后，生成项目结构如下：

.
├── README.md
├── dist
│   ├── index.html
│   └── static
├── node_modules
│   ├── @rsbuild
│   ├── @types
│   ├── react -> .pnpm/react@18.3.1/node_modules/react
│   ├── react-dom -> .pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom
│   └── typescript -> .pnpm/typescript@5.5.2/node_modules/typescript
├── package.json
├── pnpm-lock.yaml
├── rsbuild.config.ts
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── env.d.ts
│   └── index.tsx
└── tsconfig.json

运行项目

pnpm dev

image.png
image.png
可以看到，它在dev环境下的编译时间只用了0.14s,从运行pnpm dev到浏览器打开网页看到完整的页面，整个过程花了不到1s，简直太丝滑了，纵观整个前端工程化历史长河，从未出现过这一幕（Vite另当别论，因为它首次运行项目在浏览器打开页面还是蜗牛）。

打包项目

我们再来打个包试试吧：
pnpm build
image.png
我的天啦，生产环境打包只花了0.16s。比vite快了很多倍啊，因为vite还是用的rollup打包，而Rspack用的rust，性能提升了好多啊。
不得不说真的是纵享丝滑，前所未有。

性能大比

这里有个性能比较的仓库：github.com/rspack-cont…
从官方发布的性能数据来看：
image.png
image.png
Rspack和Rsbuild遥遥领先。

功能丰富

作为 webpack 的升级替代品，带来更强大的功能和卓越的生产力。

  1. Code Splitting：将代码拆分成更小的 bundles，实现按需加载并提高页面性能。
  2. Tree Shaking：检测并消除最终 bundle 中未使用的代码，以减少构建产物的大小。
  3. Plugins：提供丰富的插件钩子，并与大多数 webpack 插件兼容。
  4. Loaders完全兼容 webpack 的 loaders，重用整个生态系统。
  5. Module Federation在多个 web 应用之间共享模块代码，更高效地团队协作。
  6. Asset Management处理和优化静态资源，如图像、字体和 stylesheets。
  7. HMR在运行阶段通过 HMR 更新模块，无需刷新整个页面。
  8. Dev Server提供成熟、高性能的 dev server，用于快速本地开发。
  9. Parallel Builds并发运行多个构建任务，为不同的构建目标或环境输出产物。
  10. SWC利用基于 Rust 的 SWC 来加速 JavaScript 和 TypeScript 的转译。
  11. Lightning CSS集成 Lightning CSS 以实现快速的 CSS 处理和深度优化。
  12. JavaScript API：提供对构建 API 的编程接口，允许自定义整个构建流程。

工具完善

围绕 Rspack 打造的高性能工具栈，助力现代 Web 开发。

  1. Rspack：基于 Rust 编写的高性能 JavaScript 打包工具，具备与 webpack 兼容的 API。
  2. Rsbuild：基于 Rspack 的构建工具，包含开箱即用的预设配置，带来愉悦的开发体验。
  3. Rspress：基于 Rsbuild 和 MDX 的静态站点生成器，用于创建优雅的文档站点。
  4. Rsdotor：强大的一站式构建分析工具，用于可视化构建过程和构建产物。
  5. Rslib：基于 Rsbuild 的库构建工具，用于开发工具库或 UI 组件库。

能不能替代webpack

我们知道webpack生态虽然非常丰富，但是性能问题一直是没办法得到解决的，因为webpack 受限于 JavaScript 对多线程的羸弱支持，导致其很难进行高度的并行化计算。而得益于 Rust 语言的并行化的良好支持， Rspack 采用了高度并行化的架构，如模块图生成，代码生成等阶段，都是采用多线程并行执行，这使得其编译性能随着 CPU 核心数的增长而增长，充分挖掘 CPU 的多核优势。
由此可见，Rspack的目的就是奔着替代webpack而去的，你丰富的社区生态我也能支持，你没有的性能我有， 谁用谁觉得香。

不过目前Rspack还没有完全支持webpack的生态，具体可以看这个：rspack.dev/zh/guide/co…

具体可以看相关的迁移方案：rsbuild.dev/zh/guide/mi…

最后

我打算先在公司的项目上试试手，看看如何，兄弟们等我后续。。。

avatar
文章
阅读
粉丝