Hello，大家好，我是 Sunday。

Webpack 作為最經(jīng)典的 前端打包工具，這幾年過的可真是不太平。

前有 Vite 出現(xiàn)，號(hào)稱可以 “顛覆 webpack”。后有webpack創(chuàng)始人推出新的打包工具 Turbopack，號(hào)稱比 webpack 快 700 倍。

這不，三天前（8月28日），字節(jié)跳動(dòng)也推出了全新的打包工具 Rspack，號(hào)稱 能夠無縫替換 webpack， 并提供閃電般的構(gòu)建速度

圖片

那么到目前為止，Rspack 也正式推出 3 天了，所以今天咱們就來看看它吧！

制作 Rspack 的初衷

根據(jù)原生團(tuán)隊(duì)描述：Rspack 的推出，最初是為了解決字節(jié)內(nèi)部 巨石應(yīng)用 的問題。

使用 webpack 時(shí)，每次編譯都需要耗時(shí) 十幾分鐘，甚至半個(gè)小時(shí)的時(shí)間，并且基于 webpack 的優(yōu)化收效甚微，因此才有了構(gòu)建 Rspack 的需求。

整個(gè)構(gòu)建的過程，遵循以下 4 個(gè)標(biāo)準(zhǔn)：

• 快速的 Dev 啟動(dòng)性能：npm run dev 是開發(fā)者每天需要運(yùn)行很多次的命令，但大型項(xiàng)目每次都需要等待 10 分鐘，這對(duì)于工程師來說非常痛苦，因此優(yōu)化開發(fā)模式下啟動(dòng)的時(shí)間至關(guān)重要。
• 高效的 Build 性能：npm run build 經(jīng)常在 CI/CD 環(huán)境中運(yùn)行，它決定了應(yīng)用生產(chǎn)交付的效率。有些應(yīng)用在生產(chǎn)環(huán)境中需要 20 到 30 分鐘的構(gòu)建時(shí)間，如果能縮短這段時(shí)間，對(duì)開發(fā)流程也將非常有幫助。
• 靈活的配置：用戶工程的配置非常靈活，不夠統(tǒng)一。在之前的嘗試中，將 webpack 配置遷移到其他構(gòu)建工具時(shí)，我們遇到了許多問題，因?yàn)槠渌麡?gòu)建工具的配置不如 webpack 靈活。
• 生產(chǎn)環(huán)境的優(yōu)化能力：在啟用 Rspack 之前，我們嘗試了社區(qū)內(nèi)的各種方案，但它們都面臨著一定程度的生產(chǎn)環(huán)境負(fù)優(yōu)化，例如拆分包不夠精細(xì)等。因此，優(yōu)化生產(chǎn)環(huán)境的產(chǎn)物是我們不可放棄的功能。

體驗(yàn)下 Rspack

整個(gè) Rspack 的使用場景主要分為兩種：

1. 直接使用 Rspack 創(chuàng)建全新項(xiàng)目
2. 從一個(gè)基于 webpack 的項(xiàng)目遷移到 Rspack。畢竟 Rspack 號(hào)稱可以 “無縫替換 webpack”。如果大家也在現(xiàn)有項(xiàng)目中飽受 編譯過慢 的問題，那么不妨可以進(jìn)行一下嘗試。

直接使用 Rspack 創(chuàng)建全新項(xiàng)目

這種操作比較簡單，與使用 vue-cli、vite、CRA 的區(qū)別并不大

官方 推薦使用 Rsbuild 創(chuàng)建項(xiàng)目

Rsbuild 是由 Rspack 驅(qū)動(dòng)的高性能構(gòu)建工具，由 Rspack 團(tuán)隊(duì)開發(fā)。它默認(rèn)包含了一套精心設(shè)計(jì)的構(gòu)建配置，提供開箱即用的開發(fā)體驗(yàn)，并能夠充分發(fā)揮出 Rspack 的性能優(yōu)勢(shì)。

npm create rsbuild@latest

從 webpack 中遷移

這應(yīng)該是很多同學(xué)真正的痛點(diǎn)了。

如果大家也在現(xiàn)有項(xiàng)目中飽受 編譯過慢 的問題，那么不妨可以進(jìn)行一下嘗試。

在這里，Rspack 提供了多種遷移方案：

圖片

我們以 vue-cli 為例，整個(gè)遷移過程比較平滑：

1. 安裝依賴

首先你需要把 Vue CLI 的 npm 依賴替換為 Rsbuild 的依賴。

移除 Vue CLI 的依賴：

