本地引入与CDN引入JS插件的区别在于加载时机、版本控制、网络依赖和调试体验：本地路径易出错且受文件位置影响，CDN需锁定版本号防不兼容更新，本地未压缩代码更利于调试，混合使用需防全局污染，CDN应配onerror降级。
有区别，但不是功能上的，而是加载时机、版本控制、网络依赖和调试体验的差异。
本地引入 JS 插件时 script 标签路径写错最常见
本地引入本质是文件系统读取，路径错误直接报 404 或 net::ERR_FILE_NOT_FOUND。相对路径易受当前 HTML 文件位置影响，比如：
-
./js/jquery.min.js：从当前 HTML 所在目录找js/子目录 -
../lib/chart.js：往上退一级再进lib/ - 用
file://协议打开 HTML 时，部分浏览器（如 Chrome）会因安全策略拒绝加载本地script
建议统一用相对于项目根目录的路径（配合本地 server 启动），或改用 http://localhost:8080 类方式调试。
CDN 引入要特别注意版本号是否锁定
CDN 地址里带不带版本号，决定你拿到的是固定版还是“最新兼容版”：
立即学习“前端免费学习笔记（深入）”；
-
https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js→ 锁定 v4.4.0，行为可预期 -
https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.js→ 自动匹配最新 v4.x，可能含非兼容更新 -
https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.js→ 指向 latest，v4 升 v5 时可能直接报错（如Chart.defaults.global在 v4 已废弃，v5 彻底移除）
生产环境务必显式写死主版本号（@4）或完整版本号（@4.4.0），避免某天构建突然失败。
本地 vs CDN 的调试与断点体验差很多
CDN 加载的代码通常压缩+混淆，Chrome DevTools 默认不显示源码映射（source map），打断点只能停在压缩后的一行里；而本地引入未压缩的 .js 文件，能直接看到原始变量名和结构。
- 查 bug 时优先本地引入开发版（如
chart.js对应的chart.js而非chart.umd.min.js） - CDN 若提供
.map文件（如chart.umd.js.map），需确保同目录可访问，且浏览器开启了Enable JavaScript source maps - 某些插件（如
moment.js）CDN 版本默认不暴露全局moment，需确认是否用了umd或iife构建产物
混合使用时要注意全局变量污染和重复加载
一个页面同时存在本地 lodash.js 和 CDN lodash，若都走 IIFE 模式，可能先后执行两次，第二次覆盖第一次的 _，也可能因执行顺序导致模块缓存不一致。
- 检查
window._或window.Chart是否已存在，再决定是否加载 - 用
import+ 构建工具（如 Vite/Webpack）可彻底规避全局污染，但那就不是“HTML5 直接调用”了 - CDN 失败降级方案要用
onerror捕获：<script src="xxx" onerror="document.write('<script src=\"./js/lodash.js\"></script>')"></script>
真正麻烦的不是“能不能用”，而是“什么时候用哪个、怎么验证它真按你想的在跑”。版本号、路径解析、source map、加载失败 fallback——这些细节堆起来，才决定上线那天凌晨三点你是不是还在翻控制台。
