打包优化：选择不同的版本&设置script属性&切换CDN源
概述
打包优化最后一部分：确保 CDN 加载的是生产版本（prod）而非开发版本，通过配置 vite-plugin-cdn2 的路径选择正确的文件版本，以及如何切换不同的 CDN 源。
生产版本 vs 开发版本
问题
默认 CDN 配置可能加载的是开发版本的 JS 文件（体积大、包含警告信息），而非压缩后的生产版本。
如何确认正确的文件名
在 npmjs.com 上搜索对应包，查看 dist 目录下的文件列表：
vue/dist/
├── vue.global.js ← 开发版本（~400KB，包含警告）
├── vue.global.prod.js ← 生产版本（~130KB，压缩优化） ← 应该用这个
├── vue.runtime.global.js
└── vue.runtime.global.prod.js
text
修改 CDN 配置
// vite.config.ts - 修改前（加载开发版本）
{
name: 'vue',
var: 'Vue',
path: 'https://unpkg.com/vue@3/dist/vue.global.js' // 开发版本
}
// 修改后（加载生产版本）
{
name: 'vue',
var: 'Vue',
path: 'https://unpkg.com/vue@3/dist/vue.global.prod.js' // 生产版本
}
typescript
完整的生产版本 CDN 配置
// vite.config.ts
cdn({
modules: [
{
name: 'vue',
var: 'Vue',
path: 'https://unpkg.com/vue@3/dist/vue.global.prod.js'
},
{
name: 'vue-router',
var: 'VueRouter',
path: 'https://unpkg.com/vue-router@4/dist/vue-router.global.prod.js'
},
{
name: 'pinia',
var: 'Pinia',
path: 'https://unpkg.com/pinia@2/dist/pinia.iife.prod.js'
},
{
name: 'element-plus',
var: 'ElementPlus',
path: 'https://unpkg.com/element-plus/dist/index.full.min.js',
css: 'https://unpkg.com/element-plus/dist/index.css'
},
{
name: 'echarts',
var: 'echarts',
path: 'https://unpkg.com/echarts@5/dist/echarts.min.js'
}
]
})
typescript
设置 script 标签属性
cdn({
modules: [...],
// 设置生成的 script 标签属性
prodUrl: (module, url) => url
})
typescript
切换 CDN 源
使用 vite-plugin-cdn2 的 baseUrl 属性统一切换 CDN 源：
// 使用 unpkg（默认）
cdn({
modules: [...],
baseUrl: 'https://unpkg.com'
})
// 使用 jsdelivr
cdn({
modules: [...],
baseUrl: 'https://cdn.jsdelivr.net/npm'
})
// 使用淘宝镜像（国内推荐）
cdn({
modules: [...],
baseUrl: 'https://registry.npmmirror.com'
})
typescript
CDN 源对比
| CDN 源 | baseUrl | 国内速度 | 国际速度 |
|---|---|---|---|
| unpkg | https://unpkg.com | 中 | 快 |
| jsdelivr | https://cdn.jsdelivr.net/npm | 快 | 快 |
| 淘宝镜像 | https://registry.npmmirror.com | 最快 | 慢 |
| cdnjs | https://cdnjs.cloudflare.com/ajax/libs | 中 | 快 |
优化效果
| 指标 | 优化前 | 优化后 |
|---|---|---|
| 核心 JS 体积 | ~1.1 MB | ~183 KB |
| 优化量 | — | ~900 KB |
| 加载方式 | 全部打包 | CDN 按需加载 |
各库生产版本文件速查
| 库 | 全局变量 | 生产文件路径 |
|---|---|---|
| Vue 3 | Vue | vue@3/dist/vue.global.prod.js |
| Vue Router 4 | VueRouter | vue-router@4/dist/vue-router.global.prod.js |
| Pinia 2 | Pinia | pinia@2/dist/pinia.iife.prod.js |
| Element Plus | ElementPlus | element-plus/dist/index.full.min.js |
| ECharts 5 | echarts | echarts@5/dist/echarts.min.js |
实践要点
- 确认 CDN 加载的是
*.prod.js或*.min.js生产版本，而非开发版本 - 在 npmjs.com 的 dist 目录中查看各库的正确文件名
- 通过
baseUrl统一切换 CDN 源，国内项目优先使用淘宝镜像或 jsdelivr - 最终核心 JS 从 1.1MB 优化至 183KB，减少约 900KB
- 所有核心库均通过 CDN 加载，打包产物仅包含项目业务代码
↑