重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
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,
});
// ❌ 导入整个库
import _ from "lodash";
// ✅ 仅导入所需部分
import uniq from "lodash/uniq";
// 使用 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 开发者,精准高效
import { FixedSizeList } from "react-window";
<FixedSizeList height={600} itemCount={items.length} itemSize={100} width="100%">
{({ index, style }) => <Item style={style} data={items[index]} />}
</FixedSizeList>
// 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 仪表板 → 分析,了解:
// 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 });
}
每周安装次数
58
代码仓库
GitHub 星标数
20
首次出现
2026年1月28日
安全审计
安装于
codex51
opencode50
github-copilot49
cursor49
gemini-cli48
claude-code47
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%
# 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
// ❌ 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,
});
// ❌ Imports entire library
import _ from "lodash";
// ✅ Import only what you need
import uniq from "lodash/uniq";
// 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>;
});
import { FixedSizeList } from "react-window";
<FixedSizeList height={600} itemCount={items.length} itemSize={100} width="100%">
{({ index, style }) => <Item style={style} data={items[index]} />}
</FixedSizeList>
// 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 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 } });
// ❌ 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);
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;
}
// Revalidate every hour
export const revalidate = 3600;
// Or use fetch with caching
const data = await fetch(url, { next: { revalidate: 3600 } });
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
/>
// API route with optimized config
export const config = {
maxDuration: 60, // seconds
};
// Use edge functions for low-latency endpoints
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("Slow request", { 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(`Slow query: ${duration}ms`);
}
Check Vercel Dashboard → Analytics for:
// 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 });
}
Weekly Installs
58
Repository
GitHub Stars
20
First Seen
Jan 28, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex51
opencode50
github-copilot49
cursor49
gemini-cli48
claude-code47
Azure 升级评估与自动化工具 - 轻松迁移 Functions 计划、托管层级和 SKU
127,000 周安装