快速尝鲜字节刚刚开源的 Rspack,卷不动了?

发表日期:
分类: 编程技术
descriptive text

今天,字节跳动刚刚开源了 Rspack,一个 Rust 写的打包构建工具,功能和用法上对齐 webpack。

官方仓库:https://github.com/web-infra-dev/rspack

官方文档:https://www.rspack.dev/zh/

我在第一时间进行了试用,速度确实很快。看一下官方给出的数据:

image.png

image.png

你猜为什么没有跟 Vite 比?

Vue 支持

毫不意外,得益于 JSX 的特性,Rspack 开箱支持 React。 我想看一下 Vue 的支持程度。

官方说法:

image.png

对于单文件组件,大家都知道需要 vue-loader 进行转换。目前支持不是太好,官方例子里,写了个简单的 vue-loader,见:https://github.com/web-infra-dev/rspack/tree/main/examples/vue

试着跑了一下,除了官方给出的代码,其他基本不行。

Vue + JSX

好在 Vue3 对 JSX 的支持比 2.0 强了很多,那么只能用 Vue3 + JSX + Rspack 了。

同样官方给出了例子:https://github.com/web-infra-dev/rspack/tree/main/examples/vue3-jsx

安装依赖:

npm install -D babel-loader @babel/core @vue/babel-plugin-jsx

配置文件:

// rspack.config.js
/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = {
  context: __dirname,
  entry: {
    main: './src/main.jsx',
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@vue/babel-plugin-jsx'],
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        type: 'asset',
      },
    ],
  },
  builtins: {
    html: [
      {
        template: './index.html',
      },
    ],
    define: {
      __VUE_OPTIONS_API__: JSON.stringify(true),
      __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
    },
  },
}

官方例子较为简略,我尝试新添加了组件、 vue-router、pinia 等。目前看来运行良好。

我的仓库:https://github.com/liruifengv/rspack-vue

插件系统

Rspack 的目标是对齐 webpack,对于已有的 Loader 和 Plugin 进行兼容。

其实用 Rust 开发的构建工具有一个问题,就是插件系统,是用 JS 还是 Rust 开发,JS 不可避免的带来性能的下降,Rust 的话有一定的学习曲线。

插件系统代表一个构建工具的生态,只有生态起来,构建工具才能火起来。Rspack 目前貌似可以用 Rust 和 JS 两种来开发插件(还没来得及细看),并且对于 webpack 现有生态的兼容是一个明智的决定。

贡献

我刚提交了我在 Rspack 的第一个 PR:https://github.com/web-infra-dev/rspack/pull/2101

可能的机会?

  • Rspack 文档的完善
  • create-rspack 工具,提供更多的模板
  • create-rspack 工具,嗅探用户使用的包管理器
  • 提交和 Vite 比较的基准测试?
  • 生态系统的补充

最后

不知道 Rspack 是否能火起来,还是成为 KPI 工具,还是只在字节内部广泛使用。

你还记得 Modern.js

image.png



本文作者:李瑞丰


本文采用 知识共享署名 4.0 国际许可协议 (CC BY 4.0),欢迎转载、或重新修改使用,但需要注明来源。


你的鼓励是我最大的支持,你可以在 知乎掘金 等平台关注我,也可以关注我的公众号 「SayHub」 获取更多内容。