⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Web性能优化指南：前端、后端、数据库全方位性能指标与优化技巧

performance by sgcarstrends/sgcarstrends

61 周安装量

20 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/sgcarstrends/sgcarstrends --skill performance

前端优化开发运维性能优化

🇨🇳中文介绍

性能技能

性能目标

前端（Web Vitals）： LCP < 2.5s, FID < 100ms, CLS < 0.1, FCP < 1.8s, TTFB < 600ms 后端： 响应时间 < 500ms (p95)，冷启动 < 2s，错误率 < 1% 数据库： 查询时间 < 100ms，缓存命中率 > 80%

性能测量

# Lighthouse 审计
npx lighthouse https://sgcarstrends.com --view

# 包分析
cd apps/web && ANALYZE=true pnpm build

# 使用 k6 进行负载测试
k6 run --vus 100 --duration 5m load-test.js

包大小优化

动态导入

// ❌ 静态导入（立即加载）
import { HeavyComponent } from "./heavy-component";

// ✅ 动态导入（懒加载）
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("./heavy-component"), {
  loading: () => <div>加载中...</div>,
  ssr: false,
});

Tree Shaking

// ❌ 导入整个库
import _ from "lodash";

// ✅ 仅导入所需部分
import uniq from "lodash/uniq";

React 性能

防止重复渲染

// 使用 useMemo 处理昂贵的计算
const processed = useMemo(() => expensiveOperation(data), [data]);

// 使用 useCallback 保持函数引用稳定
const handleClick = useCallback(() => doSomething(), []);

// 使用 React.memo 处理纯组件
const Child = React.memo(function Child({ name }) {
  return <div>{name}</div>;
});

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

数据库查询优化

// packages/database/src/schema/cars.ts
export const cars = pgTable("cars", {
  make: text("make").notNull(),
  month: text("month").notNull(),
}, (table) => ({
  makeIdx: index("cars_make_idx").on(table.make),
}));

// ❌ N+1 查询
for (const post of posts) {
  post.author = await db.query.users.findFirst({ where: eq(users.id, post.authorId) });
}

// ✅ 包含关系的单次查询
const posts = await db.query.posts.findMany({ with: { author: true } });

// ❌ 选择所有列
const users = await db.query.users.findMany();

// ✅ 选择特定列
const users = await db.select({ id: users.id, name: users.name }).from(users);

const cars = await db.query.cars.findMany({
  limit: 20,
  offset: (page - 1) * 20,
});

import { redis } from "@sgcarstrends/utils";

export async function getCarsWithCache(make: string) {
  const cacheKey = `cars:${make}`;
  const cached = await redis.get(cacheKey);
  if (cached) return JSON.parse(cached as string);

  const cars = await db.query.cars.findMany({ where: eq(cars.make, make) });
  await redis.set(cacheKey, JSON.stringify(cars), { ex: 3600 });
  return cars;
}

// 每小时重新验证
export const revalidate = 3600;

// 或使用带缓存的 fetch
const data = await fetch(url, { next: { revalidate: 3600 } });

import Image from "next/image";

// ✅ 优化图片，对首屏图片设置优先级
<Image
  src="/hero.jpg"
  alt="Hero"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  priority
/>

// 具有优化配置的 API 路由
export const config = {
  maxDuration: 60, // 秒
};

// 对低延迟端点使用边缘函数
export const runtime = "edge";

// apps/api/src/middleware/performance.ts
export const performanceMiddleware = async (c: Context, next: Next) => {
  const start = performance.now();
  await next();
  const duration = performance.now() - start;

  c.header("X-Response-Time", `${Math.round(duration)}ms`);

  if (duration > 1000) {
    log.warn("慢请求", { path: c.req.path, duration: Math.round(duration) });
  }
};

const start = performance.now();
const result = await db.query.cars.findMany();
const duration = performance.now() - start;

if (duration > 100) {
  console.warn(`慢查询: ${duration}ms`);
}

查看 Vercel 仪表板 → 分析，了解：

函数执行时间
边缘响应时间
Web Vitals 指标
请求量和错误

