Vue2项目CDN优化核心是通过externals排除vue、vue-router、vuex等稳定大库，改由CDN提供，需严格匹配全局变量名（如vue→Vue），并在index.html中注入对应CDN链接，开发与生产环境分离配置。
Vue2项目打包体积优化，核心是减少主包中第三方库的体积，CDN引入是最直接有效的方式。关键不在“加功能”，而在“减依赖”——把稳定、不常更新的库从打包中剔除，改由CDN提供。
明确哪些库适合走CDN
不是所有依赖都适合CDN，优先选版本稳定、全局使用、体积大的库：
- Vue核心库：vue、vue-router、vuex（注意版本兼容，如 vue@2.6.x）
- 常用工具库：axios、lodash、moment、dayjs、echarts
- UI组件库：element-ui、vant（需确认CDN提供完整构建版，含CSS）
- 避免CDN化：业务组件、频繁迭代的自定义封装、带动态import的模块
vue.config.js 中配置 externals 排除打包
这是CDN生效的前提——告诉Webpack：“这些库别打进去，运行时会全局存在”。配置要严格匹配全局变量名：
- vue →
Vue（注意首字母大写） - vue-router →
VueRouter（连字符转驼峰，首字母大写） - vuex →
Vuex - axios →
axios（小写，与官方UMD导出一致） - element-ui →
ELEMENT（官方文档指定）
示例配置：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-ui': 'ELEMENT'
}
}
}
}在 index.html 中注入 CDN 资源链接
externals只是“不打包”，资源还得加载进来。推荐通过 html-webpack-plugin 的 cdn 参数动态注入，兼顾开发/生产环境：
- 生产环境注入 JS/CSS CDN 地址（含版本号，避免缓存问题）
- 开发环境保持本地 node_modules 引入，不影响热更新和调试
- CSS 类库（如 element-ui）必须同时注入 CSS CDN，否则样式丢失
示例片段：
const cdn = {
build: {
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.runtime.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.5.4/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js'
],
css: [
'https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css'
]
},
dev: { js: [], css: [] }
}
<p>module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].cdn = process.env.NODE_ENV === 'production' ? cdn.build : cdn.dev
return args
})
}
}然后在 public/index.html 的 <head> 中添加：
<!-- inject cdn -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>验证与注意事项
配置完务必验证是否真正生效：
- 打包后检查 dist/js/app.xxx.js 体积是否明显下降（比如减少 200KB+）
- 浏览器控制台执行
window.Vue、window.VueRouter应有定义 - 确保 main.js 中不再
import Vue from 'vue'，否则会报错或冗余加载 - CDN地址建议用 jsdelivr 或 bootcdn，稳定性高、国内访问快；避免用 unpkg（部分地区不稳定）
- 上线前做灰度测试，关注白屏、路由跳转失败等典型问题
CDN不是万能药，但对Vue2这类依赖明确、版本稳定的项目，效果立竿见影。重点是 externals 和 HTML 注入的配合，缺一不可。
