Tree-shaking 能有效移除未使用代码，依赖 ES6 静态模块系统，需使用 import/export 语法，避免 CommonJS 动态引入；应选用支持 Tree-shaking 的打包工具如 Webpack（生产模式默认开启）、Rollup 或 Vite，并确保引入的库提供 ESM 版本（如 lodash-es），检查 package.json 中 module 字段，避免整体导入命名空间；同时启用生产模式和压缩工具（如 TerserPlugin）以标记并删除无用代码，最终实现打包体积优化。
Tree-shaking 能有效移除前端项目中未使用的代码，从而减小打包体积。它的核心机制依赖于 ES6 模块系统的静态结构——因为 import 和 export 在编译时就能确定，打包工具可以分析出哪些模块没有被引用。
使用 ES6 模块语法
确保项目中使用 import 和 export，而不是 CommonJS 的 require 和 module.exports。Tree-shaking 只对静态导入导出生效。
- 正确示例：
import { debounce } from 'lodash-es' - 避免：
const _ = require('lodash')，这种动态引入无法被静态分析
选择支持 Tree-shaking 的打包工具
Webpack、Rollup 和 Vite 都支持 Tree-shaking，但需要正确配置。
- Webpack：默认在生产模式下开启，无需额外配置
- Rollup：原生支持，常用于库开发
- Vite：基于 Rollup 构建，天然支持
确保库本身是“shakable”的
即使你的代码写得规范，如果引入的第三方库不支持 Tree-shaking，依然无效。
立即学习“前端免费学习笔记（深入）”；
- 优先使用提供 ESM 版本的库，如
lodash-es而不是lodash - 查看库的 package.json 中是否包含
module字段，它指向 ES 模块版本 - 避免引入整个命名空间：
import * as utils from './utils'会阻止 shaking
启用生产模式和压缩
Tree-shaking 包含两个阶段：标记无用代码和实际删除。
- Webpack 中需设置
mode: 'production'，这会自动启用TerserPlugin - Terser 或其他压缩工具会将未引用的函数或变量标记为 dead code 并移除
基本上就这些。只要模块系统是静态的，构建工具配置得当，未被引用的导出自然不会进入最终包中。关键在于从源头规范写法，选对工具和依赖。
