Appearance
前端构建版图：Bundler、Transpiler、Minifier 与 Dev Server 的分工
主题边界
- 现代前端构建链不是单工具完成，而是模块解析、语法转换、产物优化、开发服务和资源处理多个阶段协作。
- 先把工具职责边界讲清，后续讨论性能与产物问题才有坐标。
机制与流程
- Bundler 构建模块依赖图、切 chunk、生成运行时代码与产物清单；Transpiler 负责语法或语言层转换，如 TypeScript 擦除类型、Babel 做语法降级。
- Minifier 做压缩、dead code 删除、名称压缩；Dev Server 负责增量编译、文件监听、HMR 和请求分发。
- 同一个工具可能兼任多职，比如 esbuild 既能转译也能打包，但要分清主职责。
关键差异
- Webpack、Rollup、Rspack、Vite、esbuild 覆盖范围不同，不能只按“快不快”简单排序。
- 开发态关注反馈速度与可调试性，生产态关注产物质量、兼容性和可缓存性。
边界条件
- 工程问题经常不是“换个工具就好”，而是依赖结构、副作用标记、模块格式和插件链没设计好。
- 把所有构建阶段都归给单一工具，会导致排查问题时定位失焦。
工程落点
- 面试和工程里都需要能解释某个问题发生在解析、转译、打包还是运行阶段。
- 当项目规模上来后，构建链分层理解比死记某个工具 API 更重要。