共计 3113 个字符,预计需要花费 8 分钟才能阅读完成。
Rspack 的核心目标之一,是提供卓越的开发体验,并且能够与基于 webpack 的项目实现无缝集成,将迁移成本降至最低。
在 JavaScript 生态中,Next.js[1] 拥有深度定制的 webpack 配置和丰富的插件生态,这使它成为验证 Rspack 兼容性和健壮性的理想选择。通过将 Rspack 集成到 Next.js 中,不仅展示了 Rspack 在复杂项目中的适用性,还为 Next.js 用户提供了一个改善开发体验的替代方案。
Rspack 携手 Next.js
今天,我们很高兴地推出 next-rspack[2],这是一个社区驱动的插件,让 Next.js 能够直接使用 Rspack 作为打包工具。对于尚未准备好采用 Turbopack 的团队,这个插件提供了一种高性能、且与 webpack 兼容的替代方案。
访问我们的 文档 [3] 或查看官方 Next.js 示例 [4] 开始使用。
在开发 next-rspack 之前,我们通过创建 rsnext[5](一个 Next.js 的分支)探索了集成的可能性,开发出了解决方案的原型。这一早期分支帮助我们验证了可行性,发现了许多边界 case,也让我们意识到,虽然 Rspack 与 webpack 的高度兼容性为我们提供了良好的起点,但实现稳定的集成仍然需要大量的努力和协作。
与 Vercel 的合作
next-rspack 的推出只是我们与 Vercel 广泛合作的一个方面。这种合作关系不仅限于 Next.js 集成,双方团队还致力于共同改进基础技术,如 SWC[6] 和 Lightning CSS[7] —— 这些工具在 JavaScript 生态中被广泛采用。
我们共同改进这些核心组件,为开发者创造更好的使用体验、性能和可靠性。这些努力不仅使 Rspack 和 Next.js 受益,也有助于提升整个 JavaScript 生态,让所有参与者都能受益。
为了保证长期可靠,next-rspack 已经集成到 Next.js 的持续集成流程中,这有助于主动发现问题并保持兼容性。尽管仍处于实验阶段,它目前通过了约 96% 的集成测试,这使我们有信心正式发布这一插件。你可以通过 arewerspackyet[8] 跟踪最新状态,也可以关注 我们的 Twitter[9] 了解 next-rspack 的最新进展。
对于尚未准备好采用 Turbopack 的团队,next-rspack 提供了一个稳定、高性能的替代方案,具有出色的兼容性和简单的接入过程。
我们由衷感谢 Vercel 的深度合作,以及双方对改进开发者工具体验的共同承诺。我们将持续协作,完善这一插件,共同推动现代 JavaScript 开发的未来。
当前性能
App Router 用户
目前,使用 next-rspack 的 App Router 实现比 Turbopack 慢,甚至可能比 webpack 还慢。这主要是因为某些 JavaScript 插件 在 Rust-JavaScript 的跨语言通信中产生了较大的性能开销。
我们已经实验性地将这些插件移植到 Rust 中,这极大地提高了性能 —— 大致与 Turbopack 相当。此外,我们正在研究如何解决深度集成带来的长期维护挑战。
Page Router 用户
Page Router 的情况要乐观得多:
- 开发模式:比 webpack 快 2 倍
- 生产模式:比 webpack 快 1.5 倍
高度依赖 webpack 生态的项目在迁移时将更加容易。
我们已经定位出一些限制性能提升的瓶颈,包括显著的 Rust-JavaScript 通信开销、较慢的 输出文件追踪 [10] 实现,这些问题将在未来得到解决。随着这些预期内的改进,我们预见:
- 开发环境中构建和 HMR 速度提升 5 倍
- 生产构建速度提升 3 倍
常见问题
它将如何保持支持?
next-rspack 已集成至 Next.js 的 CI 流程中,这使我们能够及早发现潜在问题并确保高度兼容性。随着 Next.js 与 Rspack 的共同发展,相关支持将不断得到完善。Rspack 团队、Vercel 团队以及开源社区将通力合作,共同支持这一插件。
谁在维护它?
next-rspack 是一个社区插件,但其开发和集成依赖于 Rspack 团队和 Vercel 团队之间的密切合作,以确保持续的支持和进展。
这对 Turbopack 有影响吗?Vercel 是否采用了 Rspack?
Rspack 不会替代 Turbopack。它是为那些拥有大量 webpack 配置、且尚未准备好迁移到 Turbopack 的用户提供的替代解决方案。
已知的问题有哪些?
截至目前,next-rspack 通过了约 96% 的集成测试,进展可在 arewerspackyet[11] 上查看。
- 一些特殊情况和进阶功能可能仍需要临时解决方案或额外支持。即使你没有遇到问题,也欢迎在 反馈讨论 [12] 中告诉我们你的使用体验。
- 受当前插件实现方式的限制,App Router 的性能表现不够理想,这方面仍有很大的改进空间。
- 由于 Rspack 不是 100% 兼容 webpack 的 API,你的一些 webpack 插件可能无法在 Rspack 上顺畅工作,如果你遇到兼容性问题,欢迎向我们反馈。
如何参与贡献?
欢迎尝试 next-rspack,报告问题、贡献代码或文档、加入社区讨论。你的任何反馈和贡献都很宝贵。
未来计划
提高测试覆盖率
:在下一季度,我们计划将测试覆盖率从当前的 96% 提高到接近 100%。增强性能
:我们将通过原生插件,探索与 Next.js 的更深层次集成,以提升构建性能。基于用户反馈迭代
:继续支持来自 Next.js 生态系统的更多社区插件。完善集成工作流
:建立 Rspack 和 Next.js 之间更加健全的 CI/CD 流程,确保 next-rspack 支持的稳定性和可靠性。更好的 RSC 支持
:Turbopack 的统一模块图解锁了更快、更简单的 RSC 实现。Rspack 将提供类似的 API,为生态带来一流、高性能的 RSC 支持。模块联邦支持
:我们正在与 Next.js 团队讨论改进对模块联邦的支持。
在 2024 年,稳定性和构建产物完整性是 Rspack 的主要关注点。2025 年,我们将更加关注性能提升和广泛的生态系统。
敬请期待 —— 我们的旅程才刚刚开始。
参考资料
[1] Next.js: https://nextjs.org/
[2] next-rspack: https://www.npmjs.com/package/next-rspack
[3] 文档: /guide/tech/next
[4] Next.js 示例: https://github.com/vercel/next.js/tree/canary/examples/with-rspack
[5] rsnext: https://github.com/ScriptedAlchemy/rsnext/tree/rspack
[6] SWC: https://swc.rs/
[7] Lightning CSS: https://lightningcss.dev/
[8] arewerspackyet: https://www.arewerspackyet.com/
[9] 我们的 Twitter: https://x.com/rspack_dev
[10] 输出文件追踪: https://nextjs.org/docs/pages/api-reference/config/next-config-js/output#how-it-works
[11] arewerspackyet: https://www.arewerspackyet.com/
[12] 反馈讨论: https://github.com/vercel/next.js/discussions/77800
文章来源:https://mp.weixin.qq.com/s/_PiIZAGL52gBhwvtIH4N2w