核心问题是全量引入而非组件库本身重；需确认库是否支持Tree-shaking、配合插件按需引入、正确声明sideEffects，并避免动态引用破坏静态分析。
组件库打包体积大，核心问题往往不是组件库本身重，而是你“全量引入”了它。Tree-shaking 不是魔法，它只对符合 ES 模块规范、且导出方式清晰的代码起作用——关键在于你怎么引，以及构建工具能不能看懂。
确认你的组件库支持 Tree-shaking
不是所有 UI 库都天生适配。比如 antd 默认导出是全量对象，import { Button } from 'antd' 实际仍会拉入整个库（尤其搭配未配置 Babel 插件时）。而 shadcn/ui 或 Element Plus（v2.3+）这类基于源码集成或 ESM 优先设计的库，导出结构扁平、无副作用，Tree-shaking 效果更直接。
验证方法：在项目中只写一行 import { Button } from 'xxx'，然后用 webpack-bundle-analyzer 分析产物，看是否只有 Button 及其依赖被包含。
按需引入 + 配置插件，双管齐下
对 antd、lodash 等传统库，不能只靠 import 写法，必须配合构建工具插件：
- antd：安装
babel-plugin-import，在.babelrc中配置按需加载 CSS 和 JS - lodash：改用
lodash-es，并确保未使用import _ from 'lodash'这类默认导入 - Vue 组件库（如 Naive UI）：启用
unplugin-vue-components自动导入，避免手动 import 全量模块
检查副作用（sideEffects）声明
Webpack 5 默认开启 Tree-shaking，但会跳过被标记为有副作用的文件（如全局样式、polyfill）。如果你的组件库或自定义模块没在 package.json 中正确声明 "sideEffects": false 或精确列出副作用文件（如 ["*.css"]），构建工具就会保守保留全部代码。
常见坑：自己写的 utils 目录如果含 console.log 或 localStorage 操作，也应显式声明 sideEffects，否则可能被误删。
避免动态引用破坏静态分析
Tree-shaking 依赖静态 import/export。以下写法会让摇树失效：
-
const Component = components[name]（运行时决定） -
import(`./${name}.vue`)（动态 import，需单独做 code splitting） -
require('antd/lib/button')（CommonJS，无法被静态分析）
保持导入路径固定、名称明确，才能让构建工具准确识别“哪些真用了，哪些可以扔”。
