1 秒用上 Rspack,让你的 webpack 项目打包速度数倍提升

1,496 阅读2分钟

快速指南

只需在命令行中运行以下命令,将 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 的未来

image.png

上述命令依赖于 Rspackify 工具。Rspackify 通过 hook Node.js 中 module 的解析过程,专门用于以下几件事:

  1. 将 webpack 替换为 Rspack
  2. 将 webpack 内置插件替换为 Rspack 内置插件
  3. 部分与 Rspack 不兼容的 webpack 生态插件替换为 Rspack 生态中的插件

Rspack 对于 webpack 的高兼容性使得可以通过类似的工具,让你无需修改任何项目配置就能使用 Rspack,享受显著的打包速度提升。

兼容情况

Rspackify 不仅适用于直接使用 webpack 的项目,通过测试还兼容以下工具搭建的项目:

目前,我正在尝试兼容 TaroNext.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 区中提问,我将尽力为你提供帮助。