// load-test.js (k6)
import http from "k6/http";
import { check } from "k6";

export const options = {
  stages: [
    { duration: "2m", target: 100 },
    { duration: "5m", target: 100 },
    { duration: "2m", target: 0 },
  ],
  thresholds: {
    http_req_duration: ["p(95)<500"],
    http_req_failed: ["rate<0.01"],
  },
};

export default function() {
  const res = http.get("https://api.sgcarstrends.com/api/v1/cars/makes");
  check(res, { "status 200": (r) => r.status === 200 });
}

包大小 < 200KB（初始加载）
LCP < 2.5s, FID < 100ms, CLS < 0.1
API 响应 < 500ms
数据库查询 < 100ms
图片已优化（WebP/AVIF）
已实现代码分割
已制定缓存策略
长列表已虚拟化
已启用压缩

压缩：启用 gzip/brotli（减少 60-80% 大小）
图片优化：使用 Next.js Image 组件
缓存：在 Redis 中缓存昂贵操作
索引：为频繁查询的列添加索引
代码分割：懒加载重型组件
记忆化：对昂贵操作使用 useMemo/useCallback

🇺🇸English

Performance Skill

Performance Targets

Frontend (Web Vitals): LCP < 2.5s, FID < 100ms, CLS < 0.1, FCP < 1.8s, TTFB < 600ms Backend: Response time < 500ms (p95), cold start < 2s, error rate < 1% Database: Query time < 100ms, cache hit rate > 80%

Measure Performance

# Lighthouse audit
npx lighthouse https://sgcarstrends.com --view

# Bundle analysis
cd apps/web && ANALYZE=true pnpm build

# Load test with k6
k6 run --vus 100 --duration 5m load-test.js

Bundle Size Optimization

Dynamic Imports

// ❌ Static import (loads immediately)
import { HeavyComponent } from "./heavy-component";

// ✅ Dynamic import (lazy load)
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("./heavy-component"), {
  loading: () => <div>Loading...</div>,
  ssr: false,
});

Tree Shaking

// ❌ Imports entire library
import _ from "lodash";

// ✅ Import only what you need
import uniq from "lodash/uniq";

React Performance

Prevent Re-renders

// useMemo for expensive calculations
const processed = useMemo(() => expensiveOperation(data), [data]);

// useCallback for stable function references
const handleClick = useCallback(() => doSomething(), []);

// React.memo for pure components
const Child = React.memo(function Child({ name }) {
  return <div>{name}</div>;
});

Virtualize Long Lists

import { FixedSizeList } from "react-window";

<FixedSizeList height={600} itemCount={items.length} itemSize={100} width="100%">
  {({ index, style }) => <Item style={style} data={items[index]} />}
</FixedSizeList>

Database Query Optimization

Add Indexes

// packages/database/src/schema/cars.ts
export const cars = pgTable("cars", {
  make: text("make").notNull(),
  month: text("month").notNull(),
}, (table) => ({
  makeIdx: index("cars_make_idx").on(table.make),
}));

Avoid N+1 Queries

// ❌ N+1 queries
for (const post of posts) {
  post.author = await db.query.users.findFirst({ where: eq(users.id, post.authorId) });
}

// ✅ Single query with relation
const posts = await db.query.posts.findMany({ with: { author: true } });

Select Only Needed Columns

// ❌ Selects all columns
const users = await db.query.users.findMany();

// ✅ Select specific columns
const users = await db.select({ id: users.id, name: users.name }).from(users);

Use Pagination

const cars = await db.query.cars.findMany({
  limit: 20,
  offset: (page - 1) * 20,
});

Caching

Redis Caching

import { redis } from "@sgcarstrends/utils";

export async function getCarsWithCache(make: string) {
  const cacheKey = `cars:${make}`;
  const cached = await redis.get(cacheKey);
  if (cached) return JSON.parse(cached as string);

  const cars = await db.query.cars.findMany({ where: eq(cars.make, make) });
  await redis.set(cacheKey, JSON.stringify(cars), { ex: 3600 });
  return cars;
}

Next.js Caching

