Tree Shaking核心是利用ES模块静态导入导出特性，在编译阶段明确使用关系，使构建工具能安全剔除未引用代码；需组件库支持ESM、无隐式副作用，并通过命名导入、插件自动解析及产物分析验证生效。
核心是利用 ES 模块的静态导入导出特性，在编译阶段就明确组件使用关系，让构建工具能安全剔除未引用的代码。不需要运行时判断，也不依赖手动写 import 路径。
确保组件库本身支持 Tree Shaking
这是前提条件。组件库必须以 ESM 格式导出，并避免副作用干扰：
- 检查其 package.json 中是否声明了 "module": "es/index.js"（或类似路径），指向纯 ESM 入口
- 所有组件文件不能有隐式副作用，比如直接操作 DOM、修改全局对象、注入样式等；若有（如 CSS 文件），需在 package.json 的 sideEffects 字段中显式列出（例如
["*.css", "*.scss"]） - 推荐使用已原生支持的库，如 Ant Design、BaseUI、Omi、Vue DevUI、Element Plus 等，它们都按 ESM 结构组织源码
采用正确的引入方式
开发时的写法直接影响能否触发 Tree Shaking：
- 禁止整体导入：
import * as antd from 'antd'或import VueDevUI from 'vue-devui'—— 构建工具无法分析具体使用了哪些导出 - 必须用命名导入：
import { Button, Table } from 'antd'或import { Card } from 'baseui/card' - 对不支持自动解析的库（如部分老版本 Bootstrap），可配合 unplugin-auto-import 或 babel-plugin-import 自动转译路径
借助插件实现模板级自动导入
仅靠命名导入还不够——Vue 模板里写 <el-button> 却没 import，依然会报错或全量加载。这时需要编译期扫描：
- 使用 unplugin-vue-components（Vite / Webpack / Rollup 均支持）
- 搭配对应 resolver，如
ElementPlusResolver()、DevUiResolver()、AntDesignVueResolver() - 插件会在编译时解析 .vue 文件中的标签名，自动生成 import 语句 + 样式引入，完全无需手动 import
验证是否生效
配置完别跳过这步，否则无法确认优化真实落地：
- 执行构建命令（如
vite build或webpack --mode production） - 用 rollup-plugin-visualizer 或 webpack-bundle-analyzer 打开产物分析报告
- 重点查看：组件库相关 chunk 是否只包含你实际使用的组件，而非整个
es/目录
