Rspack - 以 Rust 打造的快速構建工具
Hi 大家好，我是 Johnny，今天要介紹的是一個叫做 Rspack 的構建工具，是 ByteDance 團隊以 Rust 搭建的快速構建引擎，具備與 webpack 系統交互的能力
特點
- 快速的 Dev 啟動性能
- 高效的 Build 性能
- mode 為 production 時預設 tree shaking
- 預設 SplitChunksPlugin 套用拆分模組
- 靈活的配置
- 支援 dynamic import
- 內建 package analyze script
rspack build --analyze,rspack build --json stats.json
透過 Rust 的高度並行化架構，大幅提升編譯性能，與其他工具性能比較的描述在這
使用 Rspack
- 建立專案
$ npm create rspack@latest
$ yarn create rspack
- 配置問題選項
- 專案名稱
- template(react, react-ts, vue)
Rspack 預設在 rspack.config.js 中配置打包相關設定
rspack.config.js
以下為選擇 react-ts template 後產生的預設配置
const rspack = require("@rspack/core");
const refreshPlugin = require("@rspack/plugin-react-refresh");
const isDev = process.env.NODE_ENV === "development";
/**
* @type {import('@rspack/cli').Configuration}
*/
module.exports = {
context: __dirname,
entry: {
main: "./src/main.tsx"
},
resolve: {
extensions: ["...", ".ts", ".tsx", ".jsx"]
},
module: {
rules: [
{
test: /\.svg$/,
type: "asset" // 內建處理，不需要額外安裝 loader，但仍需定義 rule
},
{
test: /\.(jsx?|tsx?)$/,
use: [
{
loader: "builtin:swc-loader",
options: {
sourceMap: true,
jsc: {
parser: {
syntax: "typescript",
tsx: true
},
transform: {
react: {
runtime: "automatic",
development: isDev,
refresh: isDev
}
}
},
env: {
targets: [
"chrome >= 87",
"edge >= 88",
"firefox >= 78",
"safari >= 14"
]
}
}
}
]
}
]
},
plugins: [
new rspack.DefinePlugin({
"process.env.NODE_ENV" : JSON.stringify(process.env.NODE_ENV)
}),
new rspack.ProgressPlugin({}),
new rspack.HtmlRspackPlugin({
template: "./index.html"
}),
isDev ? new refreshPlugin() : null
].filter(Boolean)
};
啟動
$ npm run dev
$ yarn dev
特性
Language 語言支援
- Typescript/JSON TypeScript/JSON 是 Rspack 一等公民，內建自動透過 SWC 處理將 ts 轉譯到 js，但僅為
Transpile-only，若需要對語法進行檢查，則需要另外配置工具如 tsc 對類型檢查 - JSX/TSX JSX/TSX 也是 Rspack 一等公民，內建處理，若使用非 React 的 library 則可以配置類似如下
module.exports = {
builtins: {
react: {
pragma: 'h',
pragmaFrag: 'Fragment',
},
},
};
- CSS CSS 也是 Rspack 一等公民，內建處理，
*.module.css結尾的文件視為 CSS Modules 檔案類型 - PostCSS/LESS/SASS Rspack 已完成兼容，可配置如下
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
// ...
},
},
},
],
type: 'css/auto', // 將 '*.module.css' 視為 css module，否則使用 'css' 即可
},
{
test: /\.less$/,
use: [
{
loader: 'less-loader',
options: {
// ...
},
},
],
type: 'css',
},
{
test: /\.sass$/,
use: [
{
loader: 'sass-loader',
options: {
// ...
},
},
],
type: 'css',
},
],
},
};
- TailwindCSS 安裝依賴
npm install -D tailwindcss autoprefixer postcss postcss-loader，範例配置 css 如下
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
],
type: 'css',
},
],
}
}
Asset Module
資源是 Rspack 一等公民，不需要安裝任何 loader 來處理，支援的資源類型如下
asset/inline: 轉為Base64DataURI（取代 url-loader）asset/resource: 轉為單獨文件輸出（取代 file-loader）asset: 根據條件(體積)自動轉為inlineorresource，預設<= 8096 bytes會以 inline 處理，反之則為 resourceasset/source: 轉為字符串輸出（取代 raw-loader）
雖然不用安裝 loader，但仍然要記得在 rspack config 中加上對應的處理
Web Worker
Web Worker 是 Rspack 一等公民，不需要任何 loader 就可直接使用
new Worker(new URL('./worker.js', import.meta.url));
但需注意不支援使用變數在
new Worker中，比如下面這樣將不會有效果
const url = new URL('./path/to/worker.js', import.meta.url);
const worker = new Worker(url);
模組解析
Rspack 中使用 nodejs_resolver 來解析模組路徑，路徑別名配置跟 webpack 相同
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
}
若使用 ts 也記得在 tsconfig.json 中加上
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
}
}
devServer
devServer 使用的是@rspack/dev-server，配置和 webpack 相似，預設在 dev 模式啟用 HMR，以下是一個配置範例
module.exports = {
devServer: {
hot: true,
compress: true,
historyApiFallback: true,
client: {
logging: "info",
overlay: false,
},
open: true,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},
}