快速尝鲜字节刚刚开源的 Rspack，卷不动了？

前言

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

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

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

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

你猜为什么没有跟 Vite 比？

Vue 支持

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

官方说法：

对于单文件组件，大家都知道需要 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

配置文件：

/**
 * @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),
    },
  },
};