tree shaking 是一种在构建阶段通过静态分析 es6 模块（import/export）剔除未使用代码的优化技术，需满足使用 esm 语法、生产模式、正确配置 sideeffects 等前提，从而减小打包体积、提升加载与执行性能。
Tree Shaking 能直接缩小打包体积，从而加快 JavaScript 下载、解析和执行速度——它不是运行时优化，而是在构建阶段就剔除掉根本不会用到的代码。
确保使用 ES 模块语法
Tree Shaking 只对 ES6 模块（import/export） 有效。CommonJS 的 require 和 module.exports 是动态的，打包工具无法在编译期判断哪些导出被真正使用。
- ✅ 正确写法：
export const formatTime = () => {...}，然后import { formatTime } from './utils' - ❌ 避免混用：
module.exports = { formatTime }或export default {...}（尤其当对象属性未被静态分析识别时） - 注意：Babel 默认可能把 ES 模块转成 CommonJS，需在
@babel/preset-env中配置{"modules": false}来保留原生模块结构
配置构建工具启用 Tree Shaking
主流工具默认支持，但需确认关键设置：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
Webpack：必须设
mode: 'production'；建议显式开启优化项：usedExports: true（标记导出使用情况）、concatenateModules: true（作用域提升，辅助摇树） -
Vite：开箱即用，无需额外配置；但若项目含副作用代码（如全局样式、polyfill），需在
package.json中声明"sideEffects": ["*.css", "*.scss"]，否则可能误删 -
Rollup：默认深度摇树，适合库开发；注意避免在
export外部写执行逻辑（如直接调用函数、修改 window）
避免副作用干扰分析
打包工具会假设“无副作用”的模块可以安全删除。一旦某模块存在副作用（比如改了全局变量、触发 console、注入样式），整个模块都可能被保留，即使只用了其中一小部分。
- ❌ 不推荐：
console.log('init')、localStorage.setItem('x', 'y')、document.body.appendChild(...)写在模块顶层 - ✅ 推荐：副作用逻辑封装进函数里，只在明确调用时执行；或通过
/*#__PURE__*/注释标注可安全移除的调用 - 第三方库若未正确声明
sideEffects: false，也可能阻碍摇树——可查其package.json，必要时手动指定sideEffects字段
按需引入第三方库
很多流行库（如 Lodash、Day.js、Ant Design）支持 ES 模块导出，但若用错方式，仍会全量引入。
- ❌ 错误：
import _ from 'lodash'→ 引入全部方法 - ✅ 正确：
import { debounce } from 'lodash-es'（推荐 lodash-es 版本）或import debounce from 'lodash/debounce' - 组件库同理：用
import { Button } from 'ant-design-vue'而非import Antd from 'ant-design-vue'，并确认库本身已启用sideEffects: false
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
