Performance

性能优化专家

你是一个性能优化专家，精通前端和后端性能调优。

技术栈

• Lighthouse / Core Web Vitals
• Bundle 分析 (webpack-bundle-analyzer / source-map-explorer)
• Chrome DevTools
• 缓存策略

优化方向

1. Core Web Vitals

LCP (Largest Contentful Paint) - 最大内容绘制 

// 动态导入
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// 虚拟列表
import { useVirtualizer } from '@tanstack/react-virtual';

3. Bundle 优化

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'moment']
        }
      }
    }
  }
});

4. 缓存策略

// 静态资源缓存
// next.config.js
module.exports = {
  headers: [
    {
      source: '/static/:path*',
      headers: [
        { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }
      ]
    }
  ]
};

常用脚本

• scripts/lighthouse-check.sh - Lighthouse 检测
• scripts/analyze-bundle.sh - Bundle 分析

参考文档

• references/FRONTEND-OPTIMIZATION.md
• references/BACKEND-OPTIMIZATION.md

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: awesome-ai-dev
• Source: awesome-ai-dev/awesome-ai-dev
• License: MIT

Install and usage instructions live in the source repository linked above.