vite-plugin-cdn-import是Vite项目CDN加速主流方案，通过自动排除打包+注入script标签，减小主包体积、提升首屏速度并复用浏览器缓存；支持按需匹配模块名，无需手动修改HTML，且可结合环境判断实现开发本地、生产CDN的分离策略。
在 Vite 构建中配置外部 CDN 加速第三方库，核心是两件事：一是让这些库不被打包进最终产物，二是自动在 HTML 中注入对应的 CDN `<script>` 标签。这能显著减小主包体积、提升首屏加载速度，并复用浏览器缓存。</script>
用 vite-plugin-cdn-import 自动注入 CDN 资源
这是目前最主流、最省心的方案，支持按需匹配模块名并生成对应 script 标签，无需手动改 HTML。
- 安装插件：
npm install vite-plugin-cdn-import --save-dev - 在
vite.config.js中配置（以 React 为例）：
import { defineConfig } from 'vite'<br>import { cdn } from 'vite-plugin-cdn-import'<br><br>export default defineConfig({<br> plugins: [<br> cdn({<br> modules: [<br> { name: 'react', var: 'React', path: 'https://unpkg.com/react@18.2.0/umd/react.production.min.js' },<br> { name: 'react-dom', var: 'ReactDOM', path: 'https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js' },<br> { name: 'axios', var: 'axios', path: 'https://unpkg.com/axios@1.6.7/dist/axios.min.js' }<br> ]<br> })<br> ]<br>})
插件会自动识别 import React from 'react' 这类语句，在构建时跳过打包，并向 index.html 的 <head> 或 <body> 注入对应 script 标签。
配合 externals + external-globals 实现全局变量映射
适用于需要强控制全局变量名、或已有成熟 CDN 资源地址（如公司内网 CDN）的场景。它更底层，也更灵活。
立即学习“Java免费学习笔记（深入）”；
- 在
build.rollupOptions.external中声明哪些模块不打包 - 用
rollup-plugin-external-globals告诉 Vite：“这个 import 名 → 对应 window 上哪个变量” - 再配合
vite-plugin-html手动插入 script 标签（推荐放在<body>底部）
例如 React 项目配置片段：
import externalGlobals from 'rollup-plugin-external-globals'<br>import { createHtmlPlugin } from 'vite-plugin-html'<br><br>export default defineConfig({<br> build: {<br> rollupOptions: {<br> external: ['react', 'react-dom'],<br> plugins: [externalGlobals({<br> react: 'React',<br> 'react-dom': 'ReactDOM'<br> })]<br> }<br> },<br> plugins: [<br> createHtmlPlugin({<br> inject: {<br> tags: [{<br> injectTo: 'body',<br> tag: 'script',<br> attrs: {<br> src: 'https://your-cdn.com/react@18.2.0,react-dom@18.2.0.min.js'<br> }<br> }] <br> }<br> })<br> ]<br>})
开发环境与生产环境分离处理
很多内部系统（如沙箱环境）禁止访问外网 CDN，但又希望生产环境走 CDN —— 这时不能硬编码，得做环境判断。
- 开发时保留本地 node_modules 导入，保证热更新和调试正常
- 只在
mode === 'production'时启用 CDN 插件或 externals 配置 - 可在插件配置里加判断，比如：
plugins: [ mode === 'production' ? cdn({...}) : null ]
这样既不影响日常开发体验，又能确保上线后获得 CDN 加速收益。
注意 CDN 资源的版本与完整性
CDN 加速不是“一配了之”，几个关键细节容易踩坑：
- 必须使用 UMD 或 IIFE 格式资源：ESM 版本无法通过 script 标签全局暴露变量，Vite 会报 “xxx is not defined”
-
路径要带完整版本号：避免缓存问题或意外升级导致兼容性断裂，例如用
axios@1.6.7而非axios@latest -
检查依赖顺序：比如
react-dom必须在react之后加载，插件默认按数组顺序注入，保持顺序即可 -
验证全局变量名是否匹配：查看 CDN 资源源码确认挂载到
window.React还是window.react，var 字段必须一致
