从 35 秒到 2.8 秒」：我把 Webpack 迁移到 Rspack 后，性能暴涨 12 倍

📋 目录

• 背景介绍
• 问题分析
  • 典型症状
  • 根本原因
  • 影响范围
• 解决方案：Rspack构建优化
  • 核心设计原则
  • 架构对比图
  • 关键优化策略
• 完整实现
  • 步骤1：项目初始化与依赖安装
  • 步骤2：Rspack基础配置
  • 步骤3：代码分割优化
  • 步骤4：Loader链优化
  • 步骤5：Tree Shaking配置
  • 步骤6：HMR热更新优化
• 框架集成
  • Vue 3 + Rspack完整配置
  • React + Rspack完整配置
  • TypeScript支持
• 性能监控与对比
  • 构建时间对比
  • 打包体积对比
  • HMR速度对比
• 最容易踩的5个坑
• 面试高频考点
• 总结与扩展

背景介绍

在现代前端开发中，构建工具的性能直接影响开发体验和项目交付效率。随着项目规模的增长，传统的Webpack构建逐渐暴露出性能瓶颈：

典型大型Vue项目的构建痛点：
├── 冷启动时间：30-60秒（开发者等待焦虑）
├── 热更新时间：3-5秒（代码修改后反馈慢）
├── 生产构建：2-5分钟（CI/CD流水线阻塞）
└── 内存占用：2-4GB（开发机卡顿）

Rspack的出现改变了这一局面：

• 由字节跳动开源，使用Rust编写
• 兼容Webpack生态（loader、plugin无缝迁移）
• 性能提升10-15倍（官方数据）
• 内置SWC编译器（替代Babel，速度提升20倍）

问题分析

典型症状

在实际项目中，Webpack构建性能问题通常表现为：

症状1：冷启动时间过长

# Webpack构建输出
$ npm run dev
Starting development server...
[..................] 等待模块编译（持续30秒以上）
✔ Server listening on http://localhost:8080
Ready in 35.2s # ❌ 开发者需要等待超过半分钟

症状2：热更新延迟

// 开发者修改了一个Vue组件
<script setup>
const message = 'Hello World' // 修改这里
</script>

// Webpack HMR需要3-5秒才能反映到浏览器
// 期间开发者无法看到修改效果，打断思路

症状3：内存泄漏导致频繁重启

# 开发2-3小时后
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed
JavaScript heap out of memory

# 必须手动重启开发服务器，丢失当前工作状态

症状4：生产构建缓慢

