Webpack 的 externals 配置可将指定第三方库排除在打包外，由 CDN 提供，从而减小体积、提升构建与加载性能；其 key 为 import 名，value 为全局变量名，需确保 CDN 加载顺序、版本一致及全局变量正确挂载。
Webpack 的 externals 配置能让指定的第三方库不被打包进 bundle，改由 CDN 提供，从而显著减小输出体积、提升构建速度和首屏加载性能。核心逻辑是：代码里仍用 import（或 require）写法，但打包时跳过这些模块，运行时依赖全局变量（如 Vue、jQuery）。
明确 externals 的 key 和 value 对应关系
key 是你在 JS 中 import 或 require 时使用的模块名（即包名），value 是该库通过 CDN 加载后挂载到全局作用域的变量名。
-
vue: 'Vue'→import Vue from 'vue'仍可写，打包时不包含 vue 源码，运行时取window.Vue -
jquery: '$'→import $ from 'jquery'有效，前提是 CDN 脚本已将$注入全局 -
lodash: '_'→ 对应import _ from 'lodash'，CDN 版本需暴露window._ - 若库导出为
module.exports.default（如某些 ES 模块 CDN），可用对象形式：axios: { root: 'axios', commonjs: 'axios', commonjs2: 'axios' }
在 webpack 配置中设置 externals
直接在 webpack.config.js 或 Vue CLI 的 vue.config.js 的 configureWebpack / chainWebpack 中配置：
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ElementUI',
echarts: 'echarts'
}
}
}
注意：使用 Vue CLI 时，externals 必须放在 configureWebpack 下，不能放在 chainWebpack 的插件链里；否则可能不生效。
确保 CDN 资源在 HTML 中正确加载
必须让对应脚本在你的应用 JS 执行前就加载完毕并挂载全局变量。推荐两种方式：
- 手动在
public/index.html的<head>或<body>底部添加 script 标签（最简单可靠） - 用
html-webpack-externals-plugin自动注入（适合多环境或频繁变更 CDN 地址的场景）
示例 CDN 引入（以 Vue 2.6 和 Element UI 为例）：
<script src="https://lib.baomitu.com/vue/2.6.14/vue.runtime.min.js"></script> <script src="https://lib.baomitu.com/vue-router/3.5.3/vue-router.min.js"></script> <script src="https://lib.baomitu.com/element-ui/2.15.14/index.js"></script>
⚠️ 注意版本一致性：CDN 版本、你代码中使用的 API、以及 externals 值三者必须匹配，否则运行时报错 “xxx is not defined”。
验证是否生效
打包后检查两点：
- 生成的
vendor.js或app.js体积明显下降（例如移除 vue 后通常减少 200KB+） - 浏览器控制台执行
typeof Vue返回"function"，且项目正常渲染无报错 - 查看 network 面板，确认相关资源来自 CDN 域名，而非本地打包文件
如果 import 报错或组件无法渲染，优先检查 CDN 是否加载成功、全局变量名是否拼写一致、以及是否遗漏了配套 CSS（如 Element UI 的样式需单独引入 CDN CSS）。
