JavaScript代码压缩与无用代码去除核心在于构建工具链（如Terser）的正确配置与开发规范，关键是如何让工具准确识别可删内容；Terser支持ES6+、混淆、死代码删除与常量折叠，Webpack生产模式默认启用并集成tree-shaking，Vite默认使用Terser（可选esbuild）；tree-shaking依赖ES模块静态结构，需避免CommonJS混用、动态导出，并合理设置sideEffects；开发残留（如console、debugger）需通过DefinePlugin、Babel插件等主动清除；验证效果应结合Bundle Analyzer、source map及代码审查，避免重复依赖。
JavaScript代码压缩和无用代码去除，核心是借助构建工具链中的优化器（如Terser）配合正确的配置与开发规范，而非手动删减。关键不在“怎么压”，而在“怎么让工具准确识别可删内容”。
使用Terser进行高效压缩
Terser是目前最主流的JS压缩工具，支持ES6+语法，能安全完成混淆、删除死代码、常量折叠等操作。它通常集成在Webpack、Vite、Rollup等构建工具中，无需单独调用。
- Webpack中默认启用TerserPlugin，生产模式（mode: 'production'）下自动开启压缩和tree-shaking
- Vite在build时默认使用Terser（也可切换为esbuild，速度更快但压缩粒度略粗）
- 若需自定义，可在Webpack配置中调整TerserPlugin选项，例如启用mangle（变量名混淆）和compress（逻辑压缩）
确保Tree-shaking真正生效
Tree-shaking依赖ES模块静态结构（import/export），CommonJS（require/module.exports）无法被摇掉。很多“没删掉的代码”其实是因为引入方式不对。
- 避免混用
import和require；第三方库若只有CommonJS版本，可借助@rollup/plugin-commonjs或检查是否有ESM入口（如pkg.module或pkg.exports字段） - 导出时避免动态key或赋值给非字面量对象（如
obj[flag] = fn会阻止摇树） - 标记副作用：在
package.json中设置"sideEffects": false（全局无副作用），或列出有副作用的文件（如["*.css", "src/init.js"]）
主动清理开发残留与条件逻辑
构建工具不会自动识别console.log、debugger或仅用于开发环境的逻辑块——这些需靠约定或插件清除。
立即学习“Java免费学习笔记（深入）”；
- 使用webpack.DefinePlugin将
process.env.NODE_ENV内联为字面量，使if (process.env.NODE_ENV !== 'production')被Terser直接剔除 - 借助Babel插件如@babel/plugin-transform-console或babel-plugin-dev-expression移除调试语句
- 避免在生产代码中保留
/*#__PURE__*/以外的大段注释或未导出的工具函数——它们虽不执行，但占体积
检查与验证压缩效果
别只信打包结果大小，要确认删的是真无用代码。
- 用Webpack Bundle Analyzer（
webpack-bundle-analyzer）可视化依赖组成，定位大模块或意外保留的代码 - 查看Terser生成的.map文件 + 压缩后代码，搜索是否还存在明显可删片段（如完整未引用的类、长注释、重复polyfill）
- 对关键包使用npm ls <pkg>检查是否多重安装，避免同一库被打包多次
