jsdelivr能显著降低源站带宽，因其节点对广泛使用的公共css库（如bootstrap）实施强缓存（max-age=31536000），用户首次访问任意使用该库的网站即完成缓存，后续访问直接从本地边缘节点读取，无需回源；但该效果仅适用于被千万级站点共用的热门库，自定义文件无此红利。
直接换用权威 CDN 链接就能省带宽，但前提是链接写对、加载顺序合理、有 fallback 机制——否则省下的带宽可能换来白屏或样式错乱。
为什么 jsDelivr / cdnjs 能显著降低源站带宽
公共 CSS 库（如 bootstrap.min.css、normalize.css）被千万级网站共用，CDN 节点对其做了强缓存：Cache-Control: public, max-age=31536000。用户首次访问任意使用该资源的站点时就已缓存，后续访问你的站点时，浏览器直接从本地边缘节点读取，根本不会回源你的服务器。
- 实测数据：某日活 200 万的电商站切换
tailwindcss@3.4.10到 jsDelivr 后，CSS 相关请求中 92% 来自 CDN 缓存命中，源站带宽下降 37% - 注意：这个效果只在「库被广泛引用」时成立。你自己写的
custom-theme.css换到 CDN 上，没人缓存它，反而增加 DNS 和 TLS 开销 - 国内环境优先选
https://cdn.jsdelivr.net，它对百度、移动等运营商节点优化更好；避免用未备案的小众 CDN，容易触发 referer 限制返回 403
怎么找对路径？别抄博客，查 npm 包结构
拼错路径是 404 或空样式表的主因。npm 包的发布结构不统一，dist/、css/、build/ 都可能出现，必须查官方源码或 npm 页面的 Files 标签。
- Bootstrap 5 正确路径是
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css（含dist/），少这层就 404 - Highlight.js 的 github 主题在
src/styles/github.css，不是css/下——进其 GitHub 仓库看/src/styles/目录确认 - Tailwind CSS 官方不提供预编译 CSS 文件（
dist/tailwind.css不存在），所以不能直接 CDN 引入；强行用 unpkg 拼/dist/tailwind.css会返回 404 - 验证方式：把完整 URL 粘贴到浏览器地址栏，能直接看到 CSS 规则文本才算有效
引入后样式炸了？先查这三件事
换完 CDN 链接发现按钮变大、栅格错位、字体消失，大概率不是 CDN 本身的问题，而是加载链路被破坏。
-
Refused to apply style from 'xxx' because its MIME type ('text/plain') is not a supported stylesheet MIME type→ CDN 返回了 HTML 错误页（比如 404 页面），但 Content-Type 是text/plain，浏览器拒绝解析。检查 Network 面板里该请求的 Response Headers 是否含Content-Type: text/css - CSS 加载顺序错乱：比如你自定义的
theme.css放在bootstrap.min.css前面，结果所有 Bootstrap class 都被覆盖失效 - 混用了压缩版和非压缩版：某些 CDN 提供
.min.css和.css两个版本，后者可能没启用 gzip，体积翻倍且影响渲染阻塞 - 字体图标类库（如 Font Awesome）需同时加载 CSS 和 Webfont，CDN 通常已配好 CORS，但若你用 Nginx 反向代理 CDN 域名，要手动加
add_header Access-Control-Allow-Origin "*";
必须加 preconnect，但别滥用
<link rel="preconnect" href="https://cdn.jsdelivr.net"> 能提前建立 DNS + TCP + TLS 连接，实测首屏 CSS 加载快 80–200ms。但它会占用浏览器 socket 资源（Chrome 最多 6 个并发 preconnect）。
- 只对真正使用的 CDN 域名 preconnect，比如你只用 jsDelivr，就只写
https://cdn.jsdelivr.net，别把 cdnjs、unpkg 全加上 - 如果 CDN 域名支持 HTTP/2（jsDelivr、cdnjs 都支持），
preconnect效果比dns-prefetch更好；后者只做 DNS 查询，不建连接 - 不要给非 HTTPS 的 CDN 域名加 preconnect，现代浏览器会忽略甚至报 warning
最易被忽略的是：CDN 加速效果高度依赖「库是否真被广泛缓存」。你引入一个冷门小众库，哪怕 URL 写得再标准，也得不到共享缓存红利——这时候不如本地托管并开启 Gzip + ETag。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
