mcpField
W
web-performance-optimization

web-performance-optimization

github.com/aj-geddes开发375484 次安装35 周前更新
代码仓库

关于 web-performance-optimization

面向开发者的 Web 性能优化指南，适用于处理页面加载缓慢、资源包过大、布局偏移及移动端性能问题，提供加载、缓存、压缩、资源优化和监控参考。

主要功能

  1. 01延迟加载与代码拆分
  2. 02图像优化
  3. 03HTTP 缓存与 Service Worker
  4. 04Gzip 与资源优化
  5. 05性能监控

适用场景

  1. 01降低页面加载耗时
  2. 02处理 JavaScript 资源包过大
  3. 03改善移动端性能及 CLS

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill web-performance-optimization

安装后在 Claude Code 中输入/web-performance-optimization确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
code-splitting-and-lazy-loading-react.md
gzip-compression-and-asset-optimization.md
http-caching-and-service-workers.md
image-optimization.md
performance-monitoring.md
templates/
component-template.tsx

详细介绍

Web 性能优化

目录

概述

实施延迟加载、代码拆分、缓存、压缩和监控等性能优化策略，以改善 Core Web Vitals 和用户体验。

适用场景

  • 页面加载速度慢
  • 最大内容绘制（LCP）耗时较长
  • 打包体积过大
  • 累积布局偏移（CLS）频繁发生
  • 移动端性能问题

快速入门

最小可运行示例：

// utils/lazyLoad.ts
import React from 'react';

export const lazyLoad = (importStatement: Promise<any>) => {
  return React.lazy(() =>
    importStatement.then(module => ({
      default: module.default
    }))
  );
};

// routes.tsx
import { lazyLoad } from './utils/lazyLoad';

export const routes = [
  {
    path: '/',
    component: () => import('./pages/Home'),
    lazy: lazyLoad(import('./pages/Home'))
  },
  {
    path: '/dashboard',
    lazy: lazyLoad(import('./pages/Dashboard'))
  },
  {
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
代码拆分和延迟加载（React）代码拆分和延迟加载（React）
图像优化图像优化
HTTP 缓存和 Service WorkersHTTP 缓存和 Service Workers
Gzip 压缩和资源优化Gzip 压缩和资源优化
性能监控性能监控

最佳实践

✅ 应该做
  • 遵循成熟的模式和约定
  • 编写清晰、易于维护的代码
  • 添加适当的文档
  • 部署前进行全面测试
❌ 不要做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown