11.7 מונוריפו וביצועים מתקדמים תרגול
תרגול - מונוריפו וביצועים מתקדמים¶
תרגיל 1 - הקמת מונוריפו עם Turborepo¶
הגדירו מבנה מונוריפו עם Turborepo שכולל:
- שתי אפליקציות:
apps/web(Next.js) ו-apps/admin(Next.js) - שלוש חבילות משותפות:
packages/ui- קומפוננטות (Button, Input, Card, Modal)packages/utils- פונקציות (formatDate, formatCurrency, cn)packages/config- הגדרות (ESLint, TypeScript, Prettier)- קובץ
turbo.jsonעם pipeline ל-build, dev, lint, test, type-check - קובץ
package.jsonראשי עם workspaces
כתבו את כל קבצי ההגדרות הנדרשים.
תרגיל 2 - Web Worker לעיבוד נתונים¶
צרו Web Worker שמבצע את הפעולות הבאות על מערך גדול של נתונים (100,000 פריטים):
- מיון לפי עמודה
- סינון לפי מונח חיפוש
- חישוב סטטיסטיקות (ממוצע, חציון, מינימום, מקסימום)
- קיבוץ לפי קטגוריה
צרו hook בשם useDataProcessor שמתקשר עם ה-Worker ומחזיר את התוצאות.
צרו קומפוננטת טבלה שמשתמשת ב-hook ומראה אינדיקציית עיבוד כש-Worker עובד.
תרגיל 3 - רשימה וירטואלית מתקדמת¶
צרו רשימת אנשי קשר וירטואלית עם TanStack Virtual:
- 50,000 אנשי קשר
- כל פריט כולל: שם, אימייל, טלפון, אווטאר
- פריטים עם גבהים שונים (חלקם עם שורה נוספת של כתובת)
- חיפוש שמסנן את הרשימה בזמן אמת
- סימון פריטים (selection) עם checkbox
- כפתור "גלול לראש" ו"גלול לסוף"
- אינדיקציה כמה פריטים מוצגים מתוך הכלל
תרגיל 4 - Intersection Observer מתקדם¶
צרו דף עם גלריית תמונות שמשתמש ב-Intersection Observer:
- טעינה עצלנית (lazy loading) של תמונות - תמונה נטענת רק כשהיא מתקרבת למסך
- אנימציית fade-in כשתמונה נכנסת למסך
- ספירה של כמה תמונות נטענו מתוך הכלל
- Infinite scroll - טעינת עוד תמונות כשמגיעים לתחתית
- כפתור "חזרה למעלה" שמופיע רק כשגוללים למטה
תרגיל 5 - אסטרטגיות Prefetching¶
מימשו אסטרטגיות טעינה מוקדמת בדף מוצרים:
- Prefetch של דף מוצר כשהעכבר מעל הכרטיס
- Preload של תמונת המוצר הראשי
- Preconnect ל-API server ול-CDN
- DNS prefetch לשירותי צד שלישי
- דחיית טעינה (defer) של סקריפטים לא קריטיים (analytics, chat)
צרו hook בשם usePrefetch שמנהל את ה-prefetching.
תרגיל 6 - דשבורד ביצועים¶
צרו דשבורד שמודד ומציג מדדי ביצועים בזמן אמת:
- FCP (First Contentful Paint)
- LCP (Largest Contentful Paint)
- CLS (Cumulative Layout Shift)
- FID (First Input Delay) / INP (Interaction to Next Paint)
- זמן טעינת דף
- גודל bundle (JavaScript, CSS)
- מספר בקשות רשת
השתמשו ב-Performance API ו-PerformanceObserver.
שאלות¶
- מה היתרונות והחסרונות של מונוריפו לעומת multi-repo?
- הסבירו מה עושה
dependsOn: ["^build"]ב-turbo.json. מה ההבדל בינו ל-dependsOn: ["build"]? - מתי כדאי להשתמש ב-Web Worker ומתי לא? מה המגבלות של Web Workers?
- מה ההבדל בין preload, prefetch ו-preconnect? מתי משתמשים בכל אחד?
- מדוע גלילה וירטואלית חשובה וכיצד היא עובדת?