Tree Shaking 能直接减少 JS 打包体积，核心是剔除未使用的导出代码，需基于 ESM 规范、正确导入方式、库支持及构建工具配置，并通过工具验证生效。
Tree Shaking 能直接减少 JS 打包体积，核心是剔除未使用的导出代码。它不是运行时技术，而是在构建阶段通过静态分析 ES 模块依赖关系完成的——前提是代码必须符合 ESM 规范，且构建工具配置得当。
确保使用 ES6 模块语法
Tree Shaking 只对 import/export 有效，require 和 module.exports 属于 CommonJS 动态语法，无法被静态分析，会导致整块模块被保留。
- ✅ 正确写法：
import { debounce } from 'lodash-es'（lodash-es是专为 Tree Shaking 提供的 ESM 版本） - ❌ 避免写法：
import _ from 'lodash'或const { debounce } = require('lodash') - 避免
import *全量引入，例如import * as utils from './utils'会阻断摇树，改用具名导入：import { formatDate } from './utils'
按需导入组件与库功能
很多 UI 库或工具库（如 uiw、lodash、date-fns）已支持细粒度导出，跳过全量引入能立竿见影减小体积。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 对于 uiw：优先用
import { Button } from 'uiw'，更极致可直连子包：import Button from '@uiw/react-button' - 对于 date-fns：用
import format from 'date-fns/format'，而非import { format } from 'date-fns'（后者仍可能带入全部函数） - 检查库的
package.json是否含"module": "esm/index.js"字段，这是 Tree Shaking 可用的关键信号
配置构建工具启用并强化 Tree Shaking
Webpack、Vite、Rollup 等默认在 production 模式下开启基础 Tree Shaking，但需配合几项关键设置才能发挥最大效果。
立即学习“Java免费学习笔记（深入）”；
- Webpack 中显式启用分析：
optimization: { usedExports: true }（标记未使用导出） - 明确副作用声明：在项目根目录
package.json中添加"sideEffects": false（若所有模块纯函数无副作用），或列出有副作用的文件如"sideEffects": ["*.css", "*.scss"] - 确保
mode: 'production'，开发模式下通常关闭该优化以提升热更新速度 - Vite 和 Next.js 默认已深度集成，无需额外配置，但需确认未手动覆盖
build.rollupOptions.treeshake或禁用 SWC 的压缩选项
验证是否生效并定位失效点
光靠配置不等于成功，得用工具确认哪些代码真被删了。
- 用
webpack-bundle-analyzer可视化打包结果，查看大模块里是否存在明显未调用的子模块（如整个moment被引入却只用了format） - 检查源码是否含影响摇树的“副作用陷阱”：比如模块顶层有
console.log、全局变量赋值、localStorage.setItem等，这些会让构建工具保守保留整块代码 - 第三方库若未提供 ESM 入口或
sideEffects: false声明，其内部代码也无法被摇掉，此时考虑替换为更轻量替代品（如用dayjs替moment）
