核心是利用ES模块静态特性在编译期完成Tree-shaking，配合unplugin-vue-components实现自动导入与样式注入，避免运行时动态引入破坏静态分析。
核心在于利用 ES 模块的静态特性，在编译期就确定哪些导出被实际使用，从而剔除未引用的代码。这不需要运行时判断，也不依赖手动 import 路径调整。
依赖 ES Module 的静态分析能力
ESM 语法要求 import/export 必须在顶层、不可动态拼接，构建工具（如 Vite、Rollup、Webpack 5+）因此能在不执行代码的前提下，通过 AST 解析出完整的依赖图和引用关系。只要组件库以 ESM 格式导出（例如 module 字段指向 es/ 目录），且无副作用干扰，Tree-shaking 就能安全地移除未使用的模块。
- 确保组件库 package.json 中正确声明
"module": "es/index.js" - 所有组件文件应避免直接修改全局或原型（如
Array.prototype.xxx），否则需在sideEffects字段中显式标记有副作用的文件（如样式文件） - 业务项目构建配置需启用 Tree-shaking（现代工具默认开启，无需额外配置）
配合解析器实现自动导入与注册
仅靠 Tree-shaking 还不能解决模板中直接写 <el-button></el-button> 却未 import 的问题。这时需要插件在编译阶段扫描 .vue 模板，识别标签名，并自动注入对应的 import 语句和样式。
- 使用 unplugin-vue-components：它会在 vite/webpack 构建时遍历所有 SFC 模板，匹配组件名，再通过 resolver（如
ElementPlusResolver）查出该组件的 JS 路径和样式路径 - resolver 返回结构包含
name（导出名）、from（模块路径）、sideEffects（样式路径），插件据此生成等效于import { Button } from 'element-plus/es'+import 'element-plus/es/button/style/css'的代码 - 整个过程发生在编译阶段，最终打包产物里只含真正用到的组件代码和样式
避免运行时加载干扰静态分析
动态 import() 或 require() 无法被静态分析覆盖，会导致相关模块无法被 Tree-shaking 剔除，甚至可能全量引入。因此按需引入应尽量避开运行时逻辑。
- 不要在 setup() 或 onMounted 中用
import()加载 UI 组件（适合路由级拆分，不适合组件级按需） - 禁用 babel-plugin-import 等在源码层改写 import 的方案——它虽能简化写法，但本质仍是手动声明依赖，且依赖 Babel 编译链，不如 ESM + 插件组合灵活可靠
- 组件库自身应提供纯净的 ESM 输出，不带运行时条件判断或副作用初始化逻辑
不复杂但容易忽略
