快速指南
只需在命令行中运行以下命令,将 npm run dev
替换为你项目中的实际开发或构建命令:
npx rspackify npm run dev
是的,就这么简单!到这里一切就已经完成了。
当然,如果你希望长期使用 Rspackify,可以将其安装到项目中:
npm install -g rspackify
然后将其添加到 npm scripts 中,以直接使用 webpack 的项目为例:
{
"scripts": {
"start": "rspackify webpack serve",
"build": "rspackify webpack"
}
}
实现原理
在介绍实现原理之前,需要先了解 Rspack。Rspack 是一个基于 Rust 的高性能 Bundler,最重要的是它兼容 webpack 的配置、API 和插件!
最近发布的 1.0 版本使得其 API 更加稳定可靠,让我们可以放心使用。你可以阅读这篇文章了解更多信息:Rspack 1.0 发布:重新定义 Webpack 的未来。
上述命令依赖于 Rspackify 工具。Rspackify 通过 hook Node.js 中 module
的解析过程,专门用于以下几件事:
- 将 webpack 替换为 Rspack
- 将 webpack 内置插件替换为 Rspack 内置插件
- 部分与 Rspack 不兼容的 webpack 生态插件替换为 Rspack 生态中的插件
Rspack 对于 webpack 的高兼容性使得可以通过类似的工具,让你无需修改任何项目配置就能使用 Rspack,享受显著的打包速度提升。
兼容情况
Rspackify 不仅适用于直接使用 webpack 的项目,通过测试还兼容以下工具搭建的项目:
目前,我正在尝试兼容 Taro 和 Next.js,但由于 Rspack 目前还缺少对某些 webpack Hooks 的支持,可能需要更多时间。
受限之处
我希望通过 Rspackify,你可以轻松体验到 Rspack 的构建速度。不过,你可能无法达到 Rspack 的最佳性能,因为 Rspackify 无法自动判断是否能够将你的 babel-loader 替换为 Rspack 内置的 swc-loader。Rspack 内置的 swc-loader 拥有更好的并发性能,并且无需处理 JavaScript 和 Rust 之间的通信开销,从而提供最佳性能。
如果通过 Rspackify 体验到了构建速度提升,并希望进一步迁移到 Rspack,可以参考迁移 webpack 这篇文档。相信我,迁移过程非常简单。
最后
如果 Rspackify 对你有帮助,或者你觉得 Rspack 让你的开发体验更加愉快,请为它们 star。你的支持是对开发者最大的鼓励!
如果你在使用过程中遇到任何问题,请在 Rspackify issue 区中提问,我将尽力为你提供帮助。