ميزانيات الأداء: تحديد حدود حجم الحزمة مع Webpack و Lighthouse

مقدمة

ميزانيات الأداء هي قيود تساعد الفرق على الحفاظ على أداء التطبيق بمرور الوقت. بدونها، تتزايد أحجام الحزم وتتدهور المقاييس ويعاني المستخدمون.

إنشاء ميزانيات الأداء

أنواع الميزانيات

interface PerformanceBudget {
  // قائمة على الكمية
  maxBundleSize: number;           // حجم حزمة JS الإجمالي
  maxInitialBundleSize: number;    // JS الأولي/الحرج
  maxImageSize: number;            // حد لكل صورة
  
  // قائمة على الوقت
  maxTimeToInteractive: number;    // TTI بالميلي ثانية
  maxLargestContentfulPaint: number; // LCP بالميلي ثانية
  
  // قائمة على النتيجة
  minLighthousePerformance: number; // 0-100
}

const budget: PerformanceBudget = {
  maxBundleSize: 250 * 1024,        // 250 KB
  maxInitialBundleSize: 100 * 1024, // 100 KB
  maxLargestContentfulPaint: 2500,  // 2.5 ثانية
  minLighthousePerformance: 90,
};

تحليل الحزمة

التحقق من حجم الحزمة في CI

name: التحقق من حجم الحزمة

on: [pull_request]

jobs:
  bundle-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Check bundle size
        uses: preactjs/compressed-size-action@v2

تكامل Lighthouse CI

التكوين

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000/'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
      },
    },
  },
};

المراقبة الآلية

التنبيه عند التراجع

async function checkAndAlert(metrics: PerformanceMetrics) {
  const violations: string[] = [];
  
  if (metrics.bundleSize > budget.maxBundleSize) {
    violations.push(`حجم الحزمة يتجاوز الميزانية`);
  }
  
  if (violations.length > 0) {
    await sendSlackAlert({
      channel: '#performance-alerts',
      text: `⚠️ انتهاكات ميزانية الأداء`,
    });
  }
}

استراتيجيات التحسين

تقسيم الكود

// التقسيم القائم على المسار
const routes = [
  {
    path: '/',
    component: lazy(() => import('./pages/Home')),
  },
  {
    path: '/blog',
    component: lazy(() => import('./pages/Blog')),
  },
];

هز الشجرة

// ❌ يستورد المكتبة بالكامل
import _ from 'lodash';

// ✅ يستورد فقط ما يحتاجه
import debounce from 'lodash/debounce';

الخلاصة

ميزانيات الأداء تنجح عندما:

1. محددة بوضوح: أرقام محددة، وليس أهدافاً غامضة
2. إنفاذ آلي: CI/CD يحظر الانتهاكات
3. مراقبة مستمرة: RUM في الإنتاج
4. موافقة الفريق: الجميع يفهم الأهمية
5. مراجعة منتظمة: ضبط الميزانيات حسب الحاجة

الأداء ميزة. الميزانيات تضمن عدم أخذها عن طريق الخطأ من المستخدمين.