link rel="preload" 对第三方 SDK 初始化完全无效，因其仅下载不执行，无法触发动态插入、懒加载或条件初始化等运行时逻辑，且无法处理动态 URL、CSP、integrity 等限制。
link rel="preload" 对第三方脚本的“提前初始化”完全无效——它只下载，不执行，也不触发 SDK 的任何逻辑。
为什么 preload 不能让 Sentry/Plausible/Hotjar 提前 init
第三方 SDK 初始化是运行时行为：依赖 script 动态插入、import() 懒加载，或由业务条件（如用户登录后、页面滚动到某区域）触发。这些发生在 JS 执行阶段，而 link rel="preload" 只在 HTML 解析早期发起请求，两者生命周期根本不重叠。
-
preload下载完资源后就“躺平”，不会注入全局变量、不会调用init()、也不会等你require或new Sentry() - 多数 SDK 主包体积小（比如
@sentry/tracing只有几 KB），真正耗时的是后续 API 请求（配置拉取、上报 endpoint）、CSP 检查、或运行时条件判断——这些preload根本管不了 - 如果 SDK 脚本带
integrity或要求crossorigin，而preload没配对，缓存无法复用，等于白下一次
as="script" 预加载第三方脚本的前提极苛刻
只有满足「路径静态、无动态参数、且你 100% 控制入口 URL」时，as="script" 才可能复用。现实中几乎不存在：
- ❌ 带时间戳：
https://cdn.example.com/sdk.js?t=1718523600 - ❌ 版本拼接：
https://cdn.example.com/sdk/v2.3.0/main.js→ 下个版本就失效 - ❌ A/B 测试 query：
?exp=hotjar-v2&user_id=abc - ✅ 极少数例外：CDN 上固定 URL 的轻量封装层（如
https://cdn.example.com/analytics-loader.js），但该文件本身仍需手动eval或document.write才能启动 SDK
真正可控的预加载方式：prefetch + dynamic import
把资源获取和执行时机解耦，交给 JS 主动管理，才靠谱：
立即学习“前端免费学习笔记（深入）”；
- 用
rel="prefetch"提前低优先级拉取主包（href="https://cdn.example.com/sdk/main.js"），浏览器空闲时下载并缓存，后续import()直接复用 - 用
import()动态导入 SDK 模块（import('https://cdn.example.com/sdk/main.js')），现代打包器（Vite/Webpack）会自动提取其依赖并生成prefetch链接 - 封装
loadScript()工具函数，支持超时、重试、错误回调，并在合适时机（如路由就绪、用户交互后）调用init()
绝对不要 preload 的第三方相关资源
这些不是静态资源，preload 完全不适用：
- 统计上报 endpoint（
https://o.sentry.io/...）→ 是fetch行为，不是可预加载文件 - 埋点图片（
https://plausible.io/api/event?...）→ 查询参数动态生成，URL 不固定 - 用户行为日志接口、实时消息长连接、字体服务 API → 全部属于运行时请求，
preload无法建模
真正容易被忽略的点：即使你成功 preload 了某个第三方脚本，只要没在后续 HTML 或 JS 中显式引用它（比如 <script src="..."> 或 import(...)），浏览器就不会把它和任何执行上下文绑定——它只是静静躺在内存缓存里，直到被踢出或过期。
