JavaScript代码压缩需与打包工具协同实现真正删减，核心是Tree-shaking、副作用标记、调试语句移除、工具配置及效果验证。
JavaScript 代码压缩不是简单删空格和注释，而是和打包工具深度协同，把真正不用的代码从最终产物里剔除。关键在于让构建工具“看懂”哪些代码可删——这依赖正确的模块写法、合理的配置和开发习惯。
用 ES 模块触发 Tree-shaking
Tree-shaking 是去除未使用导出（export）的核心机制，但它只对静态 import/export 生效：
- 避免混用
import和require；CommonJS 模块无法被摇掉 - 第三方库若提供 ESM 版本（查看
package.json中的"module"或"exports"字段），优先使用它 - 导出时别用动态 key：
obj[flag] = fn会阻断摇树；改用具名导出或条件导出 - 在项目根目录的
package.json中设"sideEffects": false，或精确列出有副作用的文件（如["*.css", "src/polyfill.js"]）
让压缩器识别并剔除开发残留
Terser 等压缩器不会自动删 console.log 或 debugger，需主动“标记”或“替换”：
- 用
DefinePlugin把环境变量内联为字面量：process.env.NODE_ENV === 'production'→ 直接变成true或false，Terser 就能安全删除整个 if 块 - 加 Babel 插件如
@babel/plugin-transform-console，构建时自动移除调试语句 - 对纯辅助函数或工具方法，加上
/*#__PURE__*/注释，告诉 Terser 它可被安全移除（即使被调用但返回值未使用）
配置构建工具启用并微调压缩
不同工具默认行为略有差异，需确认是否启用及是否适配项目需求：
立即学习“Java免费学习笔记（深入）”；
-
Webpack：生产模式（
mode: 'production'）自动启用 TerserPlugin；如需保留某些注释或禁用混淆，可在terserOptions中设置keep_classnames、mangle: { reserved: ['React'] }等 -
Vite：默认用 esbuild 压缩（快），如需更强压缩效果（如更激进的 dead code 删除），改用 Terser：
build: { minify: 'terser', terserOptions: { compress: { drop_console: true } } } -
Rollup：配合
@rollup/plugin-terser，在output.plugins中加入，并注意插件顺序（应在生成最终代码后执行）
验证压缩是否真正生效
光看文件体积缩小不够，得确认冗余逻辑确实没被打包进去：
- 用
webpack-bundle-analyzer或 Vite 的build.report查看模块构成，定位大而无用的 chunk - 开启 source map（仅开发/测试环境），对比压缩前后代码，检查
console、未引用函数、整块开发逻辑是否消失 - 运行单元测试和 E2E 测试，确保压缩没改变行为——尤其注意
this绑定、全局变量、第三方库副作用等易错点
