通过 CDN 外链引入 Vue 等大型库并配置 externals，可减小 vendor.js 体积、提升首屏速度；需在 vue.config.js 中声明 externals 映射，在 index.html 中按序加载对应 CDN 脚本，并验证全局变量存在及功能正常。
把大型第三方库（如 Vue、Vue Router、Vuex、Axios、Lodash 等）通过 CDN 外链引入，核心目标是让这些库不参与 Webpack 打包，从而大幅减小 vendor.js 体积，加快首屏加载速度。关键在于两步：**配置 externals 告诉打包工具“别打包我”，并在 HTML 中提前加载对应 CDN 脚本**。
明确哪些库适合走 CDN
优先选择版本稳定、CDN 资源丰富、全局使用且不频繁更新的库：
- 框架及生态核心：Vue（2.x/3.x）、Vue Router、Vuex/Pinia、Axios
-
通用工具库：Lodash（注意：建议用
lodash-es+ 按需导入，比 CDN 更可控；若坚持 CDN，需确保引入的是 ES 模块版） - UI 库（谨慎）：Element Plus、Ant Design Vue 等体积大但依赖 CSS 和组件注册逻辑，CDN 引入较复杂，一般不推荐；更推荐按需导入 + unplugin-vue-components 自动导入
在 vue.config.js 中配置 externals
这是最关键的一步。Webpack 会跳过 externals 列表中的模块，不再将其打包进 bundle，而是期望运行时全局存在同名变量。
示例（Vue 3 项目）：
立即学习“Java免费学习笔记（深入）”；
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const isProduction = process.env.NODE_ENV === 'production'
const assetsCDN = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
},
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/3.4.27/vue.global.prod.min.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.3.2/vue-router.global.prod.min.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/4.1.0/vuex.global.prod.min.js',
'https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js'
]
}
<p>module.exports = {
configureWebpack: config => {
if (isProduction) {
config.externals = assetsCDN.externals
}
}
}注意：
- externals 的 key 是 npm 包名（如 'vue-router'），value 是它在全局挂载的变量名（如 'VueRouter'），必须与 CDN 提供的 UMD/Global 版本导出名一致；
- Vue 3 的 global 版本挂载的是 Vue，不是 default，所以 import { createApp } from 'vue' 在 externals 后仍可正常工作；
- 不要遗漏 isProduction 判断，开发环境仍需本地模块支持热更新和调试。
在 public/index.html 中注入 CDN 脚本
确保脚本在 Vue 应用启动前加载完成，并按依赖顺序排列（如 Vue 必须在 Vue Router 之前）：
<!-- public/index.html -->
<body>
<div id="app"></div>
<!-- 生产环境 CDN 脚本 -->
<% if (process.env.NODE_ENV === 'production') { %>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.27/vue.global.prod.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.3.2/vue-router.global.prod.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.1.0/vuex.global.prod.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
<% } %>
</body>也可用 webpack 插件（如 HtmlWebpackPlugin 的 templateParameters）动态注入，避免硬编码。
验证是否生效
打包后检查：
-
dist/js/chunk-vendors.xxx.js体积明显缩小（例如从 1.2MB → 300KB） - 浏览器开发者工具 Network 面板中，
vendor类 chunk 不再包含 Vue 相关代码 - Console 输入
Vue、VueRouter应返回构造函数，说明全局变量已就绪 - 应用功能正常，无
Cannot find module 'vue'或xxx is not defined报错
若报错，大概率是 externals 键值对不匹配，或 CDN 脚本未加载/加载顺序错误。
