כיסוי: איתור JavaScript ו-CSS שאינם בשימוש

קייס בסקית
קייס בסקית

בכרטיסייה 'כיסוי' בכלי הפיתוח ל-Chrome אפשר למצוא קוד CSS ו-JavaScript שאינם בשימוש. הסרת קוד שלא נמצא בשימוש יכולה לזרז את טעינת הדף ולחסוך בנתונים הסלולריים של המשתמשים בנייד.

ניתוח כיסוי הקוד.
איור 1. ניתוח כיסוי הקוד.

סקירה כללית

משלוח של רכיבי JavaScript או CSS שאינם בשימוש הוא בעיה נפוצה בפיתוח אתרים. לדוגמה, נניח שאתם רוצים להשתמש ברכיב הלחצן של Bootstrap בדף. כדי להשתמש ברכיב הלחצן, עליך להוסיף קישור לגיליון הסגנונות של Bootstrap ב-HTML, באופן הבא:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

גיליון סגנונות זה לא כולל רק את הקוד של רכיב הלחצן. היא מכילה את ה-CSS עבור כל הרכיבים של Bootstrap. אבל אינך משתמש באף אחד מהרכיבים האחרים של Bootstrap. כך שהדף שלכם מוריד כמות גדולה של שירותי CSS שהוא לא צריך. שירות ה-CSS הנוסף הזה מהווה בעיה מהסיבות הבאות:

  • הקוד הנוסף מאט את טעינת הדף שלך. למידע נוסף, ראו CSS לחסימת עיבוד.
  • אם משתמש ניגש לדף ממכשיר נייד, הקוד הנוסף מנצל את חבילת הגלישה שלו.

פתיחת הכרטיסייה 'כיסוי'

  1. פותחים את תפריט הפקודות.
  2. מתחילים להקליד coverage, בוחרים בפקודה Show Coverage ומקישים על Enter כדי להריץ את הפקודה. הכרטיסייה Coverage נפתחת בחלונית ההזזה.
הכרטיסייה &#39;כיסוי&#39;.
איור 2. הכרטיסייה דפים הנכללים באינדקס.

תיעוד הכיסוי של הקוד

  1. לוחצים על אחד מהלחצנים הבאים בכרטיסייה דפים הנכללים באינדקס:
    • לחצו על הפעלת כיסוי וטעינה מחדש של הדף טעינה מחדש אם רוצים לראות איזה קוד נדרש לטעינת הדף.
    • לוחצים על כיסוי הכלים הקלטה אם רוצים לראות באיזה קוד נעשה שימוש לאחר אינטראקציה עם הדף.
  2. לוחצים על הפסקת האינסטרומנטציה של הכיסוי והצגת התוצאות עצירה כשרוצים להפסיק את הקלטת הקוד.

ניתוח כיסוי הקוד

הטבלה בכרטיסייה Coverage מציגה את המשאבים שנותחו ואת כמות הקוד שנעשה בה שימוש בכל משאב. אפשר ללחוץ על שורה כדי לפתוח את המשאב בחלונית Sources ולהציג פירוט של הקוד שנעשה בו שימוש ושל קוד שלא השתמשתם בו. שורות קוד שלא נעשה בהן שימוש יופיעו בתחילתן שורה אדומה.

דוח כיסוי קוד.
איור 3. דוח כיסוי קוד.
  • בעמודה כתובת URL מצוינת כתובת ה-URL של המשאב שנותח.
  • בעמודה Type כתוב אם המשאב מכיל CSS, JavaScript או את שניהם.
  • בעמודה סה"כ בייטים מוצג הגודל הכולל של המשאב בבייטים.
  • בעמודה בייטים בשימוש מצוין מספר הבייטים שלא נעשה בהם שימוש.
  • העמודה האחרונה ללא שם היא תצוגה חזותית של העמודות Total Bytes ו-Unused Bytes. בקטע האדום של העמודה יש בייטים שאינם בשימוש. בקטע הירוק נעשה שימוש בבייטים.