# CI/CD流水线
$ npm run build
Building for production...
[##################] 95% emitting (持续3-5分钟)

# 每次发布都需要长时间等待，影响迭代速度

根本原因

通过深入分析，可以发现这些问题的根本原因是：

1. JavaScript单线程瓶颈

Webpack基于Node.js，运行在单线程上：
├── 模块解析：串行执行（一个接一个）
├── Loader转换：串行执行（每个文件依次处理）
├── 插件执行：同步阻塞（插件之间无法并行）
└── 代码生成：主线程负责（阻塞后续任务）

2. Loader链冗余

// 典型的Vue项目loader配置
module.exports = {
module: {
rules: [
{
test: /\\.vue$/,
use: [
'vue-loader', // 第1层：解析.vue文件
'eslint-loader', // 第2层：代码检查（可选）
'cache-loader' // 第3层：缓存（额外开销）
]
},
{
test: /\\.js$/,
use: [
'babel-loader', // 第1层：ES6+转译
'eslint-loader', // 第2层：代码检查
'thread-loader', // 第3层：线程池（额外管理开销）
'cache-loader' // 第4层：缓存
]
}
]
}
}
// ❌ 每个文件需要经过4-5层loader处理

3. 代码分割不合理

// 默认配置下，所有vendor库打包到一个文件
chunk–vendors.js: 2.5MB # ❌ 包含Vue、Element UI、Axios等所有库
app.js: 800KB # 业务代码
// 结果：首次加载需要下载3.3MB资源

4. Tree Shaking不彻底

// 即使只使用了Element UI的Button组件
import { Button } from 'element-ui'

// Webpack可能打包了整个Element UI库
// 因为CSS side-effects和动态导入难以分析

影响范围

构建性能问题的影响远超想象：

解决方案：Rspack构建优化

核心设计原则

为了解决上述问题，我们采用Rspack构建优化方案，遵循以下设计原则：

原则1：Rust原生性能（Native Performance）

Rspack使用Rust编写，充分利用多核CPU：
├── 模块解析：并行执行（多线程）
├── Loader转换：并行执行（线程池）
├── 插件执行：异步非阻塞
└── 代码生成：增量编译（只重新编译变化的部分）

原则2：智能缓存（Intelligent Caching）

Rspack内置多层缓存机制：
├── 文件系统缓存：磁盘持久化（重启后仍有效）
├── 内存缓存：运行时快速访问
├── 模块图缓存：避免重复解析依赖关系
└── 产物缓存：未变化的模块直接复用

原则3：细粒度代码分割（Fine-grained Code Splitting）

按功能和使用频率拆分chunk：
├── chunk-vue.js: Vue核心库（100KB）
├── chunk-element.js: Element UI（按需加载，300KB）
├── chunk-utils.js: 工具函数（50KB）
├── chunk-layout.js: 布局组件（80KB）
└── app.js: 业务代码（200KB）
// 总计：730KB vs 原来的3.3MB，减少78%

原则4：内置优化（Built-in Optimizations）

Rspack内置多种优化策略：
├── SWC编译器：替代Babel（速度快20倍）
├── CSS提取：自动提取为独立文件
├── Tree Shaking：更激进的无用代码移除
└── Scope Hoisting：减少闭包开销

架构对比图

┌─────────────────────────────────────────────────┐
│ Webpack架构（传统） │
│ │
│ Node.js (单线程) │
│ ↓ │
│ 串行模块解析 │
│ ↓ │
│ Loader链（4-5层） │
│ ↓ │
│ 插件执行（同步阻塞） │
│ ↓ │
│ 代码生成 │
│ │
│ 耗时：35秒启动，3秒HMR │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│ Rspack架构（现代） │
│ │
│ Rust (多线程) │
│ ↓ │
│ 并行模块解析（多线程） │
│ ↓ │
│ SWC编译（并行执行） │
│ ↓ │
│ 插件执行（异步非阻塞） │
│ ↓ │
│ 增量代码生成 │
│ │
│ 耗时：3秒启动，300ms HMR │
└─────────────────────────────────────────────────┘

关键优化策略

策略1：移除冗余Loader

// ❌ Webpack配置（冗余）
{
test: /\\.vue$/,
use: ['vue-loader', 'eslint-loader', 'cache-loader']
}

// ✅ Rspack配置（精简）
{
test: /\\.vue$/,
loader: 'vue-loader' // Rspack内置缓存，无需cache-loader
}

策略2：使用SWC替代Babel

// ❌ Webpack + Babel（慢）
{
test: /\\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 耗时的AST转换
}
}
}

// ✅ Rspack + SWC（快）
{
test: /\\.js$/,
loader: 'builtin:swc-loader', // Rust实现，快20倍
options: {
jsc: {
parser: {
syntax: 'ecmascript'
}
}
}
}

策略3：精细化代码分割

// ❌ 默认配置（一个大文件）
optimization: {
splitChunks: {
chunks: 'all'
}
}

// ✅ 精细化配置（多个小文件）
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vue: {
test: /[\\\\/]node_modules[\\\\/](vue|vue-router|vuex)[\\\\/]/,
name: 'chunk-vue',
priority: 20
},
element: {
test: /[\\\\/]node_modules[\\\\/]element-plus[\\\\/]/,
name: 'chunk-element',
priority: 15
},
utils: {
test: /[\\\\/]src[\\\\/]utils[\\\\/]/,
name: 'chunk-utils',
priority: 10
}
}
}
}

完整实现

步骤1：项目初始化与依赖安装

环境准备

# 确保Node.js版本 >= 16
node –version # v18.x 推荐

# 创建新项目（或使用现有项目）
npm create vite@latest my-vue-app — –template vue
cd my-vue-app

安装Rspack及相关依赖

# 安装Rspack核心
npm install @rspack/core @rspack/cli @rspack/plugin-html –save-dev

# 安装Vue支持
npm install vue@^3.3.4
npm install @vitejs/plugin-vue –save-dev # 用于Vue SFC支持

# 安装常用插件
npm install @rspack/plugin-react-refresh –save-dev # React热更新（如需要）
npm install postcss postcss-loader autoprefixer –save-dev # CSS处理

package.json配置

{
"name": "vue-rspack-app",
"version": "1.0.0",
"scripts": {
"dev": "rspack serve",
"build": "rspack build",
"preview": "rspack preview"
},
"dependencies": {
"vue": "^3.3.4",
"vue-router": "^4.2.4",
"pinia": "^2.1.6",
"element-plus": "^2.3.8",
"axios": "^1.5.0"
},
"devDependencies": {
"@rspack/core": "^0.3.0",
"@rspack/cli": "^0.3.0",
"@rspack/plugin-html": "^0.3.0",
"@vitejs/plugin-vue": "^4.3.4",
"typescript": "^5.1.6"
}
}

