Vue 3 项目通过 Vite 实现打包分包与 CDN 加速的核心是拆分大包和外链第三方资源：按库名切块（如 vendor、echarts、element-plus），external + CDN 引入 Vue 等稳定依赖，配合 vite-plugin-cdn-import 自动注入与降级，静态资源统一走 CDN 并优化缓存与加载。
Vue 3 项目用 Vite 做打包分包和 CDN 加速，核心是两件事：把大包拆小、让第三方资源不走自己服务器。这两步配合起来，能明显缩短首屏加载时间，降低主包体积，也减轻部署压力。
手动配置 Rollup 分包策略
默认情况下，Vite 会把所有 node_modules 依赖打到一个 vendor.js 里，一旦引入 Element Plus、ECharts 等大型库，这个文件很容易突破 1MB。需要在 vite.config.js 中显式定义分块逻辑：
- 按库名切块，比如
'vue'、'vue-router'、'pinia'合并为vendor块 - ECharts 单独切出
echarts块，避免图表未使用时也被加载 - UI 组件库如 Element Plus 单独切为
element-plus块，便于按需加载或后续替换 - 注意依赖关系：如果
echarts被element-plus间接引用，错误拆分会导致重复打包，建议先用rollup-plugin-visualizer查看依赖图再调整
通过 external + CDN 引入核心依赖
把 Vue、Vue Router、Pinia 这类稳定不变的运行时依赖从构建中移除，改由 CDN 提供：
- 在
vite.config.js的build.rollupOptions.external中声明这些包为外部依赖 - 同时配置
output.globals，映射全局变量名（如vue: 'Vue'） - 在
index.html的<head>中，用<script>标签直接引入对应 CDN 地址，例如 jsDelivr 或国内可用的 unpkg 镜像 - 确保 CDN 地址版本固定（如
@3.3.4），避免因版本漂移导致兼容问题
搭配插件实现自动化 CDN 注入
手动维护 index.html 的 script 标签容易出错，推荐使用 vite-plugin-cdn-import 插件：
立即学习“前端免费学习笔记（深入）”；
- 安装后，在插件配置中指定要走 CDN 的包名和对应 URL 模板
- 它会自动识别
import语句，移除本地模块引用，并注入全局变量绑定逻辑 - 支持 fallback 机制：当 CDN 不可用时，自动降级加载本地副本（需额外配置）
- 比纯 external 更灵活，尤其适合混合场景（比如部分环境走 CDN，部分走本地）
静态资源路径与缓存协同优化
CDN 不只是 JS，图片、字体、CSS 等也要一起上：
- 设置
build.base为 CDN 域名（如https://cdn.example.com/my-app/），让所有静态资源自动走该路径 - 在 Nginx 或 CDN 控制台配置强缓存：对
/assets/下资源设Cache-Control: public, max-age=31536000 - 字体文件加
preload，关键图标字体提前加载：<link rel="preload" href="/assets/fonts/iconfont.woff2" as="font" crossorigin> - 图片资源用
vite-plugin-imagemin自动转 WebP + 压缩，再上传至 OSS+CDN
