הסרת קוד שלא נמצא בשימוש

Houssein Djirdeh

מרשמים כמו npm שינו לטובה את עולם ה-JavaScript, בכך שהם אפשרו לכל אחד להוריד ולהשתמש ביותר מחצי מיליון חבילות ציבוריות. אבל הרבה פעמים אנחנו כוללים ספריות שאנחנו לא משתמשים בהן באופן מלא. כדי לפתור את הבעיה, צריך לנתח את החבילה כדי לזהות קוד שלא נמצא בשימוש, ולהסיר ספריות לא בשימוש ומיותרות.

ההשפעה על מדדי הליבה לבדיקת חוויית המשתמש באתר

כשמסירים קוד שלא נמצא בשימוש, אפשר לשפר את מדדי הליבה לבדיקת חוויית המשתמש באתר. לדוגמה, קוד שלא נמצא בשימוש יכול להשפיע על המהירות שבה נטען רכיב התוכן הכי גדול (LCP) כשנכסים גדולים שלא לצורך מתחרים על רוחב פס עם משאבים אחרים. הדבר עלול להשפיע גם על LCP אם נכסי JavaScript גדולים שמשמשים לעיבוד תגי עיצוב רק אצל הלקוח מכילים הפניות למועמדים של LCP, על ידי עיכוב בטעינת המשאבים האלה.

קוד שלא נמצא בשימוש יכול להשפיע גם על Interaction to Next Paint (INP), כי צריך להוריד, לנתח, להדר, ואז להפעיל, גם JavaScript שלא נמצא בשימוש. קוד שלא בשימוש עלול לגרום לעיכובים מיותרים בזמן טעינת המשאבים, בשימוש בזיכרון ובפעילות של ה-thread הראשי, שגורמים למהירות תגובה נמוכה בדף.

במדריך הזה נסביר איך לנתח את קוד ה-codebase של הפרויקט כדי לאתר קוד שלא נמצא בשימוש, ונציע אסטרטגיות לגיזום קוד שלא נמצא בשימוש מנכסי JavaScript שאתם שולחים למשתמשים בסביבת הייצור.

ניתוח החבילה

בכלי הפיתוח אפשר לראות את הגודל של כל בקשות הרשת:

1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
2. לוחצים על הכרטיסייה Network.
3. מסמנים את התיבה Disable cache (השבתת המטמון).
4. לטעון מחדש את הדף.

כלי פיתוח שמציגים את הגודל של קובץ JavaScript.

בכרטיסייה כיסוי בכלי הפיתוח מופיע גם מידע על כמות הקוד של CSS ו-JS שלא בשימוש באפליקציה.

הכרטיסייה 'כיסוי'.

אם מציינים תצורה מלאה של Lighthouse דרך ה-CLI של Node, אפשר להריץ ביקורת לצמצום של מקרים שבהם לא נעשה שימוש ב-JavaScript כדי לבדוק כמה קוד שלא נמצא בשימוש נשלח עם האפליקציה/

צמצום דוח JavaScript שלא נמצא בשימוש

אם אתם משתמשים ב-webpack כ-bundler, תוכלו להיעזר בכלי לניתוח חבילות Webpack כדי לבדוק מה כלול בחבילה. כוללים את הפלאגין בקובץ ההגדרות של חבילת ה-webpack כמו כל פלאגין אחר:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

בדרך כלל משתמשים ב-webpack כדי ליצור אפליקציות עם דף יחיד, אבל בחבילות אחרות, כמו Parcel ו-Rollup, יש גם כלים להצגה חזותית שבהם תוכלו להשתמש כדי לנתח את החבילה.

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

תצוגת מפת העצים של Webpack Bundle Analyzer.

התצוגה החזותית הזו ממחישה אילו חלקים בחבילה גדולים יותר מחלקים אחרים, וכך מאפשרת לכם להבין טוב יותר את המספר והגודל של הספריות שהאפליקציה מייבאת. כך תוכלו לזהות אם אתם משתמשים בספריות לא נחוצות או לא נחוצות.

הסרת ספריות שלא בשימוש

בתמונה הקודמת של מפת העצים, יש לא מעט חבילות בדומיין @firebase אחד. אם האתר שלכם צריך רק את רכיב מסד הנתונים של firebase, צריך לעדכן את הקבצים המיובאים כדי לאחזר את הספרייה הזו:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

הערה: התהליך הזה הרבה יותר מורכב באפליקציות גדולות.

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

אם אתם משתמשים ב-Webpack, כדאי לעיין ברשימת יישומי הפלאגין שמסירים באופן אוטומטי קוד שלא נמצא בשימוש מספריות פופולריות.

אני רוצה לנסות: הסרת קוד שלא נמצא בשימוש.

צריך להסיר ספריות מיותרות

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