cdn加载基础库与npm依赖天然作用域不重叠，但需防范全局污染、版本冲突和模块解析错位；cdn走全局作用域（如window.vue），npm走模块作用域，二者不自动共享实例。
CDN 加载基础库和本地 npm 依赖在作用域上天然不重叠，但“隔离”不是自动发生的——它取决于你如何组织代码、是否混用构建流程、以及是否意外暴露全局变量。真正需要防范的，是全局污染、版本冲突和模块解析错位这三类问题。
CDN 引入默认走全局作用域，npm 引入走模块作用域
CDN 方式（如 <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>）加载的是 Vue 的 UMD 或 IIFE 全局构建版，会把 Vue 挂到 window 上，所有后续 script 标签都能直接访问 Vue.createApp。而 npm 引入（import { createApp } from 'vue'）走的是 ES 模块系统，由打包工具（Vite/Webpack）解析、作用域封闭、支持 tree-shaking。
这意味着：
- 二者不会自动共享模块实例，
import不会从window.Vue取值，除非你手动配置别名或 externals - 若同时引入 CDN 版 Vue 和 npm 版 Vue，且未做处理，可能触发重复初始化、响应式失效、甚至控制台报错 “Multiple instances of Vue detected”
- CDN 资源无法被
import()动态导入识别，也不能参与 HMR（热更新）
关键隔离技巧：显式声明 externals + 禁用自动全局注入
当你用 Vite 或 Webpack 构建项目，又想保留 CDN 加载某些库（如 Vue、Lodash），必须主动切断打包工具对它的打包行为，否则会既打进去又从 CDN 加——白占体积还埋雷。
以 Vite 为例，在 vite.config.ts 中配置：
export default defineConfig({
build: {
rollupOptions: {
external: ['vue', 'lodash'], // 告诉 Rollup：这些不打进 bundle
output: {
globals: {
vue: 'Vue',
lodash: '_'
}
}
}
}
})
这样构建后，代码里 import { createApp } from 'vue' 不再生成实际模块代码，而是转为对 window.Vue 的引用。此时务必确保 HTML 中已通过 CDN 正确加载对应全局变量，且命名一致（如 vue.global.prod.js 暴露的是 Vue，不是 vue）。
避免混合使用时的常见陷阱
以下做法容易破坏隔离、引发隐性冲突：
- 在同一个 HTML 页面中，先用 CDN 加载 Vue，又在
main.ts里npm install vue并import—— 构建工具仍会打包一份，造成双 Vue - CDN 使用开发版（
vue.global.js），而生产环境误用该链接，导致性能警告和调试信息泄露 - 未统一 CDN 版本号（如
vue@3.4.21）与 package.json 中dependencies.vue版本，导致类型定义、API 行为不一致 - 将 CDN 脚本放在
，但业务 JS 在底部执行，却没加defer或检测window.Vue是否就绪，导致运行时报Vue is not defined
进阶建议：按环境动态切换加载策略
对于需兼顾开发体验与生产性能的项目，可借助构建时环境变量实现“一套代码、两种依赖路径”：
- 开发时用 npm 依赖：支持 TS 类型提示、HMR、断点调试
- 生产构建时替换为 CDN：
import语句保持不变，仅通过externals+ HTML 注入实现零代码修改切换 - 用
import.meta.env.PROD控制是否注入 CDN script，或交由 CI/CD 流水线注入不同 index.html 模板
这种策略让作用域隔离成为构建阶段的确定性行为，而非运行时的侥幸判断。
