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…

最后

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