Tree Shaking 是构建阶段基于 ES6 模块静态分析的死代码消除技术，依赖 import/export 语法、生产模式、正确 sideEffects 配置及按需引入，通过剔除未被引用的 export 代码减小体积、提升加载与运行效率。
Tree Shaking 是前端工程化中削减打包体积最直接有效的手段之一，但它只是全链路性能优化的起点，不是终点。真正把 bundle 压到最小，需要从代码组织、依赖引入、构建配置到产物验证层层卡控。
确保模块导出方式支持静态分析
Tree Shaking 的前提是构建工具能准确识别哪些导出被使用。这要求所有模块必须用 ES6 具名导出，避免以下写法：
- 不推荐：export default { debounce, throttle } —— 对象式默认导出会阻断摇树
- 不推荐：module.exports = {...} 或 require(...) —— CommonJS 无法被静态分析
- 推荐：export function debounce() {...}、export const API_URL = '...'
- 推荐：第三方库优先选 lodash-es、date-fns 而非 lodash、moment
精准控制副作用声明
构建工具默认不敢删除可能产生副作用的代码（比如执行 fetch、修改全局 prototype、注入 CSS）。package.json 中的 sideEffects 字段就是告诉工具“哪些文件可以放心删”：
- 纯工具函数库可设 "sideEffects": false
- 含 CSS 或字体导入的组件库应写成 "sideEffects": ["*.css", "*.scss", "index.js"]
- 切忌写 "sideEffects": true —— 这等于关掉 Tree Shaking
构建配置不能只靠默认
即使 Webpack 5/Vite 默认开启，仍需主动确认关键项未被覆盖：
- Webpack：mode 必须为 "production"，且 optimization.usedExports 不为 false
- Babel：@babel/preset-env 需设置 modules: false，否则 import 会被转成 require
- Vite：若用了 legacy 插件或自定义 rollupOptions，要显式保留 treeshake: true
- 引入方式必须匹配：import { debounce } from 'lodash-es' ✅，而非 import _ from 'lodash-es' ❌
验证比配置更重要
别凭感觉判断是否生效，用数据说话：
- 用 webpack-bundle-analyzer 打开可视化报告，定位大模块里哪些函数还在
- 临时加一行 import { unusedFn } from './utils'，再构建对比体积变化
- 搜索最终 JS 文件，看未调用的函数体、类定义是否真的消失了
- 对 UI 库，优先走子路径导入：import Button from '@ant-design/react-button' 比 import { Button } from 'antd' 更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