步骤2：Rspack基础配置

创建 rspack.config.js

const path = require('path');
const { DefinePlugin } = require('@rspack/core');
const HtmlRspackPlugin = require('@rspack/plugin-html');
const VueLoaderPlugin = require('vue-loader/dist/plugin').default;

module.exports = {
// 入口文件
entry: './src/main.js',

// 输出配置
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[contenthash:8].js',
chunkFilename: 'js/[name].[contenthash:8].chunk.js',
clean: true, // 自动清理旧文件
publicPath: '/'
},

// 模块解析
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.resolve(__dirname, 'src'),
'~': path.resolve(__dirname, 'node_modules')
}
},

// 模块规则
module: {
rules: [
// Vue文件处理
{
test: /\\.vue$/,
loader: 'vue-loader',
type: 'javascript/auto' // 重要：避免重复处理
},

// JavaScript处理（使用SWC）
{
test: /\\.js$/,
loader: 'builtin:swc-loader',
exclude: /node_modules/,
options: {
jsc: {
parser: {
syntax: 'ecmascript',
jsx: false
},
transform: null,
externalHelpers: false
},
env: {
targets: 'Chrome >= 87' // 根据目标浏览器调整
}
}
},

// CSS处理
{
test: /\\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
],
type: 'javascript/auto'
},

// SCSS处理
{
test: /\\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
type: 'javascript/auto'
},

// 图片资源
{
test: /\\.(png|jpe?g|gif|svg)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024 // 8KB以下转base64
}
},
generator: {
filename: 'images/[name].[hash:8][ext]'
}
},

// 字体文件
{
test: /\\.(woff2?|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[hash:8][ext]'
}
}
]
},

// 插件配置
plugins: [
// HTML模板
new HtmlRspackPlugin({
template: './public/index.html',
title: 'Vue Rspack App'
}),

// Vue支持
new VueLoaderPlugin(),

// 环境变量
new DefinePlugin({
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
})
],

// 开发服务器
devServer: {
port: 8080,
hot: true,
open: true,
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
},

// 性能优化
optimization: {
// Tree Shaking
usedExports: true,

// 代码分割
splitChunks: {
chunks: 'all',
maxInitialRequests: 10,
cacheGroups: {
// Vue核心库
vue: {
test: /[\\\\/]node_modules[\\\\/](vue|vue-router|vuex|pinia)[\\\\/]/,
name: 'chunk-vue',
priority: 20,
reuseExistingChunk: true
},
// Element UI
element: {
test: /[\\\\/]node_modules[\\\\/]element-plus[\\\\/]/,
name: 'chunk-element',
priority: 15,
reuseExistingChunk: true
},
// 工具库
utils: {
test: /[\\\\/]src[\\\\/]utils[\\\\/]/,
name: 'chunk-utils',
priority: 10,
reuseExistingChunk: true
},
// 公共模块
common: {
name: 'chunk-common',
minChunks: 2,
priority: 5,
reuseExistingChunk: true
}
}
},

// 运行时代码
runtimeChunk: 'single'
},

// 性能提示
performance: {
hints: 'warning',
maxAssetSize: 300 * 1024, // 300KB
maxEntrypointSize: 300 * 1024
}
};

步骤3：代码分割优化

高级代码分割策略

// rspack.config.js 中的 optimization 配置
optimization: {
splitChunks: {
chunks: 'all',
maxInitialRequests: 20, // 允许最多20个初始请求
maxAsyncRequests: 30, // 允许最多30个异步请求

cacheGroups: {
// 第1层：框架核心（最不常变化）
framework: {
test: /[\\\\/]node_modules[\\\\/](vue|vue-router|pinia|react|react-dom)[\\\\/]/,
name: 'chunk-framework',
priority: 30,
reuseExistingChunk: true,
enforce: true // 强制独立打包
},

// 第2层：UI组件库
ui: {
test: /[\\\\/]node_modules[\\\\/](element-plus|ant-design-vue|vant)[\\\\/]/,
name: 'chunk-ui',
priority: 25,
reuseExistingChunk: true
},

// 第3层：工具库
vendor: {
test: /[\\\\/]node_modules[\\\\/](axios|lodash|dayjs)[\\\\/]/,
name: 'chunk-vendor',
priority: 20,
reuseExistingChunk: true
},

// 第4层：业务公共代码
business: {
test: /[\\\\/]src[\\\\/](components|layouts)[\\\\/]/,
name: 'chunk-business',
priority: 15,
minChunks: 2,
reuseExistingChunk: true
},

// 第5层：工具函数
utils: {
test: /[\\\\/]src[\\\\/]utils[\\\\/]/,
name: 'chunk-utils',
priority: 10,
reuseExistingChunk: true
}
}
}
}

