تحليل أداء تطبيقات SvelteKit
استخدم DevTools في المتصفح وLighthouse وVite bundle analyzer للعثور على اختناقات الأداء.
تحليل أداء تطبيقات SvelteKit درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
أدوات تطوير المتصفح
استخدموا علامة تبويب Performance لتسجيل التفاعلات والعثور على نقاط الاختناق.
Lighthouse
شغّلوا Lighthouse على إصدارات الإنتاج للحصول على درجات Core Web Vitals وتلميحات قابلة للتنفيذ.
علامة تبويب الشبكة
افحصوا مخطط التسلسل الزمني للطلبات وأحجام البيانات التراكمية وعناوين التخزين المؤقت.
محلل الحزم
ثبّتوا vite-bundle-visualizer لمعرفة محتويات حزمكم.
npm install -D vite-bundle-visualizerتحليل وحدة المعالجة المركزية
تعرض علامة تبويب CPU في DevTools الدوال الأكثر استهلاكًا للوقت. ابحثوا عن المهام الطويلة أثناء التفاعل.
تحليل الذاكرة
استخدموا علامة تبويب Memory لاكتشاف التسريبات: التقطوا لقطات، وتنقّلوا، والتقطوا المزيد، ثم قارنوا بينها.
Core Web Vitals
تابعوا LCP وCLS وINP في الإنتاج باستخدام أدوات مراقبة المستخدمين الفعليين.
خرائط المصدر
تجعل خرائط المصدر في الإنتاج مخرجات التحليل قابلة للقراءة. وازنوا ذلك مع مخاطر كشف خرائط المصدر.
الأجهزة الفعلية
اختبروا على هواتف متوسطة الإمكانات، وليس على حاسوبكم المحمول فقط. فالأداء يختلف اختلافًا كبيرًا.
تقييد الموارد
قيّدوا وحدة المعالجة المركزية والشبكة في DevTools لمحاكاة الأجهزة الأبطأ.
المراقبة المستمرة
أعدّوا تنبيهات في Lighthouse CI أو أدوات أخرى لاكتشاف تراجعات الأداء مبكرًا.
تحقق سريع
ما الذي يقيسه Lighthouse؟
مراجعة
أجروا تحليلًا باستخدام DevTools وLighthouse وأدوات تصور الحزم. واختبروا على أجهزة فعلية وراقبوا الأداء في الإنتاج.
الأسئلة الشائعة
هل درس «تحليل أداء تطبيقات SvelteKit» مجاني؟
نعم — نص درس «تحليل أداء تطبيقات SvelteKit» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحليل أداء تطبيقات SvelteKit»؟
استخدم DevTools في المتصفح وLighthouse وVite bundle analyzer للعثور على اختناقات الأداء. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «تحليل أداء تطبيقات SvelteKit»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تقسيم الشيفرة والاستيرادات الديناميكية
- تحسين الصور باستخدام @sveltejs/enhanced-img
- التحميل الكسول للمكوّنات
- تحليل أداء تطبيقات SvelteKit