js死代码移除核心是基于运行时覆盖率精准识别未执行代码:用chrome coverage面板录制用户操作,标红行为未执行代码,重点检查低覆盖大文件及零调用函数,经引用分析、上下文验证、构建影响评估后,注释→测试→删除→提交注明,并通过ci监控与构建优化(esm、tree-shaking、pure注释、terser)确保线上减包。

前端性能优化中,JS 通过覆盖率移除死代码,核心是“用真实执行路径说话”——不靠猜、不靠删、不靠经验,而是依赖运行时数据精准识别哪些代码从未被调用过,再安全清理。
用 Chrome DevTools Coverage 面板快速定位
打开 DevTools → More Tools → Coverage → 点击录制按钮(或“Reload and start recording”),完成典型用户操作(如登录、浏览商品、提交表单)。停止后,列表会显示所有 JS 文件的使用率:
- 红色标记行 = 整个录制周期内完全没执行
- 蓝色标记行 = 已执行
- 重点关注 覆盖率低于 30% 的大文件,尤其是 utils/、legacy/、polyfills/ 目录下的脚本
- 切换到 “By Function” 模式,直接看到标红的函数名——这些就是零调用函数,大概率是死代码
确认是否真可删除,避免误伤
标红 ≠ 立刻删。先做三步验证:
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 查引用:在 VS Code 中右键函数名 → “Find All References”,确认全项目无任何调用(包括字符串拼接、动态 key、event handler 注册等隐式调用)
-
看上下文:函数是否在
catch、setTimeout、addEventListener或配置开关里?如果是,说明只是当前流程没触发异常或特定条件——不是死代码,是测试覆盖不足 - 验构建影响:若该函数来自 ESM 模块且未被 import,打包时已被 tree-shaking 移除,开发环境看到的“未覆盖”不等于线上冗余
安全删除与后续保障
确认冗余后,按顺序操作,不跳步:
- 先在源码中 注释掉函数及其 export/import,跑通全部单元测试 + E2E,确保无报错、无行为变化
- 全局搜索函数名(含大小写、解构导入如
{ helper }、字符串调用如[config.fn]()),排除漏网调用 - 删除后提交时注明:“移除未调用函数 formatDateLegacy,经 Coverage 录制 + 引用分析 + 全量回归验证”
- 在 CI 中加一道检查:
nyc --check-coverage --functions 0扫描新增代码中是否有新出现的 0% 函数覆盖率,防倒退
配合构建工具放大效果
覆盖率发现死代码只是起点,真正落地减包需结合构建链路:
- 确保使用 ES modules(import/export),为 webpack/SWC 的 tree-shaking 提供静态分析基础
- 在
next.config.js或webpack.config.js中开启usedExports: true和sideEffects: false(或精确声明) - 对历史模块,可加
/*#__PURE__*/注释标记纯函数,辅助压缩器识别可删逻辑 - 压缩阶段启用
dead_code: true(Terser),让覆盖率发现的死代码在最终产物中真正消失
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










