核心判断
构建工具的渐进式演进，本质上是处理时机、处理粒度和能力调度方式的变化：从构建前预整合，走向开发时按需编译，再扩展为插件、资源加载和 Monorepo 共同参与的工程能力调度系统。
它要解决的核心问题是：在正确的时间，以正确的粒度，处理真正需要处理的代码。
这个主题要回答的问题
- 构建工具为什么会从“提前整合所有代码”转向“按需处理必要模块”？
- Webpack、Vite、插件系统和 Monorepo 分别改变了构建流程中的哪个层面？
- 在真实项目中，如何按开发、生产、运行时和架构边界分配构建能力？
主题结构
- 构建阶段的预整合：Webpack 的预整合阶段代表先完整理解依赖图、再统一转换与输出产物的范式，优势是产物可控，代价是开发反馈容易变慢。
- 开发阶段的按需编译：Vite 的按需编译阶段把处理时机推迟到浏览器请求发生时，用原生 ESM 缩短启动与反馈路径。
- 构建能力的插件化增强：插件化增强阶段让 TypeScript、JSX、CSS、压缩、分析等能力按项目需要叠加，而不是全部内置到基础流程中。
- 工程架构层的渐进集成：架构级渐进集成把优化对象从单应用模块扩展到包边界、依赖图、任务图和缓存策略。
- 运行时资源调度的延伸：代码分割、动态导入、预加载和懒加载把构建决策延伸到浏览器加载、路由切换、组件渲染和用户交互路径中。
演进维度
| 维度 | 变化 | 代表现象 |
|---|---|---|
| 时机维度 | 从构建前统一处理，到开发时 / 请求时按需处理 | Webpack → Vite |
| 粒度维度 | 从应用级 bundle，到模块级、包级和任务级处理 | ESM、代码分割、按需导入、任务缓存 |
| 体验维度 | 从功能完整优先，到反馈速度和开发体验优先 | 快速启动、精确 HMR |
| 架构维度 | 从单体应用构建，到多包、多应用协同构建 | Monorepo、依赖图、远程缓存 |
这些维度共同指向一个趋势：构建工具越来越少地“提前做完所有事情”，越来越多地“根据实际场景调度必要能力”。
实际项目中的应用要点
- 分层构建配置：基础层定义共享目标和转换规则，开发增强层关注启动速度、代理、调试、sourcemap、HMR，生产增强层关注压缩、缓存、分包、预加载和产物分析。
- 按环境启用能力：配置重点不是“能力越多越好”，而是让开发、测试、生产阶段只启用当下真正需要的构建能力。
- 把构建连接到运行时加载：代码分割、动态导入、预加载和懒加载都在回答同一个问题：哪些代码必须立即加载，哪些代码可以推迟到用户路径触发后再加载。
- 把单应用优化上升为工程结构设计：当项目规模扩大后，包边界、依赖图、任务缓存和远程缓存会影响构建工具真正需要处理的范围。
相关概念 / 下层卡片
- 预整合打包范式：解释构建工具如何通过构建阶段的统一分析与转换获得产物可控性。
- 原生 ESM 驱动的按需编译：解释 Vite 如何把开发时编译推迟到浏览器请求发生时。
- 插件化增强构建能力：解释构建工具如何通过插件逐步叠加额外能力。
- 架构级构建优化：解释构建优化如何从单应用进入多包架构层面。
相关入口
暂时结论
构建工具演进不是简单地从 Webpack 替换为 Vite，而是从“提前预测并整合所有代码”，转向“根据开发、构建、加载和架构场景，按需调度必要能力”。
Webpack 代表构建阶段的预整合范式，Vite 代表开发阶段的按需编译范式，插件系统让构建能力可以渐进增强，Monorepo 则把构建优化推进到工程架构层面。