就在昨天,我刷github的时候看到期待已久的Rspack发布了v1.0.0
的版本。
于是打开官网,rspack.dev/zh/,立马体验了一把。
说明:Rspack是一个打包工具,Rsbuild是由 Rspack 驱动的构建工具。就跟vite使用了esbugongild一样。
体验一把
创建项目
使用Rsbuild
先生成一个react项目。
Rsbuild 是由 Rspack 驱动的高性能构建工具,由 Rspack 团队开发。它默认包含了一套精心设计的构建配置,提供开箱即用的开发体验,并能够充分发挥出 Rspack 的性能优势:
npm create rsbiuld@latest
它内置了很多前端框架的模版,我选择了react的版本
进入项目,安装好依赖
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
可以看到,它在dev环境下的编译时间只用了0.14s,从运行pnpm dev
到浏览器打开网页看到完整的页面,整个过程花了不到1s,简直太丝滑了,纵观整个前端工程化历史长河,从未出现过这一幕(Vite另当别论,因为它首次运行项目在浏览器打开页面还是蜗牛)。
打包项目
我们再来打个包试试吧:pnpm build
我的天啦,生产环境打包只花了0.16s。比vite快了很多倍啊,因为vite还是用的rollup打包,而Rspack用的rust,性能提升了好多啊。
不得不说真的是纵享丝滑,前所未有。
性能大比
这里有个性能比较的仓库:github.com/rspack-cont…
从官方发布的性能数据来看:
Rspack和Rsbuild遥遥领先。
功能丰富
作为 webpack 的升级替代品,带来更强大的功能和卓越的生产力。
- Code Splitting:将代码拆分成更小的 bundles,实现按需加载并提高页面性能。
- Tree Shaking:检测并消除最终 bundle 中未使用的代码,以减少构建产物的大小。
- Plugins:提供丰富的插件钩子,并与大多数 webpack 插件兼容。
- Loaders完全兼容 webpack 的 loaders,重用整个生态系统。
- Module Federation在多个 web 应用之间共享模块代码,更高效地团队协作。
- Asset Management处理和优化静态资源,如图像、字体和 stylesheets。
- HMR在运行阶段通过 HMR 更新模块,无需刷新整个页面。
- Dev Server提供成熟、高性能的 dev server,用于快速本地开发。
- Parallel Builds并发运行多个构建任务,为不同的构建目标或环境输出产物。
- SWC利用基于 Rust 的 SWC 来加速 JavaScript 和 TypeScript 的转译。
- Lightning CSS集成 Lightning CSS 以实现快速的 CSS 处理和深度优化。
- JavaScript API:提供对构建 API 的编程接口,允许自定义整个构建流程。
工具完善
围绕 Rspack 打造的高性能工具栈,助力现代 Web 开发。
- Rspack:基于 Rust 编写的高性能 JavaScript 打包工具,具备与 webpack 兼容的 API。
- Rsbuild:基于 Rspack 的构建工具,包含开箱即用的预设配置,带来愉悦的开发体验。
- Rspress:基于 Rsbuild 和 MDX 的静态站点生成器,用于创建优雅的文档站点。
- Rsdotor:强大的一站式构建分析工具,用于可视化构建过程和构建产物。
- 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…
最后
我打算先在公司的项目上试试手,看看如何,兄弟们等我后续。。。