npm remove @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint core-js

安裝 Rsbuild 的依賴：

npm add @rsbuild/core @rsbuild/plugin-vue -D

如果你的項(xiàng)目是基于 Vue 2 的，請(qǐng)將 @rsbuild/plugin-vue 替換為 @rsbuild/plugin-vue2。

2. 更新 npm scripts

下一步，你需要把 package.json 中的 npm scripts 更新為 Rsbuild 的 CLI 命令。

{
  "scripts": {
-   "serve": "vue-cli-service serve",
-   "build": "vue-cli-service build",
+   "serve": "rsbuild dev",
+   "build": "rsbuild build",
+   "preview": "rsbuild preview"
  }
}

Rsbuild 未集成 ESLint，因此沒有提供用于替換 vue-cli-service lint 的命令，你可以直接使用 ESLint 的 CLI 命令 作為替代。

3. 創(chuàng)建配置文件

在 package.json 的同級(jí)目錄下創(chuàng)建 Rsbuild 的配置文件 rsbuild.config.ts，并添加以下內(nèi)容：

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
  source: {
    // 指定入口文件
    entry: {
      index: './src/main.js',
    },
  },
});

如果你的項(xiàng)目是基于 Vue 2 的，請(qǐng)使用 import { pluginVue2 } from '@rsbuild/plugin-vue2';。

4. HTML 模板

Vue CLI 默認(rèn)使用 public/index.html 文件作為 HTML 模板。在 Rsbuild 中，你可以通過 html.template 來指定 HTML 模板：

// rsbuild.config.ts
export default defineConfig({
  html: {
    template: './public/index.html',
  },
});

在 HTML 模板中，如果使用了 Vue CLI 的 BASE_URL 變量，請(qǐng)?zhí)鎿Q為 Rsbuild 的 assetPrefix 變量，并使用斜杠進(jìn)行連接：

-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="<%= assetPrefix %>/favicon.ico">

這樣就完成了從 Vue CLI 到 Rsbuild 的基本遷移，此時(shí)你可以執(zhí)行 npm run serve 命令來嘗試啟動(dòng)開發(fā)服務(wù)器。

5. 配置遷移處理方案

部分配置方案需要進(jìn)行替換：

圖片

6. 環(huán)境變量處理方案

Vue CLI 默認(rèn)會(huì)將 VUE_APP_ 開頭的環(huán)境變量注入到 client 代碼中，而 Rsbuild 默認(rèn)會(huì)注入 PUBLIC_ 開頭的環(huán)境變量（參考 public 變量）。

為了兼容 Vue CLI 的行為，你可以手動(dòng)調(diào)用 Rsbuild 提供的 loadEnv 方法來讀取 VUE_APP_ 開頭的環(huán)境變量，并通過 source.define 配置項(xiàng)注入到 client 代碼中。

// rsbuild.config.ts
import { defineConfig, loadEnv } from '@rsbuild/core';

const { publicVars } = loadEnv({ prefixes: ['VUE_APP_'] });

export default defineConfig({
  source: {
    define: publicVars,
  },
});

和其他構(gòu)建工具的對(duì)比

每個(gè)工具出現(xiàn)之后，都會(huì)和其他的工具對(duì)比一番，并借此描述出 “自己的各種優(yōu)勢(shì)”。

因此，這種對(duì)比可能并沒有那么的“公正（畢竟大佬針對(duì)特定場景下性能問題的撕逼情況也并不少見）”。因此 該部分僅供參考

和 webpack 的區(qū)別

webpack 是目前最為成熟的構(gòu)建工具，有著活躍的生態(tài)，靈活的配置和豐富的功能，但是其最為人詬病的是其性能問題，尤其在一些大型項(xiàng)目上，構(gòu)建花費(fèi)的時(shí)間可能會(huì)達(dá)到幾分鐘甚至幾十分鐘，性能問題是目前 webpack 最大的短板。因此 Rspack 解決的問題核心就是 webpack 的性能問題。 Rspack 比 webpack 快得益于如下幾方面：

