Web构建工具RSPack有什么优点？和webpack比哪个好用？

Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具，拥有高性能、兼容 Webpack 生态、定制性强等多种优点，解决了我们在业务场景中遇到的非常多的问题，让很多开发者的体验有了质的提升。

Rspack（读音为 /'ɑrespæk/,）是一个基于 Rust 编写的高性能 JavaScript 打包工具，它提供对 webpack 生态良好的兼容性，能够无缝替换 webpack，并提供闪电般的构建速度。

文章导航

一、怎么在RSPack创建 Web 程序打包

安装 RSPack

使用 npm 安装 RSPack：

Bash $ npm install rspack --save-dev

基本配置

在项目根目录下创建 rspack.config.js 文件：

const { defineConfig } = require('@rspack/cli');

const config = defineConfig({
  entry: {
    main: './src/index.js',
  },
});

module.exports = config;

引入插件和资源处理

与webpack的使用一致，创建和引用合适的插件，并且配置合适的资源处理，就可以打包web程序：

import { defineConfig } from "@rspack/cli";
import { rspack } from "@rspack/core";
import ReactRefreshPlugin from "@rspack/plugin-react-refresh";

const isProduction = process.env.NODE_ENV === "production";

export default defineConfig({
  entry: {
    main: "./src/index.tsx",
  },
  resolve: {
    extensions: ["...", ".tsx", ".ts", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: "asset",
      },
      {
        test: /\.(js|ts|tsx|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "builtin:swc-loader",
          options: {
            jsc: {
              parser: {
                syntax: "typescript",
                tsx: true,
              },
              transform: {
                react: {
                  runtime: "automatic",
                  development: !isProduction,
                  refresh: !isProduction,
                },
              },
            },
          },
        },
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({ template: "./index.webpack.html" }),
    !isProduction && new ReactRefreshPlugin(),
  ].filter(Boolean),
  experiments: { css: true },
});

运行构建

在 package.json 中添加构建脚本："scripts": {"build": "rspack"}

然后运行构建命令：npm run build

二、有哪些好用的RSPack插件

多样的插件能丰富ESPack的功能：

引用插件

RSPack 支持各种插件，可以增强其功能。当前 RSPack 已经有用了使用 rust 编写的部分内置插件，可以直接使用，当然对标webpack，那么webpack的插件也是可以在此引用使用的，例如：HTMLWebpackPlugin、MiniCssExtractPlugin。

例如：

引入 Babel 插件

const { defineConfig } = require('rspack');
const BabelPlugin = require('rspack-plugin-babel');

module.exports = defineConfig({
  plugins: [
    new BabelPlugin({presets: ['@babel/preset-env'],}),
  ],
});

自定义插件

创建自定义插件可以让你实现特定的构建需求。例如，一个简单的插件可以如下实现：

class MyCustomPlugin {
   apply(compiler) {
     compiler.hooks.emit.tapAsync('MyCustomPlugin', (compilation, callback) => {
         console.log('This is my custom plugin!');callback();
     });
   }
}

// 在配置中引入自定义插件const { defineConfig } = require('rspack');

module.exports = defineConfig({
    plugins: [new MyCustomPlugin()],
});

三、RSBuild是什么？运行原理是什么？

Rsbuild是由Rspack驱动的高性能构建工具，它默认包含了一套精心设计的构建配置，提供开箱即用的开发体验，并能够充分发挥出Rspack的性能优势。

Rsbuild提供丰富的构建功能，包括编译TypeScript、JSX、Sass、Less、CSS Modules、Wasm，以及其他资源，也支持模块联邦、图片压缩、类型检查、PostCSS、Lightning CSS 等功能。

安装 RsBuild

安装：npm add @rsbuild/core -D

安装插件以支持打包 Web 框架

$ npm install @rsbuild/plugin-react @rsbuild/plugin-less --save-dev

配置

配置：

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginLess } from '@rsbuild/plugin-less';

export default defineConfig({
  source: {
    entry: {
      index: './src/index.tsx'
    }
  },
  plugins: [
    pluginLess(),
    pluginReact(),
  ],
});

运行构建

在 package.json 中添加构建脚本：

{
    "scripts": {
        "dev": "rsbuild dev",
        "build": "rsbuild build",
        "preview": "rsbuild preview"
     }
}

然后运行开发命令：npm run dev

四、和其他构建工具的对比

Web还有很多构建工具，我们应该怎么选择呢？

和 webpack 的区别

webpack 是目前最为成熟的构建工具，有着活跃的生态，灵活的配置和丰富的功能，但是其最为人诟病的是其性能问题，尤其在一些大型项目上，构建花费的时间可能会达到几分钟甚至几十分钟，性能问题是目前 webpack 最大的短板。因此 Rspack 解决的问题核心就是 webpack 的性能问题。 Rspack 比 webpack 快得益于如下几方面：

