cdn资源加载需严格处理顺序、版本和回退机制，否则易致白屏或渲染异常；样式须置于head且早于依赖结构，js推荐body底部或加defer；必须锁定版本号并配置本地回退，图标类库还需注意元数据加载与离线支持。
直接在 里加 <link> 或 <script></script> 就能用，但顺序、版本、回退机制这三点没处理好，页面大概率白屏或图标/组件不渲染。
CDN链接必须放在正确位置
样式类库（如 Bootstrap、Ant Design）的 <link rel="stylesheet"> 必须放在 内，且早于任何依赖它的 HTML 结构；JS 类库（如 Vue、React、Axios）的 <script></script> 推荐放在 底部，或加 defer 属性防止阻塞渲染。
- Vue 2 要求 DOM 挂载点（如
<div id="app">）已存在，所以 <code><script></script>不能比挂载点更早执行 - React 18 需要
react和react-dom同时加载完成，两个<script></script>不能颠倒顺序 - Babel Standalone 必须在 React JSX 代码之前加载，否则
type="text/babel"不解析 -
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css✅ 明确锁定 -
https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css❌ 会随上游发布自动更新，不可控 - Iconify 图标集如
mdi:home在 v1 和 v2 元数据格式不兼容，必须匹配 CDN 中iconify-icon的版本 - 用
onerror动态加载本地备份：<link id="bootstrap-cdn" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">+ 后续 JS 监听失败并插入本地/css/bootstrap.min.css - 避免把多个库塞进一个
<script></script>：某个库加载失败不会导致整条链路中断 - Element UI 和 Ant Design Vue 的 CSS 与 JS 必须成对回退，否则出现样式缺失但组件可交互的诡异状态
- 离线方案不是“下载 JS 文件”就够了，必须预生成并托管图标集 JSON 到本地，再调用
Iconify.addCollection()注入 - Font Awesome 6 的
fa-brands图标默认不包含在all.min.css里，漏引fontawesome-brands.min.css就会导致fa-github等品牌图标失效 - 控制台看到
Failed to load resource: the server responded with a status of 404 ()，90% 是图标 ID 写错（比如mdi:home-outline实际应为mdi:home-outline但图标集未启用）或 API 地址被拦截
版本号不能省，尤其注意 major 版本差异
不写版本号（如 https://cdn.jsdelivr.net/npm/vue@2）看似方便，实则危险：npm 包主版本升级后，旧代码可能直接报错。比如 vue@3 移除了 new Vue()，axios@1.7 默认禁用 withCredentials，font-awesome@6 的图标类名和图标集结构跟 v5 完全不同。
网络失败时必须有本地回退方案
CDN 不是 100% 可靠——国内部分企业内网屏蔽外部域名，海外用户访问 jsDelivr 偶尔超时，甚至某些 CDNJS 资源在 2026 年已下线（如旧版 antd@4.x 的某些子路径）。只靠 CDN，上线即高风险。
图标类库要特别注意元数据加载机制
像 Iconify 这类按需加载 SVG 的库，表面只引一个 JS，实际运行时会动态请求 https://api.iconify.design/ 获取图标集 JSON。这个地址在国内多数环境可直连，但若项目部署在完全离线环境或强管控内网，图标就永远是空白方块。
真正麻烦的从来不是“怎么加一行代码”，而是当 CDN 失效、版本跳变、图标不显示、控制台静默报错时，你能不能 30 秒内定位到是路径问题、权限问题，还是元数据没加载——这些细节藏在加载链路的每个环节里，而不是文档第一行示例中。
