用途
该技能用于审计与「避免向现代浏览器提供旧版 JavaScript」相关的性能问题,典型触发场景包括页面加载缓慢、资源过重或渲染延迟。其核心目标是识别并消除向现代浏览器发送不必要 ES5 代码与 polyfill 的情况。
主要能力
技能围绕以下要点展开:
- 使用差异化服务(module/nomodule)分别面向现代浏览器与旧版浏览器。
- 避免为已支持 ES6+ 的浏览器引入沉重的 ES5 polyfill。
- 将代码编译到现代目标,以减小包体积并提升执行速度。
技能提供四类操作:
- 检查:分析项目的 JavaScript 输出,判断现代浏览器是否被提供了不必要的 ES5 代码和 polyfill。
- 修复:更新构建配置,使用差异化服务,并为主要 JavaScript 输出设置现代目标。
- 解释:说明向现代浏览器提供 ES6+ 代码为何能提升性能,以及为何不再推荐将所有代码转译为 ES5。
- 代码审查:审查影响该规则的路由、资源和加载行为,标记出增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤,并描述用于确认问题的测量方法。
使用方式
在需要审计页面加载性能、资源体积或渲染延迟时调用该技能。技能会针对项目 JavaScript 输出进行检查,并给出修复建议。完整实现细节、代码示例与框架相关指导见 references/rule.md。规则页面为 https://frontendchecklist.io/en/rules/performance/legacy-js。
适用场景
- 页面加载缓慢,怀疑与旧版 JavaScript 或 polyfill 体积有关。
- 资源过重,需要确认是否向现代浏览器发送了不必要的 ES5 代码。
- 渲染延迟,需要排查加载行为中的网络、CPU 或布局开销。
- 构建配置审查,需要引入差异化服务并设置现代编译目标。
限制
资料未提供具体的框架适配范围、支持的构建工具清单、性能提升的量化数据或兼容性边界,这些内容暂未提供。