Back to Details

modern-web-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

⚡ High-Performance Web Engineering

⚡ 高性能Web工程

Source: Vercel Best Practices / Anthony Fu (Antfu) Engineering Standards

This skill focuses on "Elite-Level" web development: speed, zero-config DX, and scalable architecture.

来源：Vercel最佳实践 / Anthony Fu (Antfu) 工程标准

本技能聚焦于“精英级”Web开发：速度、零配置开发者体验（DX）以及可扩展架构。

🚀 1. The Vercel Way (Modern Stack)

🚀 1. Vercel方法（现代技术栈）

Edge-First Thinking: Prioritize logic that runs on the Edge (Middleware, Edge Functions) to reduce TTFB.
Incremental Static Regeneration (ISR): Update static content without a full rebuild.
Server Component Patterns: Minimize client-side JS. Use
```
use server
```
sparingly and only where needed.

优先边缘计算思维：优先运行在Edge的逻辑（Middleware、Edge Functions）以降低TTFB。
增量静态再生（ISR）：无需完全重建即可更新静态内容。
服务器组件模式：最小化客户端JS。仅在必要时谨慎使用
```
use server
```
。

🛠️ 2. Antfu-Grade Developer Experience (DX)

🛠️ 2. Antfu级开发者体验（DX）

Zero-Config Philosophy: Use modern tools like
```
Vite
```
,
```
Vitest
```
, and
```
ESLint (flat config)
```
to minimize boilerplate.
Composable Logic: Build small, single-responsibility functions (Vue Composables or React Hooks) that are highly unit-testable.
Type-Safety Everywhere: No
```
any
```
. Use Zod for runtime validation and strict TS configs.

零配置理念：使用Vite、Vitest和ESLint (flat config)等现代工具，减少样板代码。
可组合逻辑：构建小巧、单一职责的函数（Vue Composables或React Hooks），确保高可测试性。
全类型安全：禁止使用
```
any
```
。使用Zod进行运行时验证，并采用严格的TS配置。

📦 3. Monorepo & Scalability

📦 3. Monorepo与可扩展性

Turborepo Master: Manage multi-package projects with intelligent caching and parallel execution.
Shared UI Libraries: Split the UI into a separate package within the monorepo for reuse across Web/Mobile.
Package Modernization: Migrate from CJS to ESM. Ensure
```
package.json
```
exports are correctly defined.

Turborepo精通：通过智能缓存和并行执行管理多包项目。
共享UI库：在monorepo中将UI拆分为独立包，以便在Web/移动端复用。
包现代化：从CJS迁移到ESM。确保
```
package.json
```
的exports定义正确。

🧪 4. Performance Auditing

🧪 4. 性能审计

Core Web Vitals: Monitor LCP, FID, and CLS. Chasing "100" on PageSpeed Insights is the goal.
Bundle Analysis: Use tools to find and remove "heavy" dependencies.
Preload/Prefetch Strategies: Optimize asset loading for critical paths.

Created by Antigravity Orchestrator - Powered by Elite Web Ecosystem Wisdom.

核心Web指标（Core Web Vitals）：监控LCP、FID和CLS。目标是在PageSpeed Insights上达到“100”分。
包分析：使用工具查找并移除“重型”依赖。
预加载/预获取策略：优化关键路径的资源加载。

由Antigravity Orchestrator创建 - 基于精英Web生态系统智慧提供支持。