Tree Shaking 能优化第三方库按需引入，但需库支持 ESM、正确配置 sideEffects、使用命名导入、配合自动组件引入插件，并通过构建分析验证效果。
Tree Shaking 能优化第三方库的按需引入，但前提是库本身支持、项目配置得当、引入方式正确。它不是自动生效的魔法，而是一套需要协同配合的工程实践。
确保第三方库提供 ESM 入口
只有基于 ES 模块（ESM）构建的库，才能被构建工具静态分析并剔除未使用代码。CommonJS（如 require）无法触发 Tree Shaking。
- 检查库的 package.json 是否声明了
"module": "es/index.js"或类似字段，指向纯 ESM 入口文件 - 优先选用原生支持 ESM 的库，例如：lodash-es（代替 lodash）、date-fns（代替 moment）、Ant Design Vue / Element Plus / Vue DevUI
- 若库只提供 CommonJS 版本，可考虑用插件转换（如 vite-plugin-commonjs），但效果不如原生 ESM 可靠
用命名导入，禁用全量引入
导入写法直接决定 Tree Shaking 是否能识别使用关系。构建工具只能从 静态 import 语句 中推断依赖。
- ✅ 正确：使用解构式命名导入 ——
import { debounce, throttle } from 'lodash-es' - ❌ 错误：全量导入 ——
import _ from 'lodash'或import * as antd from 'antd'，这会让整个模块保留在打包结果中 - ⚠️ 注意：某些库（如旧版 Bootstrap）即使用了命名导入，内部仍可能因路径别名或动态逻辑导致失效，此时需搭配 babel-plugin-import 或 unplugin-auto-import 自动转译路径
处理副作用，避免误删关键代码
如果一个模块执行时会注入样式、注册全局组件或修改原型链，构建工具会认为它有“副作用”，从而保守保留整个文件——哪怕你只用了其中一个小函数。
立即学习“Java免费学习笔记（深入）”；
- 在项目根目录的 package.json 中设置
"sideEffects": false，表示所有模块无副作用 - 若有真实副作用（比如引入 CSS 文件），必须显式列出：
"sideEffects": ["*.css", "*.scss", "./src/polyfill.js"] - 避免在模块顶层写有实际影响的代码，例如：
document.body.appendChild(...)、console.log('init')、Element.prototype.xxx = ...
模板中自动引入组件（Vue/React 场景）
仅靠 JS 层命名导入还不够。Vue 模板里写了 <el-button> 却没手动 import，构建工具无法关联，可能导致全量加载或运行时报错。
- 推荐使用 unplugin-vue-components（Vite/Webpack/Rollup 均支持）
- 搭配对应 resolver，如
ElementPlusResolver()、AntDesignVueResolver()，插件会在编译时扫描模板标签，自动生成 import 和样式引入语句 - 无需手动 import 组件，也不用担心漏引或误引，真正实现“写即用、用即载”
验证是否生效最直接：跑一次生产构建（vite build 或 next build），用 rollup-plugin-visualizer 或 webpack-bundle-analyzer 打开产物报告，确认组件库相关 chunk 里只含你实际使用的模块，而不是整个 lib/ 目录。
