SuperAPI AI 工具集

legacy-js

前端与建站

查看项目

更新于 10-16 06:08

技能介绍

用途

该技能用于审计与「避免向现代浏览器提供旧版 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 或布局开销。
  • 构建配置审查,需要引入差异化服务并设置现代编译目标。

限制

资料未提供具体的框架适配范围、支持的构建工具清单、性能提升的量化数据或兼容性边界,这些内容暂未提供。