vite项目中配置cdn加速第三方库的核心是将react、vue等稳定依赖移出打包产物，改由cdn提供以减小主包体积。主流方案是使用vite-plugin-cdn-import自动注入script标签并处理变量映射；也可配合externals与external-globals手动控制，但需自行添加cdn脚本并确保加载顺序。
在 Vite 项目中配置 CDN 加速第三方库，核心目标是：把 React、Vue、Lodash、Axios 等稳定、公共的依赖，从打包产物中移出，改由 CDN 提供，从而减小主包体积、提升加载并行度、复用浏览器缓存。
安装并启用 vite-plugin-cdn-import
这是目前最主流、最自动化的方案，支持构建时解析 import、注入 script 标签、处理变量映射和加载顺序。
- 安装插件：npm install vite-plugin-cdn-import --save-dev
- 在 vite.config.ts 或 vite.config.js 中引入并配置：
import { defineConfig } from 'vite'
import importToCDN from 'vite-plugin-cdn-import'
export default defineConfig({
plugins: [
importToCDN({
modules: [
{ name: 'vue', var: 'Vue', path: 'https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js' },
{ name: 'axios', var: 'axios', path: 'https://unpkg.com/axios@1.7.2/dist/axios.min.js' },
{ name: 'lodash-es', var: '_', path: 'https://unpkg.com/lodash-es@4.17.21/lodash.min.js' }
]
})
]
})
注意：name 必须与你代码中 import xxx from 'xxx' 的包名完全一致（如 lodash-es 不能写成 lodash）；var 是该库挂载到全局 window 上的变量名（如 Vue → window.Vue），Vite 会自动将 import { createApp } from 'vue' 转为对 Vue.createApp 的调用。
配合 externals + external-globals 实现更精细控制
适合已有成熟 CDN 地址管理、或需排除某些包但不自动注入 script 的场景（比如你已统一在 index.html 里手动写了 CDN 链接）。
- 在 build.rollupOptions.external 中声明不打包的包名
- 用 rollup-plugin-external-globals 告诉 Rollup 这些包对应哪个全局变量
import externalGlobals from 'rollup-plugin-external-globals'
export default defineConfig({
build: {
rollupOptions: {
external: ['vue', 'axios', 'lodash-es'],
plugins: [
externalGlobals({
vue: 'Vue',
axios: 'axios',
'lodash-es': '_'
})
]
}
}
})
⚠️ 此方式不会自动生成 script 标签，需你手动在 public/index.html 的 或 底部添加对应 CDN 脚本，并确保加载顺序（例如 Vue 必须在使用它的代码之前）。
CDN 地址选择与关键注意事项
选对 CDN 源直接影响稳定性与速度，不是越快越好，而是要兼顾可用性、版本可控、HTTPS 支持和国内访问表现。
-
优先使用官方或高可信源：unpkg.com、jsdelivr.net、cdnjs.cloudflare.com。例如：
https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js -
务必锁定精确版本号（如
@3.4.27），禁用@latest，避免因自动升级引发运行时错误 -
检查跨域与 CSP 策略：若站点启用了严格 Content-Security-Policy，需在
script-src中加入对应 CDN 域名 -
本地开发保持兼容：插件默认只在生产环境生效（
process.env.NODE_ENV === 'production'），开发时仍走本地 node_modules，无需额外适配
验证是否生效
构建完成后（npm run build），打开 dist/index.html 查看是否插入了对应 CDN 的 <script></script> 标签；再检查 dist/assets/*.js 文件体积是否明显下降（尤其是 vendor chunk）；最后在浏览器控制台执行 console.log(window.Vue) 确认全局变量存在且可用。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