动态导入优化

// src/router/index.js
const routes = [
{
path: '/',
component: () => import('@/layouts/MainLayout.vue'), // 懒加载布局
children: [
{
path: 'dashboard',
component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')
},
{
path: 'users',
component: () => import(/* webpackChunkName: "users" */ '@/views/UserList.vue'),
children: [
{
path: ':id',
component: () => import(/* webpackChunkName: "user-detail" */ '@/views/UserDetail.vue')
}
]
}
]
}
];

步骤4：Loader链优化

精简Loader配置

module: {
rules: [
// ✅ Vue文件：只需vue-loader
{
test: /\\.vue$/,
loader: 'vue-loader',
type: 'javascript/auto'
},

// ✅ JavaScript：只用SWC，无需Babel
{
test: /\\.js$/,
loader: 'builtin:swc-loader',
exclude: /node_modules/,
options: {
jsc: {
parser: {
syntax: 'ecmascript',
decorators: true // 支持装饰器
}
}
}
},

// ✅ TypeScript：SWC直接支持
{
test: /\\.ts$/,
loader: 'builtin:swc-loader',
exclude: /node_modules/,
options: {
jsc: {
parser: {
syntax: 'typescript',
tsx: false
}
}
}
},

// ✅ CSS：简化链路
{
test: /\\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}
],
type: 'javascript/auto'
}
]
}

PostCSS配置（postcss.config.js）

module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Chrome >= 87',
'Firefox >= 78',
'Safari >= 14'
]
},
// 如需CSS压缩（生产环境）
…(process.env.NODE_ENV === 'production' && {
'cssnano': {
preset: ['default', {
discardComments: {
removeAll: true
}
}]
}
})
}
};

步骤5：Tree Shaking配置

启用激进Tree Shaking

// rspack.config.js
module.exports = {
mode: 'production', // 生产模式自动启用Tree Shaking

optimization: {
// 标记未使用的导出
usedExports: true,

// 合并相同模块
mergeDuplicateChunks: true,

// 移除未使用的模块
removeAvailableModules: true,

// 侧边效应控制
sideEffects: true
}
};

package.json中标记sideEffects

{
"name": "my-vue-app",
"version": "1.0.0",
"sideEffects": [
"*.css",
"*.scss",
"src/polyfills.js"
]
}

按需导入示例

// ❌ 错误：导入整个库
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

// ✅ 正确：按需导入
import { ElButton, ElInput, ElTable } from 'element-plus';
import 'element-plus/es/components/button/style/css';
import 'element-plus/es/components/input/style/css';
import 'element-plus/es/components/table/style/css';

// ✅ 更佳：使用自动导入插件（unplugin-vue-components）
// 模板中直接使用 <el-button>，自动导入

步骤6：HMR热更新优化

开发服务器优化

devServer: {
port: 8080,
hot: true, // 启用HMR
liveReload: false, // 禁用实时刷新（与HMR冲突）
open: true,

// 静态文件监听优化
static: {
directory: path.join(__dirname, 'public'),
watch: {
ignored: [
'**/node_modules/**',
'**/.git/**',
'**/dist/**'
]
}
},

// 代理配置
proxy: [
{
context: ['/api'],
target: 'http://localhost:3000',
changeOrigin: true
}
],

// 压缩
compress: true,

// 客户端配置
client: {
overlay: {
errors: true,
warnings: false
},
progress: true // 显示编译进度
}
},

// 缓存优化
cache: {
type: 'filesystem', // 文件系统缓存
buildDependencies: {
config: [__filename] // 配置文件变化时清除缓存
}
},

// 监控优化
watchOptions: {
ignored: /node_modules/,
poll: 1000, // 每秒检查一次（可选）
aggregateTimeout: 300 // 延迟300ms合并多次变化
}

框架集成

Vue 3 + Rspack完整配置

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './store';

// 全局样式
import './styles/index.scss';

const app = createApp(App);

app.use(router);
app.use(pinia);

app.mount('#app');

store/index.js（Pinia）

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

