构建工具知识体系概览
什么是构建工具？
浏览器只认识原生的 HTML、CSS 和 JavaScript。但现代前端开发中，我们写的是 TypeScript、JSX、SCSS、Vue SFC（单文件组件）等浏览器无法直接运行的代码。构建工具的作用就是把这些"源代码"转换、打包、优化成浏览器能运行的文件。
以一个 React + TypeScript 项目为例，构建工具需要做：
- 编译 TypeScript → 转成 JavaScript
- 编译 JSX → 转成
React.createElement()调用 - 处理 CSS → 处理 Sass/PostCSS、提取 CSS 文件
- 模块打包 → 将成百上千个文件合并为少数几个 bundle
- 代码优化 → 移除死代码（Tree Shaking）、压缩（Minify）、生成 Source Map
- 开发体验 → 热模块替换（HMR）、自动刷新
为什么需要构建工具？ 浏览器本质只认 JS/CSS/HTML，但日常写的是 TS、JSX、Vue SFC、SCSS：
- 把这些「源码」编译成浏览器能跑的代码（语法降级、JSX 转
createElement）。 - 把成百上千的模块打包成少数几个 bundle，避免大量 HTTP 请求。
- 顺手做一系列优化：Tree Shaking、压缩、Source Map、代码分割、HMR。
当前主流工具的格局是怎样的？ 按定位分两类：
- 应用打包：
Webpack（生态最全）、Vite（开发期 No-Bundle 极快）、Rspack（Rust 重写的 Webpack）、Turbopack（Next.js 专用）。 - 库打包 / 编译器：
Rollup（ESM-first，库打包首选）、esbuild（Go）、SWC（Rust，Babel 替代品）。 - 趋势：底层语言从 JS → Go/Rust，编译速度从秒级到毫秒级；Vite 已成新项目默认选择，老项目逐步迁 Rspack 或 Vite。
Webpack 和 Vite 最本质的区别是什么？ 开发模式的取舍完全不同：
- Webpack：开发期就要把所有模块打包成 bundle 才能起 dev server，项目越大启动越慢。
- Vite：利用浏览器原生
<script type="module">，不打包，按需编译每个模块；启动速度和项目规模无关。 - 生产环境 Vite 仍用 Rollup 打包，Webpack 用自己的 bundler。
主流构建工具的格局
| 工具 | 语言 | 定位 | 特点 |
|---|---|---|---|
| Webpack | JavaScript | 通用打包器 | 功能最全、生态最大、配置复杂 |
| Vite | JavaScript | 下一代构建工具 | 开发秒启动、基于原生 ESM |
| Rollup | JavaScript | 库打包器 | ESM 优先、产物干净 |
| esbuild | Go | 极速编译器 | 速度是 Webpack 的 10~100 倍 |
| SWC | Rust | 极速编译器 | Babel 的替代品 |
| Rspack | Rust | Webpack 兼容 | Rust 重写的 Webpack |
Webpack 曾统治前端构建领域多年，但随着项目规模增大，其构建速度成为痛点。Vite 利用浏览器原生的 ES Module 实现了"秒启动"的开发体验——开发时不需要打包，浏览器按需请求每个模块。这是 Vite 和 Webpack 最本质的区别。
核心知识点概览
Webpack 核心原理
Webpack 的核心是模块打包——它把每一个文件（JS、CSS、图片）都视为一个模块，通过依赖分析构建出依赖图（Dependency Graph），然后将整个依赖图打包为一个或多个 bundle。Loader 负责文件转换（如 babel-loader 编译 JS），Plugin 负责功能扩展（如 HtmlWebpackPlugin 生成 HTML）。
Vite 为什么这么快？
Vite 开发模式下不打包——浏览器通过 <script type="module"> 按需请求每个模块文件，Vite 用 esbuild 即时编译（毫秒级）。相比 Webpack 必须先把所有模块打包成 bundle 才能启动开发服务器，Vite 的启动速度与项目规模无关——项目再大也能秒启。生产构建时 Vite 使用 Rollup 打包，保证产物质量。
Tree Shaking——自动删除无用代码
Tree Shaking 是通过静态分析 ES Module 的 import/export 关系，自动移除没有被引用的代码。它依赖于 ES Module 的静态结构——这也是为什么 CommonJS（require）无法被 Tree Shake 的原因（require 是运行时动态的）。
代码分割——按需加载
代码分割将一个巨大的 bundle 拆分成多个小 chunk，按需加载。常见策略：路由级分割（每个页面一个 chunk）、组件级分割（React.lazy() / defineAsyncComponent()）。配合 prefetch/preload 可以在用户可能需要之前预加载资源。
Babel——JavaScript 的"翻译器"
Babel 将新版本的 JavaScript 语法转换为旧版本，确保代码能在低版本浏览器中运行。它的工作流程是：源代码 → 解析为 AST → Transform 转换 → Generate 生成新代码。Babel 也是 JSX 编译的工具。
学习建议
- Webpack 核心原理 + Vite 原理 → 面试必考双巨头
- Tree Shaking + 代码分割 → 优化机制必须掌握
- Babel + Loader/Plugin → 理解构建链路
- 构建优化 + Source Map → 工程实践
- Rollup + esbuild/SWC → 了解生态格局
- 模块联邦 + Rspack → 前沿趋势