在前端构建流程中，针对 JavaScript 资源的体积优化通常采用哪些具体手段？请结合工程化实践，说明不同方法对加载性能的影响及适用场景。

回答思路

1. 【回答框架 1】JS 体积优化的核心是减少传输字节数和解析执行成本。常用手段包括代码压缩（如 UglifyJS、Terser）、Tree Shaking（基于 ES Module 静态分析去除未用代码）、代码分割（Code Splitting）与按需加载，以及移除冗余代码（如 console、debugger）。
2. 【回答框架 2】压缩工具方面，Terser 是主流选择，支持去除空白、缩短变量名、合并语句等；更激进的可使用 babel-minify 或 ESBuild，但需注意兼容性和语法支持。构建阶段应启用生产模式，自动应用压缩。
3. 【回答框架 3】Tree Shaking 需使用 ES Module 语法（import/export），配合打包器（如 Webpack、Rollup）的 sideEffects 配置，避免误删有副作用的模块。代码分割通过动态 import 将公共代码和业务代码拆分，实现路由级懒加载，减少首屏体积。
4. 【回答框架 4】其他手段包括：使用 gzip 或 Brotli 进行传输压缩；移除 polyfill 或按需引入（如 core-js 的 usage 模式）；优化依赖库，替换为更小的替代品（如 lodash 按需引入）；使用 CDN 和 HTTP 缓存减少重复下载。
5. 【回答框架 5】权衡方面，过度压缩可能增加构建时间，Tree Shaking 可能破坏副作用，代码分割过多会造成请求碎片化，需结合性能预算和实际场景选择。
6. 【关键点 1】代码压缩（Terser）是基础，通常与生产模式捆绑。
7. 【关键点 2】Tree Shaking 依赖 ES Module 和 sideEffects 配置，能有效减少无用代码。
8. 【关键点 3】代码分割和懒加载可显著优化首屏性能，尤其适合大型单页应用。
9. 【关键点 4】传输层压缩（gzip/Brotli）是成本最低的优化手段，需服务器配合。
10. 【关键点 5】优化依赖库和移除 polyfill 能进一步减小体积，但需注意运行时行为。
11. 【易错点 1】Tree Shaking 可能因模块副作用而失效，需正确配置 sideEffects，否则可能误删代码。
12. 【易错点 2】过度代码分割可能导致请求过多，增加网络开销，需平衡懒加载粒度。
13. 【易错点 3】压缩和 Tree Shaking 无法完全替代对代码逻辑本身的优化，如重复代码或冗余逻辑。