router/index.js

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
{
path: '/',
redirect: '/dashboard'
},
{
path: '/dashboard',
component: () => import('@/views/Dashboard.vue')
},
{
path: '/users',
component: () => import('@/views/UserList.vue')
}
];

const router = createRouter({
history: createWebHistory(),
routes
});

export default router;

React + Rspack完整配置

rspack.config.js（React版本）

const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');

module.exports = {
// … 其他配置

module: {
rules: [
{
test: /\\.(jsx?|tsx?)$/,
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
tsx: true, // 支持TSX
jsx: true // 支持JSX
},
transform: {
react: {
runtime: 'automatic', // React 17+
refresh: process.env.NODE_ENV !== 'production'
}
}
}
}
}
]
},

plugins: [
// React热更新
…(process.env.NODE_ENV !== 'production' ? [new ReactRefreshPlugin()] : [])
]
};

TypeScript支持

tsconfig.json

{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,

/* Path mapping */
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

rspack.config.js（TypeScript增强）

module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.vue']
},

module: {
rules: [
{
test: /\\.tsx?$/,
loader: 'builtin:swc-loader',
exclude: /node_modules/,
options: {
jsc: {
parser: {
syntax: 'typescript',
tsx: true
}
}
}
}
]
}
};

性能监控与对比

构建时间对比

测试环境：MacBook Pro M1, 16GB RAM, 500GB SSD

构建日志对比

# Webpack
$ npm run dev
Starting development server...
[====================] 95% emitting (35秒)
✔ Server ready at http://localhost:8080

# Rspack
$ npm run dev
Starting development server...
[====================] 95% emitting (2.8秒)
✔ Server ready at http://localhost:8080

打包体积对比

优化原因分析：

HMR速度对比

测试场景：修改Dashboard.vue组件中的message变量

// Dashboard.vue
<script setup>
const message = ref('Hello World') // 修改这里
</script>

最容易踩的5个坑

坑1：忘记设置type: ‘javascript/auto’

错误示例

{
test: /\\.vue$/,
loader: 'vue-loader'
// ❌ 缺少 type: 'javascript/auto'
}

后果：Vue组件被重复处理，导致编译错误或性能下降

正确做法

{
test: /\\.vue$/,
loader: 'vue-loader',
type: 'javascript/auto' // ✅ 明确指定类型
}

坑2：SWC配置错误的语法支持

错误示例

{
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'ecmascript'
// ❌ 缺少jsx配置，导致JSX语法报错
}
}
}
}

正确做法

{
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true // ✅ 启用JSX支持
},
transform: {
react: {
runtime: 'automatic'
}
}
}
}
}

坑3：代码分割过度

错误示例

splitChunks: {
cacheGroups: {
// ❌ 为每个库都创建独立chunk
vue: { test: /vue/, name: 'vue' },
router: { test: /vue-router/, name: 'router' },
axios: { test: /axios/, name: 'axios' },
lodash: { test: /lodash/, name: 'lodash' },
dayjs: { test: /dayjs/, name: 'dayjs' }
}
}

后果：产生过多小文件，增加HTTP请求数，反而降低性能

正确做法

splitChunks: {
cacheGroups: {
// ✅ 按功能分组
framework: {
test: /(vue|vue-router|pinia)/,
name: 'chunk-framework',
priority: 20
},
vendor: {
test: /(axios|lodash|dayjs)/,
name: 'chunk-vendor',
priority: 15
}
}
}

坑4：忽略缓存配置

错误示例

// ❌ 没有配置缓存，每次全量编译
module.exports = {
// 无cache配置
}

正确做法

module.exports = {
cache: {
type: 'filesystem', // ✅ 文件系统缓存
buildDependencies: {
config: [__filename]
}
}
}

坑5：生产环境未启用优化

错误示例

// ❌ 生产环境与开发环境配置相同
module.exports = {
mode: 'production',
optimization: {
// 无优化配置
}
}

正确做法

module.exports = {
mode: 'production',
optimization: {
usedExports: true, // ✅ Tree Shaking
minimize: true, // ✅ 代码压缩
mergeDuplicateChunks: true, // ✅ 合并重复模块
removeAvailableModules: true // ✅ 移除未使用模块
}
}

面试高频考点

考点1：Rspack相比Webpack的优势

回答要点：

考点2：如何实现代码分割？

回答要点：

考点3：Tree Shaking的原理

回答要点：

考点4：HMR的工作原理

回答要点：

考点5：如何优化构建性能？

回答要点：

总结与扩展

核心经验总结

扩展阅读

• Rspack官方文档
• SWC vs Babel性能对比
• 代码分割最佳实践
• Tree Shaking深入理解