代码压缩与 Tree Shaking
Tree Shaking（摇树优化）把“没用的代码”从产物里摇掉：ESM 是静态的，打包器在编译时就能分析出哪些导出从未被引用，直接删除。前提是代码用 ESM 且没有副作用——副作用文件（如全局注入样式的文件）会被整包保留。
压缩（Minify）同时做三件事：缩短变量名、删除注释空白、把 if(false) 这类死代码消除。现代打包器默认开启，配合 gzip/brotli 传输压缩，产物体积通常只有源码的几分之一。
- Tree Shaking 前提：ESM + 无副作用（package.json 声明 "sideEffects": false）
- 按需引入是手动的摇树：
import Button from "antd/lib/button"，或直接引 ES 子模块 - 检查产物：rollup-plugin-visualizer 看体积构成，哪大优化哪
优化
// 源码 utils.js export function used() { return 1; } export function unused() { return 2; } // 从没被 import —— 摇掉 // main.js 只引用 used import { used } from './utils.js'; console.log(used()); // 打包后：unused() 整个消失（前提：utils.js 没有副作用执行） // 按需引入示例：lodash 整包 70KB，按方法引入只用 2KB // 全量引入（差）：import _ from 'lodash'; _.get(obj, 'a.b'); // 按需引入（好）：import get from 'lodash/get'; get(obj, 'a.b'); // package.json 声明副作用，帮助打包器安全摇树 // { "sideEffects": false } // 所有文件都可摇 // { "sideEffects": ["*.css", "*.scss"] } // 排除会注入全局样式的文件
本节要点Tree Shaking 靠 ESM 静态分析删死代码；包体积 = 压缩 + 摇树 + 按需引入三管齐下。