// Revalidate every hour
export const revalidate = 3600;

// Or use fetch with caching
const data = await fetch(url, { next: { revalidate: 3600 } });

Image Optimization

import Image from "next/image";

// ✅ Optimized image with priority for above-fold
<Image
  src="/hero.jpg"
  alt="Hero"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  priority
/>

Vercel Function Optimization

// API route with optimized config
export const config = {
  maxDuration: 60, // seconds
};

// Use edge functions for low-latency endpoints
export const runtime = "edge";

Profiling

Performance Middleware

// apps/api/src/middleware/performance.ts
export const performanceMiddleware = async (c: Context, next: Next) => {
  const start = performance.now();
  await next();
  const duration = performance.now() - start;

  c.header("X-Response-Time", `${Math.round(duration)}ms`);

  if (duration > 1000) {
    log.warn("Slow request", { path: c.req.path, duration: Math.round(duration) });
  }
};

Query Profiling

const start = performance.now();
const result = await db.query.cars.findMany();
const duration = performance.now() - start;

if (duration > 100) {
  console.warn(`Slow query: ${duration}ms`);
}

Vercel Analytics

Check Vercel Dashboard → Analytics for:

Function execution times
Edge response times
Web Vitals metrics
Request volumes and errors

Load Testing

// load-test.js (k6)
import http from "k6/http";
import { check } from "k6";

export const options = {
  stages: [
    { duration: "2m", target: 100 },
    { duration: "5m", target: 100 },
    { duration: "2m", target: 0 },
  ],
  thresholds: {
    http_req_duration: ["p(95)<500"],
    http_req_failed: ["rate<0.01"],
  },
};

export default function() {
  const res = http.get("https://api.sgcarstrends.com/api/v1/cars/makes");
  check(res, { "status 200": (r) => r.status === 200 });
}

Performance Checklist

Bundle size < 200KB (initial load)
LCP < 2.5s, FID < 100ms, CLS < 0.1
API responses < 500ms
Database queries < 100ms
Images optimized (WebP/AVIF)
Code splitting implemented
Caching strategy in place
Long lists virtualized
Compression enabled

Quick Wins

Compression : Enable gzip/brotli (60-80% size reduction)
Image Optimization : Use Next.js Image component
Caching : Cache expensive operations in Redis
Indexes : Add indexes to frequently queried columns
Code Splitting : Lazy load heavy components
Memoization : Use useMemo/useCallback for expensive operations

References

Web Vitals: https://web.dev/vitals
Next.js Performance: https://nextjs.org/docs/app/building-your-application/optimizing
k6 Load Testing: https://k6.io/docs

Weekly Installs

Repository

sgcarstrends/sg…rstrends

GitHub Stars

First Seen

Jan 28, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex51

opencode50

github-copilot49

cursor49

gemini-cli48

claude-code47

Azure 升级评估与自动化工具 - 轻松迁移 Functions 计划、托管层级和 SKU

127,000 周安装

Web性能优化指南：前端、后端、数据库全方位性能指标与优化技巧

🇨🇳中文介绍

性能技能

性能目标

性能测量

包大小优化

动态导入

Tree Shaking

React 性能

防止重复渲染

相关 Skills

虚拟化长列表

数据库查询优化

添加索引

避免 N+1 查询

仅选择所需列

使用分页

缓存

Redis 缓存

Next.js 缓存

图片优化

Vercel 函数优化

性能分析

性能中间件

查询分析

Vercel 分析

负载测试

性能检查清单

快速见效措施

参考资料

🇺🇸English

Performance Skill

Performance Targets

Measure Performance

Bundle Size Optimization

Dynamic Imports

Tree Shaking

React Performance

Prevent Re-renders

Virtualize Long Lists

Database Query Optimization

Add Indexes

Avoid N+1 Queries

Select Only Needed Columns

Use Pagination

Caching

Redis Caching

Next.js Caching

Image Optimization

Vercel Function Optimization

Profiling

Performance Middleware

Query Profiling

Vercel Analytics

Load Testing

Performance Checklist

Quick Wins

References

最新 Skills