Rust 语言优势: Rspack 使用 Rust 语言编写，得益于 Rust 的高性能编译器支持， Rust 编译生成的 Native Code 通常比 JavaScript 性能更为高效。
高度并行的架构: webpack 受限于 JavaScript 对多线程的羸弱支持，导致其很难进行高度的并行化计算，而得益于 Rust 语言的并行化的良好支持， Rspack 采用了高度并行化的架构，如模块图生成，代码生成等阶段，都是采用多线程并行执行，这使得其编译性能随着 CPU 核心数的增长而增长，充分挖掘 CPU 的多核优势。
内置大部分的功能: 事实上 webpack 本身的性能足够高效，但是因为 webpack 本身内置了较少的功能，这使得我们在使用 webpack 做现代 Web App 开发时，通常需要配合很多的 plugin 和 loader 进行使用，而这些 loader 和 plugin 往往是性能的瓶颈，而 Rspack 虽然支持 loader 和 plugin，但是保证绝大部分常用功能都内置在 Rspack 内，从而减小 JS plugin | loader 导致的低性能和通信开销问题。
增量编译: 尽管 Rspack 的全量编译足够高效，但是当项目庞大时，全量的编译仍然难以满足 HMR 的性能要求，因此在 HMR 阶段，我们采用的是更为高效的增量编译策略，从而保证，无论你的项目多大，其 HMR 的开销总是控制在合理范围内。

和 Vite 的区别

Vite 提供了很好的开发者体验，但 Vite 在生产构建中依赖了 Rollup ，因此与其他基于 JavaScript 的工具链一样，面临着生产环境的构建性能问题。

另外，Rollup 相较于 webpack 做了一些平衡取舍，在这里同样适用。比如，Rollup 缺失了 webpack 对于拆包的灵活性，即缺失了 optimization.splitChunks 提供的很多功能。

和 esbuild 的区别

我们在内部进行过大规模地将 esbuild 作为通用的 Web App 构建工具的实践，但是遇到如下一些问题：

缺乏对 JavaScript HMR 和增量编译的良好支持，这导致大型项目中的 HMR 性能较差。
拆包策略也非常原始，难以满足业务复杂多变的拆包优化需求。

和 Turbopack 的区别

Rspack 和 turbopack 都是基于 Rust 实现的 bundler，且都发挥了 Rust 语言的优势。

与 turbopack 不同的是，Rspack 选择了对 webpack 生态兼容的路线，一方面，这些兼容可能会带来一定的性能开销，但在实际的业务落地中，我们发现对于大部分的应用来说，这些性能开销是可以接受的，另一方面，这些兼容也使得 Rspack 可以更好地与上层的框架和生态进行集成，能够实现业务的渐进式迁移。

和 Rollup 的区别

Rspack 和 Rollup 虽然都是打包工具，但是两者的侧重领域不同，Rollup 更适合用于打包库，而 Rspack 适合用于打包应用。因此 Rspack 对打包应用进行了很多优化，如 HMR、Bundle splitting 等功能，而 Rollup 则比 Rspack 的编译产物对库更为友好，如更好的 ESM 产物支持。社区上也有很多的工具在 Rollup 基础上进行了一定的封装，提供了对应用打包更友好的支持，如 vite 和 wmr, 目前 Rspack 比 Rollup 有更好的生产环境构建性能。

Parcel 的区别

Rspack 的整体架构与 Parcel 有很多共同之处。例如都将 CSS 资源视为一等公民，都支持基于 filter 的 transformer。然而，Parcel 更加注重开箱即用的体验，而 Rspack 更加注重为上层框架提供灵活的配置。Parcel 开创性地设计了 Unified Graph 和使 HTML 成为一等公民的特性。Rspack 也计划在未来支持这些特性。

性能

Rsbuild 能够充分发挥 Rspack 的性能优势，以下是构建 1000 个 React 组件的时间：

构建项目地址：https://github.com/rspack-contrib/performance-compare

可以通过该项目，运行多种构建命令，可能对比各个打包工具之间的差距与差异。

结语

Rspack作为一款基于Rust语言开发的Web构建工具，凭借其高性能、良好的Webpack生态兼容性以及强大的定制性，在Web开发领域展现出了巨大的潜力。通过本文的介绍，相信读者已经对Rspack有了较为全面的了解，包括其安装、配置、插件使用以及与其他构建工具的对比等方面。Rspack不仅能够显著提升构建速度，降低构建成本，还能够为开发者们提供更加灵活和高效的开发体验。

延展阅读：

2024双11淘宝3000亿国家补贴怎么领？成都家电以旧换新线上线下使用入口在哪里？

企业微信客服会话服务质量如何考核？如何统一评估私域公域客服会话服务水平？

抖音电商内容创作者2024双11怎么抢占流量扶持资格？官方流量掘金计划如何参加？