SuperAPI AI 工具集

css-performance

前端与建站

查看项目

更新于 10-16 08:07

技能介绍

用途:css-performance 提供聚焦、原子化的 CSS 性能优化指导,覆盖关键 CSS、Purging、压缩、代码分割与选择器效率,并配有可度量的指标建议。

主要能力:

  • 关键 CSS:提取首屏样式(工具 Critical、Penthouse),内联关键样式并延迟其余样式。
  • Purging(tree-shaking):PurgeCSS 配置、safelist 模式与动态类名处理。
  • 压缩:cssnano 优化、clean-css 备选,区分安全与不安全优化。
  • 代码分割:基于路由、组件级 CSS 与动态导入。
  • 选择器性能:区分快慢选择器(避免通用后代与复杂属性选择器)。

使用方式:调用 Skill("css-performance")。必填参数 optimization_type,取值为 critical-css、purging、minification、code-splitting、selectors;可选 tool,取值为 purgecss、cssnano、critical、webpack、postcss;可选 metrics 布尔值,默认 true。资料给出的示例命令包括:npx lighthouse-ci https://example.com --collect、npx webpack-bundle-analyzer stats.json。CSS 覆盖率可在 Chrome DevTools 的 Coverage 工具中查看。

性能目标:CSS 大小(gzip)< 50KB,未使用 CSS < 20%,关键 CSS < 14KB,FCP < 1.8s。

适用场景:需要对打包体积、首屏渲染和样式加载做优化的前端构建流程。

限制:依赖 css-fundamentals 与 css-architecture;复杂度为高级到专家级。资料未提供安装命令、定价与版本信息。存在重试与日志配置示例(最多 3 次指数退避),错误处理需注意 INVALID_OPTIMIZATION、TOOL_NOT_INSTALLED、OVER_PURGING。