核心思路是不加载没用的代码：通过构建过程自动识别并仅保留实际使用的组件，而非手动指定；小程序需扫描usingcomponents后脚本删miniprogram_npm中未用组件，兼顾体积与隐私合规。
核心思路是：不加载没用的代码。组件库动辄几十个组件，全量引入会把整个库打包进项目，哪怕只用了其中一两个按钮或输入框。真正有效的按需导入，不是“选几个组件写import”，而是让构建过程自动识别、只保留实际用到的部分。
手动指定组件路径（最直接）
适用于 Vue-Tailwind、Element UI、Ant Design 等支持独立组件导出的库。关键不是从根目录 import，而是走具体文件路径：
- Vue-Tailwind：
import TButton from 'vue-tailwind/src/components/TButton' - Element UI：
import { Button, Input } from 'element-ui/lib'（配合 babel-plugin-component） - Ant Design：
import Button from 'antd/lib/button'（新版推荐用 webpack tree-shaking）
这种方式零配置，但组件多时维护成本高。适合中等规模项目或对构建链路控制要求高的场景。
借助 Babel 插件自动转换（开发体验好）
像 babel-plugin-import 这类工具，能在编译时把 import { Button } from 'antd' 自动转成 import Button from 'antd/lib/button' 并附带样式导入。它本质是语法重写器，不是魔法：
- 必须按组件库约定的目录结构（如
lib/button/index.js） - 插件需在
.babelrc或babel.config.js中显式配置目标库名和路径规则 - 不支持自定义路径映射的私有组件库，得换用
babel-plugin-transform-imports
小程序场景：不能只靠 import
微信小程序里，npm 安装的 Vant 或 WeUI 会被完整编译进 miniprogram_npm 目录——即使你一个都没在 usingComponents 里声明。这时候 import 写得再精准也没用。
- 真实有效的方式是：扫描所有页面 JSON 文件里的
usingComponents，提取已声明的组件名，再批量删掉miniprogram_npm/@vant/weapp中未使用的子目录 - 这个过程必须用脚本自动化，否则每次发版都手动删，极易遗漏或误删
- 顺带解决隐私协议问题：uploader、picker 等敏感组件若未实际使用，删掉它们可避免被平台误判触发授权弹窗
混用多个组件库时的隐藏风险
如果项目同时用了 Element Plus 和 Ant Design Vue，哪怕各自都做了按需引入，仍可能因重复依赖（比如都自带 moment、lodash）导致相同工具函数被打包两份。
- 用
webpack-bundle-analyzer查体积占比，确认是否存在重复模块 - 通过
resolve.alias强制共用同一份基础库，例如把所有lodash指向node_modules/lodash - 更彻底的方案是统一 UI 规范，逐步下线冗余组件库
