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怎么抢占流量扶持资格？官方流量掘金计划如何参加？
咨询方案
获取更多方案详情
