这一章里，把构建工具看成“施工队和总包机械”。代码写完还没法直接住人，得先切割、运输、拼装、打包。
#Vite —— 新城快速路
import { defineConfig } from 'vite';
export default defineConfig({});Vite 解决的是：
- 开发启动慢
- HMR 慢
- 新项目配置重
它是现代前端默认感最强的构建基础设施之一。
#Webpack —— 老城总调度中心
module.exports = {
entry: './src/index.js',
};Webpack 仍然强在：
- 插件生态厚
- 历史项目多
- 深度可定制
但如果你是新项目，通常不会优先从它起步。
#Rspack —— 保留老城规则，但换上高速引擎
import { defineConfig } from '@rspack/cli';
export default defineConfig({
entry: { main: './src/index.js' },
});Rspack 很适合：
- 有 Webpack 经验
- 想吃性能提升
- 又不想完全换心智
#Turbopack —— Next.js 城内环线
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
turbopack: {},
};
export default nextConfig;如果你已经在 Next.js 里，Turbopack 是官方默认路线。
构建工具速查：
新项目默认先看：Vite
Next.js 项目默认先看：Turbopack
Webpack 老项目提速：Rspack
超重历史包袱项目：Webpack 继续扛