Chrome Lighthouse报告主线程多JQuery执行问题求助

以下是几种常见原因：

• 第三方脚本动态引入：页面中的广告、统计工具、社交分享组件等第三方服务，往往会自带jQuery并自行加载，不会检测页面已有的jQuery实例。这类场景下，DevTools会显示多份独立的jQuery脚本。

• 打包工具的重复打包：如果使用Webpack、Rollup等打包工具，部分依赖包内部可能也引用了jQuery。若未配置共享依赖（如externals）或开启tree-shaking，打包后的产物会包含多份jQuery代码，反映在DevTools中就是多个脚本条目。

• 内联或动态执行的jQuery代码：业务代码可能通过内联片段、eval函数或动态创建<script>标签的方式，执行jQuery相关逻辑（比如仅引入核心功能片段）。这些代码在DevTools中会被识别为独立脚本，但代码库中找不到完整的jQuery引用。

• DevTools的解析展示逻辑：Chrome DevTools对压缩后的脚本进行Source Map解析时，可能会将同一份文件的不同函数块拆分为独立的“脚本”条目展示。看起来是多段脚本，实际属于同一原始文件的不同部分。

• 缓存/CDN异常导致重复加载：若通过CDN加载jQuery，因缓存策略失效、CDN节点同步问题，页面可能重复请求并加载同一版本的jQuery，最终在DevTools中显示多个脚本条目。

内容的提问来源于stack exchange，提问作者Aruna Usitha