第三方依赖性能优化核心是“用得聪明”：通过预构建（esbuild合并/转esm）、按需引入（组件/函数/图标）、markraw跳过响应式代理、cdn外化（vue/vue-router等）四类策略，精准控制加载时机与体积。
第三方依赖是 Vue 应用中常见的性能瓶颈来源，尤其在体积大、模块多或格式老旧（如 CommonJS）的库上表现明显。处理的关键不是“少用”，而是“用得聪明”——控制加载时机、减少冗余代码、规避响应式开销。
依赖预构建（Vite 默认但可调优）
Vite 启动时会自动将 node_modules 中的第三方依赖用 esbuild 预打包成 ESM 格式，合并小文件、转格式、减少 HTTP 请求。默认行为已很高效，但以下情况建议显式配置：
- 动态导入（
import()）的库未被自动识别时，加到optimizeDeps.include中（如axios、lodash-es） - 已通过 CDN 加载的库（如
vue或element-plus），应加入exclude避免重复打包 - 多入口应用需指定
entries，确保所有入口涉及的依赖都被预构建
按需引入而非全量加载
很多 UI 库和工具库（如 Element Plus、Lodash、Day.js）支持按需引入，能跳过大量未使用的模块：
- UI 组件：用插件（如
unplugin-vue-components自动导入）或手动引入单个组件，避免import { ElButton } from 'element-plus'这类全量写法 - 工具函数：直接导入子模块，例如
import throttle from 'lodash/throttle'，而不是import _ from 'lodash' - 图标库：优先使用
@element-plus/icons-vue中按需导入的单个图标，而非整个图标集
跳过响应式代理（针对静态/大体积数据）
第三方库实例（如 ECharts、Map 实例）或静态 JSON 配置若不需要响应式更新，用 markRaw 包裹，避免 Vue 对其递归代理：
const chart = markRaw(echarts.init(el))const options = markRaw(require('./config.json'))const dict = markRaw([{ id: 1, name: '北京' }])
这对初始化性能提升明显，尤其在含数百项的下拉配置或万级原始数据场景下。
CDN + 外部化（适用于稳定版本的通用库）
对 Vue、Vue Router、Axios 等稳定不变的核心依赖，可移出打包流程，改用 CDN 加载：
- Vite 中配置
build.rollupOptions.external和build.rollupOptions.output.globals - 在
index.html中通过<script></script>引入对应 CDN 地址 - 好处：减小打包体积、利用浏览器缓存、提升首屏加载速度
- 注意：需确保 CDN 版本与本地开发一致，且生产环境部署路径兼容
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
