17370845950

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或仅用于开发环境的逻辑块——这些需靠约定或插件清除。

• 使用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 检查是否多重安装，避免同一库被打包多次