UD5工具箱
Webpack、Rollup 和 Vite 分别适合什么场景？
Webpack 适合大型复杂项目，生态系统最丰富，配置灵活但学习曲线较陡。Rollup 适合库打包，产出体积小、Tree-shaking 效率高。Vite 适合应用开发，开发体验最好、启动最快，生产构建基于 Rollup。新项目推荐从 Vite 开始。
为什么 Rollup 的 Tree-shaking 效率最高？
Rollup 基于 ESM 格式设计，对静态导入的分析更彻底。Webpack 使用 Harmony 模块格式，某些动态模式（如 re-export）可能无法完全优化。Rollup 的设计目标就是实现最高效的 Tree-shaking，这使其在库打包场景中具有明显优势。
Vite 的开发模式为什么这么快？
Vite 在开发模式下利用浏览器原生 ESM 支持，跳过了打包步骤。浏览器直接请求 ESM 模块，Vite 只需按需转换和发送代码。这避免了 Webpack 需要打包整个依赖图的开销，启动时间几乎不受项目规模影响。
从 Webpack 迁移到 Vite 需要注意什么？
主要注意：1. Webpack 的 loader 需要替换为 Vite 插件；2. 某些 Webpack 特有的 API（如 require.context）需要适配；3. 环境变量的使用方式不同（VITE_ 前缀）；4. 生产构建基于 Rollup，行为可能与 Webpack 略有差异。建议先在小范围验证再全面迁移。
打包产物体积越小越好吗？
不一定。产物体积是重要指标但不是唯一标准。还需要考虑：构建速度（影响开发效率）、运行时性能（如代码分割的加载策略）、维护成本（配置复杂度）和团队熟悉度。选择打包工具需要综合考虑所有因素。
什么是 sideEffects 配置？
sideEffects 是 package.json 中的字段，告诉打包工具哪些文件有副作用（如修改全局变量、添加 CSS 等）。设置 sideEffects: false 可以让 Tree-shaking 更激进地去除未使用的模块。但错误地标记有副作用的文件为无副作用可能导致运行时错误。
Gzip 压缩能减小多少体积？
Gzip 通常能将 JavaScript 文件压缩到原始大小的 20-30%。压缩率取决于代码的重复程度和结构。纯文本代码（如大量变量名和字符串）压缩率较高，已经压缩过的资源（如图片）压缩率很低。现代浏览器都支持 Gzip 解压缩。
如何衡量 Tree-shaking 效率？
最直接的方法是导入一个大型库但只使用少量函数，对比打包前后的体积。例如导入 lodash-es 但只使用 debounce，理想情况下只打包 debounce 函数的代码。工具中的 Tree-shaking 深度对比功能就是基于这个原理演示的。