网站第三方库突增致性能下降，求溯源排查方案

先理清楚你的核心困境：代码没合并、npm包也没更新，但网站突然多了11个广告类第三方库，Calibre能检测到但浏览器网络面板抓不到，确实挺棘手的。给你几个针对性的排查方向，都是前端排查这类问题的常用思路：

1. 先查Google Tag Manager（GTM）的容器变动 #

虽然你说应用端没改，但GTM是很多团队引入广告、分析工具的“暗门”：

• 登录GTM后台，查看版本历史记录：重点看近3天内有没有新发布的版本，对比版本差异，就能找到是否有新增的Tag/Trigger/Variable——你提到的这些广告库，大概率是通过GTM批量引入的。
• 启用GTM的预览模式：打开网站时启动预览，实时追踪哪些Tag被触发，对应加载的脚本是不是你说的那些未知库，这个模式能清晰看到GTM发起的所有资源请求。

2. 排查现有广告体系的动态加载 #

你列出的新增库几乎全是广告技术供应商（The Trade Desk、Pubmatic、AppNexus都是知名的广告SSP/交易平台），很大可能是现有广告代码触发的动态依赖加载：

• 找到网站上已有的广告位代码（不管是GTM引入还是直接嵌入的），检查它们的配置：不少广告平台会根据流量地域、竞价需求，动态加载合作伙伴的追踪、竞价脚本，这类请求往往是按需触发，不会在初始HTML里显式出现。
• 临时禁用所有广告相关脚本：注释掉网站里的广告代码，再用Calibre检测第三方库数量，如果回到原来的27个，就能确定是现有广告体系的动态引入导致的。

3. 绕过浏览器面板限制，深挖网络请求 #

如果网络面板看不到这些请求，大概率是脚本通过document.write、动态创建script后立即移除，或是跨域资源被浏览器默认过滤了：

• 用Chrome的Performance面板录制完整加载流程：勾选「Network」选项，录制后查看每个资源的「Initiator」列，哪怕是动态生成的脚本，也能追踪到触发它的父脚本。
• 开启Chrome的Verbose日志级别：在DevTools设置里打开Verbose模式，然后在Console里搜索这些库的名称，可能会找到加载时的日志信息，比如哪个脚本发起了加载请求。
• 用Charles/Fiddler抓包工具：绕过浏览器DevTools的限制，全程抓取HTTP/HTTPS请求，所有加载的资源都会被记录，包括那些在DevTools里“隐身”的动态脚本。

4. 检查CDN或服务器端的注入 #

虽然你没改代码，但CDN服务商或服务器端的配置变动也可能导致资源注入：

• 查看CDN的配置面板：有些CDN会提供广告注入、第三方工具集成等增值服务，检查有没有开启自动引入脚本的功能。
• 对比本地与线上的HTML源码：直接访问服务器上的静态HTML文件，和本地开发环境的源码对比，看看线上版本有没有额外的脚本标签——这些可能是服务器端或CDN注入的。

5. 排除本地环境干扰 #

有时候本地浏览器扩展或代理工具会带来意外的脚本加载：

• 用无痕模式打开网站：禁用所有浏览器扩展，再检测第三方库数量，如果数量减少，说明是本地扩展的问题。
• 在不同设备/网络下测试：比如用手机流量访问，排除本地网络代理、局域网工具的干扰。

内容的提问来源于stack exchange，提问作者GlooMpiQue Web