• Rust 語言優(yōu)勢(shì): Rspack 使用 Rust 語言編寫， 得益于 Rust 的高性能編譯器支持， Rust 編譯生成的 Native Code 通常比 JavaScript 性能更為高效。
• 高度并行的架構(gòu): webpack 受限于 JavaScript 對(duì)多線程的羸弱支持，導(dǎo)致其很難進(jìn)行高度的并行化計(jì)算，而得益于 Rust 語言的并行化的良好支持， Rspack 采用了高度并行化的架構(gòu)，如模塊圖生成，代碼生成等階段，都是采用多線程并行執(zhí)行，這使得其編譯性能隨著 CPU 核心數(shù)的增長而增長，充分挖掘 CPU 的多核優(yōu)勢(shì)。
• 內(nèi)置大部分的功能: 事實(shí)上 webpack 本身的性能足夠高效，但是因?yàn)?webpack 本身內(nèi)置了較少的功能，這使得我們?cè)谑褂?webpack 做現(xiàn)代 Web App 開發(fā)時(shí)，通常需要配合很多的 plugin 和 loader 進(jìn)行使用，而這些 loader 和 plugin 往往是性能的瓶頸，而 Rspack 雖然支持 loader 和 plugin，但是保證絕大部分常用功能都內(nèi)置在 Rspack 內(nèi)，從而減小 JS plugin | loader 導(dǎo)致的低性能和通信開銷問題。
• 增量編譯: 盡管 Rspack 的全量編譯足夠高效，但是當(dāng)項(xiàng)目龐大時(shí)，全量的編譯仍然難以滿足 HMR 的性能要求，因此在 HMR 階段，我們采用的是更為高效的增量編譯策略，從而保證，無論你的項(xiàng)目多大，其 HMR 的開銷總是控制在合理范圍內(nèi)。

和 Vite 的區(qū)別

Vite 提供了很好的開發(fā)者體驗(yàn)，但 Vite 在生產(chǎn)構(gòu)建中依賴了 Rollup ，因此與其他基于 JavaScript 的工具鏈一樣，面臨著生產(chǎn)環(huán)境的構(gòu)建性能問題。

另外，Rollup 相較于 webpack 做了一些平衡取舍，在這里同樣適用。比如，Rollup 缺失了 webpack 對(duì)于拆包的靈活性，即缺失了 optimization.splitChunks 提供的很多功能。

和 esbuild 的區(qū)別

我們?cè)趦?nèi)部進(jìn)行過大規(guī)模地將 esbuild 作為通用的 Web App 構(gòu)建工具的實(shí)踐，但是遇到如下一些問題：

缺乏對(duì) JavaScript HMR 和增量編譯的良好支持，這導(dǎo)致大型項(xiàng)目中的 HMR 性能較差。拆包策略也非常原始，難以滿足業(yè)務(wù)復(fù)雜多變的拆包優(yōu)化需求。

和 Turbopack 的區(qū)別

Rspack 和 turbopack 都是基于 Rust 實(shí)現(xiàn)的 bundler，且都發(fā)揮了 Rust 語言的優(yōu)勢(shì)。

與 turbopack 不同的是，Rspack 選擇了對(duì) webpack 生態(tài)兼容的路線，一方面，這些兼容可能會(huì)帶來一定的性能開銷，但在實(shí)際的業(yè)務(wù)落地中，我們發(fā)現(xiàn)對(duì)于大部分的應(yīng)用來說，這些性能開銷是可以接受的，另一方面，這些兼容也使得 Rspack 可以更好地與上層的框架和生態(tài)進(jìn)行集成，能夠?qū)崿F(xiàn)業(yè)務(wù)的漸進(jìn)式遷移。

和 Rollup 的區(qū)別

Rspack 和 Rollup 雖然都是打包工具，但是兩者的側(cè)重領(lǐng)域不同，Rollup 更適合用于打包庫，而 Rspack 適合用于打包應(yīng)用。因此 Rspack 對(duì)打包應(yīng)用進(jìn)行了很多優(yōu)化，如 HMR、Bundle splitting 等功能，而 Rollup 則比 Rspack 的編譯產(chǎn)物對(duì)庫更為友好，如更好的 ESM 產(chǎn)物支持。 社區(qū)上也有很多的工具在 Rollup 基礎(chǔ)上進(jìn)行了一定的封裝，提供了對(duì)應(yīng)用打包更友好的支持，如 vite 和 wmr, 目前 Rspack 比 Rollup 有更好的生產(chǎn)環(huán)境構(gòu)建性能。

和 Parcel 的區(qū)別

Rspack 的整體架構(gòu)與 Parcel 有很多共同之處。例如都將 CSS 資源視為一等公民，都支持基于 filter 的 transformer。然而，Parcel 更加注重開箱即用的體驗(yàn)，而 Rspack 更加注重為上層框架提供靈活的配置。Parcel 開創(chuàng)性地設(shè)計(jì)了 Unified Graph 和使 HTML 成為一等公民的特性。Rspack 也計(jì)劃在未來支持這些特性。