web-performance-optimization

用途

本技能用于实现 Web 应用性能优化策略，包括懒加载、代码分割、缓存、压缩与监控，以改善 Core Web Vitals 和用户体验。

适用时机

技能文档列出的使用场景包括：

页面加载时间缓慢
Largest Contentful Paint（LCP）偏高
打包体积（bundle sizes）过大
Cumulative Layout Shift（CLS）频繁出现
移动端性能问题

主要能力（参考指南）

详细实现收录在 references/ 目录下，包含五份指南：

Code Splitting and Lazy Loading (React)——React 代码分割与懒加载
Image Optimization——图片优化
HTTP Caching and Service Workers——HTTP 缓存与 Service Workers
Gzip Compression and Asset Optimization——Gzip 压缩与资源优化
Performance Monitoring——性能监控

使用方式

技能提供一个最小可用示例（Quick Start），演示 React 懒加载工具函数与路由懒加载配置的写法。示例代码（未作改动）：

// utils/lazyLoad.ts
import React from 'react';

export const lazyLoad = (importStatement: Promise<any>) => {
  return React.lazy(() =>
    importStatement.then(module => ({
      default: module.default
    }))
  );
};

// routes.tsx
import { lazyLoad } from './utils/lazyLoad';

export const routes = [
  {
    path: '/',
    component: () => import('./pages/Home'),
    lazy: lazyLoad(import('./pages/Home'))
  },
  {
    path: '/dashboard',
    lazy: lazyLoad(import('./pages/Dashboard'))
  },
  {
// ... (see reference guides for full implementation)

文档说明完整实现需参见参考指南。

最佳实践

✅ DO（建议做法）：

遵循既有模式与约定
编写整洁、可维护的代码
添加适当的文档
部署前充分测试

❌ DON'T（避免做法）：

跳过测试或验证
忽略错误处理
硬编码配置值

限制

资料未提供具体的性能指标目标值、支持的框架或平台清单、安装命令、依赖要求、收费或价格信息，以及除示例外的完整实现代码，这些内容暂未提供。

技能介绍

用途

适用时机

主要能力（参考指南）

使用方式

最佳实践

限制