最直接有效的方式是按需加载组件。通过路径导入单个组件、使用插件自动转换import、组件内动态加载第三方库、清理全局引入，可显著减小vendor.js体积。
最直接有效的方式是只加载当前页面真正用到的组件，避免把整个 UI 库打包进初始 bundle。这能立竿见影地减少 vendor.js 体积，尤其对 Element Plus、Ant Design、Fish-UI 这类大型组件库效果显著。
✅ 直接按路径导入单个组件
绕过库的默认入口，从源码目录精确引入所需组件及样式：
- 不推荐（全量）：
import ElementPlus from 'element-plus'→ 打包全部组件和依赖 - 推荐（按需）：
import Button from 'element-plus/es/components/button'+import 'element-plus/es/components/button/style/css' - 同理适用于 Fish-UI：
import Button from 'fish-ui/src/components/Button.vue'，再单独引入对应 less 文件
✅ 配合插件自动转换 import（开发更省力）
手动写路径易出错且维护成本高，可用官方或社区插件自动重写 import 语句：
- Element Plus：启用
unplugin-element-plus，配置后只需写import { ElButton } from 'element-plus'，插件自动转为按需路径 - Ant Design Vue：使用
unplugin-antd或babel-plugin-import - Vite 项目可搭配
vite-plugin-style-import自动引入样式
✅ 组件内按需加载第三方插件
某些功能组件（如富文本、图表、PDF 预览）本身体积大，且并非每页都用，适合在组件内部动态加载：
立即学习“Java免费学习笔记（深入）”；
- 点击按钮时才加载：
button.addEventListener('click', () => import('tinymce')) - 在 Vue 组件的
setup()中：const { default: Chart } = await import('echarts') - 注意避免在
mounted或onMounted中无条件加载，应加判断或用户触发条件
✅ 检查并清理残留的全局引入
很多项目早期为图方便，在 main.js 或 app.ts 中全局注册了整套组件库，后续改用按需后容易遗漏：
- 搜索项目中是否还存在
app.use(ElementPlus)、Vue.use(FishUI)等全局注册代码 - 确认
node_modules中未被引用的组件是否仍出现在打包分析报告里（用vite build --report或webpack-bundle-analyzer） - 删除冗余的
import 'element-plus/dist/index.css'类全局样式引入，改用组件级样式
