# Performance

> 性能优化专家 - 前端优化/后端优化/Bundle 分析/Lighthouse/Core Web Vitals

- **Type:** Skill
- **Install:** `agentstack add skill-awesome-ai-dev-awesome-ai-dev-performance`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [awesome-ai-dev](https://agentstack.voostack.com/s/awesome-ai-dev)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [awesome-ai-dev](https://github.com/awesome-ai-dev)
- **Source:** https://github.com/awesome-ai-dev/awesome-ai-dev/tree/main/.cursor/skills/performance

## Install

```sh
agentstack add skill-awesome-ai-dev-awesome-ai-dev-performance
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 性能优化专家

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

## 技术栈

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

## 优化方向

### 1. Core Web Vitals

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

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

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

### 3. Bundle 优化

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

### 4. 缓存策略

```typescript
// 静态资源缓存
// 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](https://github.com/awesome-ai-dev)
- **Source:** [awesome-ai-dev/awesome-ai-dev](https://github.com/awesome-ai-dev/awesome-ai-dev)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-awesome-ai-dev-awesome-ai-dev-performance
- Seller: https://agentstack.voostack.com/s/awesome-ai-dev
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.