JavaScript שאינו בשימוש עלול להאט את מהירות הטעינה של הדף:
- אם קוד ה-JavaScript חוסם עיבוד, הדפדפן צריך להוריד, לנתח, להדר ולהעריך את הסקריפט לפני שהוא יכול להמשיך לבצע את כל הפעולות האחרות שנדרשות לעיבוד הדף.
- גם אם קוד ה-JavaScript הוא אסינכרוני (לא חוסם עיבוד), הקוד מתחרה על רוחב הפס עם משאבים אחרים בזמן ההורדה, ולכן יש לו השלכות משמעותיות על הביצועים. שליחת קוד שאינו בשימוש ברשת היא בזבוז גם עבור משתמשים בנייד שאין להם תוכניות נתונים ללא הגבלה.
כיצד ביקורת JavaScript שאינה בשימוש נכשלת
הכלי Lighthouse מסמן כל קובץ JavaScript שמכיל יותר מ-20 קילובייט של קוד שאינו בשימוש:
איך להסיר קוד JavaScript שאינו בשימוש
זיהוי JavaScript שאינו בשימוש
בכרטיסייה 'כיסוי' בכלי הפיתוח ל-Chrome תוכלו לראות פירוט של קוד שלא נמצא בשימוש, שורה אחר שורה.
המחלקה Coverage ב-Puppeteer יכולה לעזור באוטומציה של תהליך הזיהוי והחילוץ של קוד שלא נמצא בשימוש.
כלי build לתמיכה בהסרת קוד שלא נמצא בשימוש
כדאי לבדוק את הבדיקות הבאות של Tooling.Report כדי לגלות אם ה-bundler תומך בתכונות שמאפשרות להימנע מקוד שאינו בשימוש או להסיר אותו בקלות:
הנחיות ספציפיות למקבץ
Angular
אם אתם משתמשים ב-Angular CLI, יש לכלול מפות מקור ב-build של סביבת הייצור כדי לבדוק את החבילות.
Drupal
כדאי לשקול הסרה של נכסי JavaScript שאינם בשימוש, ולצרף לדף הרלוונטי או לרכיב בדף רק את ספריות ה-Drupal הנדרשות. פרטים נוספים זמינים במאמר הגדרת ספרייה.
ג'ומלה
כדאי לשקול לצמצם את המספר של תוספי Joomla שטוענים תוכן JavaScript שאינו בשימוש בדף שלכם.
Magento
משביתים את יצירת חבילות JavaScript המובנית ב-Magento.
React
אם לא מתבצע רינדור בצד השרת, צריך לפצל את חבילות JavaScript עם React.lazy().
אחרת, צריך לפצל את הקוד באמצעות ספרייה של צד שלישי כמו רכיבים שניתן לטעון.
Vue
אם אתם לא מעבדים רינדור בצד השרת ואתם משתמשים בנתב Vue, צריך לפצל את החבילות לפי מסלולי טעינה מדורגת.
WordPress
כדאי לצמצם את מספר יישומי הפלאגין של WordPress שטוענים תוכן JavaScript בלתי נחוץ בדף, או להשבית אותם.