Vite 中配置 CDN 加速和依赖外部化需两步：一是用 vite-plugin-cdn-import 将指定包（如 vue、axios）替换为 CDN 链接，二是在 rollupOptions.external 中声明不打包这些包；插件自动注入 script 或配合 importmap 使用，构建后需验证 HTML 注入、网络请求来源及依赖图剔除。
在 Vite 中配置 CDN 加速和依赖外部化，核心是两件事：一是让构建时把指定的 npm 包（如 vue、axios）替换成 CDN 链接；二是告诉打包器这些包不打进最终 JS 文件里——也就是“external”。两者配合，才能真正减小首屏体积、利用浏览器缓存和 CDN 边缘节点。
安装并启用 vite-plugin-cdn-import 插件
这是目前最主流、Vite 原生友好的 CDN 替换方案。它只在生产构建时生效，开发环境仍走本地 node_modules，不影响调试。
- 执行安装命令：
npm install vite-plugin-cdn-import --save-dev - 在
vite.config.js中引入并配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteCdnImport from 'vite-plugin-cdn-import'
<p>export default defineConfig({
plugins: [
vue(),
ViteCdnImport({
modules: [
{
name: 'vue',
var: 'Vue',
path: '<a href="https://www.php.cn/link/6740e9bc4c61459fb2137711207dcb36">https://www.php.cn/link/6740e9bc4c61459fb2137711207dcb36</a>'
},
{
name: 'axios',
var: 'axios',
path: '<a href="https://www.php.cn/link/d044dfb34273ab904cddf677fd62a183">https://www.php.cn/link/d044dfb34273ab904cddf677fd62a183</a>'
}
]
})
],
build: {
rollupOptions: {
external: ['vue', 'axios'] // 明确声明不打包
}
}
})注意：var 字段必须与目标 CDN 文件导出的全局变量名一致（比如 Vue 的 ESM CDN 版本导出的是 Vue，而 IIFE 版本可能是 window.Vue）；路径建议选带版本号、长期缓存策略明确的 URL（如字节跳动 CDN 或 jsDelivr）。
确保 HTML 能正确加载 CDN 资源
插件会自动在生成的 index.html 中插入 <script></script> 标签，但你得确认它们的位置合理（通常在
defer）。- 如果使用自定义 HTML 模板（
public/index.html），插件默认仍能注入；若失效，可手动加：
<!-- public/index.html 示例 --> <script src="https://lf26-cdn-tos.bytecdntp.com/.../vue.runtime.esm-browser.prod.js" defer></script> <script src="https://lf6-cdn-tos.bytecdntp.com/.../axios.min.js" defer></script>
加 defer 可避免阻塞 HTML 解析，同时保证执行顺序（比如 axios 依赖 Vue 就要后加载）。
进阶：用 Import Maps 替代全局 script（推荐现代项目）
如果你的目标浏览器支持（Chrome 89+、Safari 16.4+、Firefox 108+），更干净的方式是用原生 <script type="importmap"></script>，完全避开 window 全局污染和执行顺序问题。
- 在
public/index.html的 中添加：
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue@3.6.5/dist/vue.runtime.esm-browser.prod.js",
"axios": "https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"
}
}
</script>此时 vite-plugin-cdn-import 不再需要，但必须同步在 vite.config.js 中保留 external: ['vue', 'axios']，否则 Rollup 仍会尝试打包。
验证是否生效
构建后检查两个关键点：
- 打开
dist/index.html：确认有 CDN 的<script></script>或importmap，且没有重复引入本地 vendor chunk - 打开浏览器开发者工具 → Network 面板：刷新页面，看
vue、axios是否从 CDN 域名加载，大小是否为几百 KB 而非 0 KB（说明没被空打包） - 运行
npx rollup-plugin-visualizer查看分析报告：确认相关模块已从依赖图中消失
只要这三步都对得上，CDN 加速和外部化就已稳定落地。
