资源压缩需源码、配置、清理协同：用ES模块语法、设sideEffects、删console等开发痕迹、优化源码结构，并用bundle分析工具验证tree-shaking效果。
资源压缩通过去除无用代码减小脚本体积，核心不是简单删掉几行，而是让构建工具准确识别并安全剔除真正不执行的代码。这需要源码写法、构建配置和清理动作三者配合。
让tree-shaking真正起作用
Tree-shaking 依赖 ES 模块的静态结构，只有 import/export 能被可靠分析。常见失效原因包括：
- 混用 require 和 import —— CommonJS 模块无法被摇掉
- 动态导出，比如
export const [key] = value或赋值给非字面量对象 - 第三方库没提供 ESM 入口（检查 package.json 的
module或exports字段） - 未声明副作用，导致带副作用的模块（如 CSS 导入、全局样式初始化）也被误删
解决方法：统一使用 ES 模块语法；在项目根目录 package.json 中设置 "sideEffects": false，或显式列出有副作用的文件（如 ["*.css", "src/polyfill.js"]）。
主动清除开发残留代码
console、debugger、环境判断块等不会自动消失，必须靠配置或标记引导工具识别：
- 用
DefinePlugin将process.env.NODE_ENV内联为字面量，使if (process.env.NODE_ENV !== 'production') { ... }被 Terser 直接整块删除 - 添加 Babel 插件如
@babel/plugin-transform-console，在构建时移除所有console.*调用 - 对纯函数调用加
/*#__PURE__*/注释，帮助 Terser 判断是否可安全移除（例如/*#__PURE__*/ helperFn()）
提前优化源码结构提升压缩收益
压缩器效果受限于原始代码质量。以下操作能让 Terser 更高效地简化和折叠：
- 用字面量替代构造函数：
[]替new Array()，{}替new Object() - 避免冗余逻辑：如
Boolean(x)→!!x，if (x === true)→if (x) - 合并重复变量声明、消除无意义括号、简化布尔表达式（Terser 的
compress选项会做，但干净源码能减少误判） - 模块化组织：每个文件只导出必要内容，未被 import 的函数/常量更容易被识别为死代码
验证是否真删掉了无用代码
不能只看最终文件大小，要确认删得对、删得全：
- 用
webpack-bundle-analyzer或 Vite 的--report查看模块依赖图，定位未被引用却仍打包进来的代码块 - 开启 source map（生产环境可仅保留列映射），反查压缩后代码对应源码位置
- 搜索构建产物中是否还存在明显开发痕迹，如
console、debugger、__DEV__等关键词
