跳转到文章
Performance2026年10月20日阅读约 1 分钟

未使用的 JavaScript:要删除什么以及要调查什么

在保留必要功能的前提下解读 JavaScript 覆盖率报告。追踪脚本,测试其他页面状态,并比较加载与交互结果。

连接到网页的活动 JavaScript 模块与放在一旁的未使用代码块

JavaScript 覆盖率报告显示了观测期间执行的代码。初始加载时未执行的代码,仍可能用于菜单、结账流程或其他路由。请根据报告选择调查对象,并在修改打包产物之前验证相关的用户操作流程。

从资源和条件入手

对要检查的页面运行 Milten JS Scanner,将 URL、日期和所选测试条件与结果一起保存。该工具只观测一次页面加载,不进行点击或滚动。报告包含脚本加载、覆盖率和 JavaScript 错误,但不能证明某个文件在整个网站中都没有用途。

比较文件的加载数据与代码执行数据。传输量大、执行时间长、未执行代码占比高,是三种不同的现象。脚本下载很快,仍可能在执行时长时间占用主线程。对于未加载的文件,本次测试没有可供评估的执行数据。

用结账流程举例

假设 app.js 同时包含落地页和结账流程的代码。打开落地页时,结账函数不会执行。这是一个教学示例,并非客户网站的实测结果。

找到资源 URL,检查页面如何引入该文件。进入结账流程、操作菜单,并访问使用同一打包文件的其他页面,记录已测试的操作。在 Chrome DevTools Coverage 中,可以在操作页面时持续记录。这种观测覆盖的范围,比只检查初始加载更广。

如果结账需要这些代码,删除它就会破坏必要功能。可以研究在用户进入结账流程时再加载该功能是否合适。决定应依据应用的实际情况,以及对下一次交互的影响。

使用可用的源码映射

源码映射(source map)可以将生成的打包文件对应到源代码模块。Milten 的模块视图需要有效、受支持且可读取的源码映射。缺少映射时,报告的这部分信息不完整,但资源与错误信息仍能帮助定位问题。

没有可用的映射时,请检查资源的导入路径和构建输出。模块视图缺失,并不意味着所有代码都已执行。MDN 源码映射指南解释了生成代码与原始代码的关系。

每次做一项修改,再测试相关流程

选择有依据的改进点,例如拆分不常用的功能,或延迟加载非必要的外部集成。保持修改范围较小,以便比较。确认所需功能仍然正常、控制台没有新增错误,而且浏览器加载了预期的文件。

使用 Speed Scanner 检查加载结果,用 INP Scanner 排查缓慢的交互。初始加载测试中的 TBT 和长任务,与真实访问中测得的 INP 不是同一指标。如果重复导航后有对象不断累积,请使用 Memory Leaks,并复现报告中的操作路径。

在相同条件下比较测试结果

在相同的设备、网络和缓存条件下重复相同的 URL。保留两个报告并记录您手动测试的交互。发布代码更改后验证生产版本;开发包的行为可能有所不同。

我可以删除所有未执行的字节吗?

不能。报告描述的是观测期间的情况,并非应用的所有可能状态。删除代码前,请测试相关操作,以及使用同一打包文件的其他路由。

较小的包是否能保证页面速度更快?

不,加载顺序、服务器响应、执行和后续交互也很重要。比较用户旅程以及文件大小。

分析页面的 JavaScript。如需进一步了解加载的影响,请阅读网站速度与 SEO。

网站速度检测

找出拖慢网站速度的原因

使用 Milten 检测页面,查看 Core Web Vitals 指标并获取加快加载速度的建议。

检测网站
Cookies

我们使用 Cookie

我们使用 Cookie 以在你的网站上为你提供更好的体验。你可以在我们的 隐私政策.