快速嚐鮮位元組剛剛開源的 Rspack,卷不動了?

語言: CN / TW / HK

theme: cyanosis

今天,位元組跳動剛剛開源了 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

安裝依賴: bash npm install -D babel-loader @babel/core @vue/babel-plugin-jsx

配置檔案: ```js // 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


如果你覺得內容對你有幫助,歡迎「轉發點贊收藏

你的鼓勵是我最大的支援,猛戳“關注”,後續文章更精彩。

本文正在參加「金石計劃」