按需引入需在构建阶段实现，核心是组件库提供ESM入口、业务代码用命名导入、构建流程自动补全；CSS等副作用资源须声明sideEffects，模板标签依赖插件如unplugin-vue-components自动处理。
精准按需引入不是靠运行时判断，而是在构建阶段就让工具“看清”你真正用了哪些组件和样式。核心在于三件事：组件库本身结构合理、业务代码写法正确、构建流程自动补全。
组件库必须提供可分析的 ESM 入口
这是前提。如果组件库只暴露 main（如 UMD 或 CJS），Tree Shaking 就无法工作。你需要确认它的 package.json 中有类似这样的声明：
-
"module": "es/index.js"或"exports": { ".": { "import": "./es/index.js" } } - 每个组件应是独立导出，比如
export const Button = defineComponent(...)，而不是export default { Button, Input } - CSS、字体等副作用资源要列在
"sideEffects": ["*.css", "*.scss", "*.woff"]里，否则会被误删
业务代码要用命名导入，避免全量引用
写法直接影响能否触发分析：
- ✅ 正确：
import { Button, Table } from 'element-plus'或import { Card } from 'baseui/card' - ❌ 错误：
import ElementPlus from 'element-plus'（走main字段）、import * as ep from 'element-plus'（命名空间不可分析） - ⚠️ 补充：对部分老库，可显式指定 ESM 路径，如
import DatePicker from 'ant-design-vue/es/date-picker'
模板中写 <ElButton> 却没 import？交给插件自动处理
Tree Shaking 管不了模板里的标签——它只看 JS 的 import/export 关系。这时候需要编译期扫描插件：
立即学习“Java免费学习笔记（深入）”；
- 推荐
unplugin-vue-components，配合对应 resolver（如ElementPlusResolver()） - 插件会在构建时识别
<ElButton>，自动生成import ElButton from 'element-plus/es/components/button'和import 'element-plus/es/components/button/style/css' - 效果等同手写按需引入，但零维护成本，且天然支持子组件和动态注册场景
CSS 样式也得“联动按需”，不能只靠 JS 摇
CSS 文件本身不参与 Tree Shaking，必须通过 JS 导入路径把它“绑定”到组件上：
- 确保组件 JS 文件内部或插件注入时，同步引入对应样式，例如
import 'element-plus/es/components/button/style/css' - 避免直接引入全量 CSS：
import 'element-plus/dist/index.css'—— 这会让整套样式进包 - 若用 Unocss 或 Windi CSS，图标/工具类也能按使用情况自动提取，原理类似：样式生成依赖源码中的类名出现
