UD5工具箱
Tree-shaking（树摇）是打包工具去除未使用代码的技术。它基于 ES Module 的静态分析能力，只打包实际导入和使用的代码，丢弃未引用的导出。Tree-shaking 的效果取决于代码的模块格式（ESM 最佳）、sideEffects 配置和工具的优化能力。良好的 Tree-shaking 可以显著减小最终产物的体积。
HMR（Hot Module Replacement）是开发模式下的热模块替换技术。当代码修改时，只替换变化的模块而不刷新整个页面，保持应用状态。HMR 的速度直接影响开发体验：Webpack 的 HMR 速度取决于项目规模和模块依赖关系；Vite 利用浏览器原生 ESM，HMR 速度通常更快；Rollup 主要用于生产构建，HMR 支持有限。
ESM（ES Modules）是 JavaScript 的官方模块标准，使用 import/export 语法。ESM 是 Tree-shaking 的基础，因为它是静态的——导入导出关系在运行前就能确定。CommonJS 使用 require/module.exports，是动态的，无法进行有效的 Tree-shaking。现代打包工具优先使用 ESM 格式以获得更好的优化效果。
Chunk Splitting（代码分割）是将打包产物拆分为多个文件的技术。合理的代码分割可以让浏览器并行加载、按需加载，提升首屏性能。Webpack 的 splitChunks 配置灵活但复杂；Rollup 的 manualChunks 需要手动配置；Vite 基于 Rollup，支持类似的分割策略。Chunk 数量过多会增加 HTTP 请求数，需要权衡。
Build Pipeline（构建管线）是打包工具处理代码的流程。Webpack 使用复杂的插件系统和 loader 机制；Rollup 使用简洁的插件 API 和基于 ESM 的处理流程；Vite 开发模式跳过打包步骤直接使用 ESM，生产模式使用 Rollup。不同的设计理念导致了不同的性能特点和适用场景。
Module Federation是 Webpack 5 引入的模块共享机制，允许运行时从远程应用动态加载模块。它是微前端架构的核心技术之一，使得多个独立部署的应用可以共享公共依赖。Module Federation 通过配置 host（宿主）和 remote（远程）来实现模块的动态加载和版本协商。Rollup 和 Vite 目前不原生支持 Module Federation，需要额外的插件或自定义实现。对于微前端场景，Webpack 的 Module Federation 是最成熟的选择。