打包工具
前端打包工具概览(Vite/Webpack/Rollup/tsup)
#tech / dev / frontend
#type / concept
#status / growing
打包工具
[!info] related notes
基础概念
前端打包工具是现代 Web 开发的重要基础设施，它们围绕模块化、资源转换、产物优化和开发体验提供能力。
打包工具的功能主要包括：
- 构建依赖图：从入口出发分析模块之间的引用关系。
- 资源转换：把 TypeScript、CSS、图片等资源处理成浏览器可用形式。
- 产物优化：做压缩、拆包、Tree Shaking、缓存友好输出等优化。
- 开发支持：提供本地开发服务器、热更新、代理等能力。
常见理解入口
- 想理解 Webpack 里的模块转换和流程扩展：webpack-loader-and-plugin
- 想理解 Webpack 从入口到产物的主线：webpack-build-process
- 想理解为什么 Vite 开发阶段通常更快：vite-vs-webpack-speed-interview-question
经验总结
打包构建工具的本地开发环境的搭建（类似Vite）
就是开发一个「开发服务器」
- 通过编译工具来资源转换、依赖分析、转换代码生成静态资源。还有其他代码优化等。
- 将打包编译好的静态资源发送给本地开发服务器
参考
面试要点
来自 dependency-selection-interview-question 的面试视角整理。
一句话回答
我选依赖时看四点：是否解决明确问题、是否和现有技术栈兼容、是否能减少长期维护成本、团队能不能真正消化。选型不是追新，而是让工具复杂度刚好匹配项目复杂度。
选型原则
四个判断维度
- 是否解决明确问题：不是为了”流行就上”，而是有具体痛点
- 兼容性：和现有技术栈、构建流程、团队技能是否匹配
- 长期维护成本：社区活跃度、API 稳定性、升级路径是否清晰
- 团队消化能力：学习曲线是否合理，团队能否真正用起来
实际案例
为什么选 Nx：
- 问题：多应用（Web、Desktop、API）多包协作，影响分析和任务编排成本高
- 方案：Nx 提供依赖图、affected 增量执行、统一任务调度
- 收益：CI 只跑受影响项目，反馈速度明显提升
为什么选 Vite：
- 问题：开发期冷启动和热更新体验需要提升
- 方案：Vite 基于原生 ESM，开发期不打包，按需编译
- 收益：冷启动秒级，HMR 几乎即时，和 Vue 3 集成成熟
为什么选 Pinia：
- 问题：需要轻量、类型友好的状态管理
- 方案：Pinia 是 Vue 官方推荐，API 简洁，TS 支持好
- 收益：状态层职责清晰，和 composable 分工明确
为什么做统一 HTTP client：
- 问题：每个模块自己处理鉴权、超时、错误映射，代码散且行为不一致
- 方案：抽
ResultHttpClient统一处理 - 收益：鉴权、错误语义、可观测性集中治理
面试回答主线
如果问”你怎么选技术栈”
我不会因为某个技术新就用它。首先看项目实际需要什么能力，然后看候选方案能不能解决这个具体问题，再看和现有栈的兼容性、社区维护情况，最后评估团队能不能消化。选型的核心是让工具复杂度刚好匹配项目复杂度，而不是过度设计。
如果问”Vite 和 Webpack 你怎么选”
新项目优先 Vite，开发体验好、配置简单、生态成熟。但如果项目历史包袱重、构建链很深（比如大量自定义 loader/plugin、特殊产物处理），Webpack 的生态和定制能力依然有优势。不是一刀切，而是看项目阶段和复杂度。
常见误区
只说”因为它快/流行”
要补上”解决了什么具体问题、有什么代价、为什么不选另一个”。
不考虑团队因素
再好的工具，如果团队用不起来，长期维护成本反而更高。
最短记忆方式
选型 = 明确问题 + 兼容性 + 长期成本 + 团队消化 + 复杂度匹配