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

Houssein Djirdeh

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

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

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

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

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

ניתוח החבילה

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

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

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

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

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

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

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

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

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

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

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

תצוגת מפת העץ של כלי הניתוח של חבילות Webpack.

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

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

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

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

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

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

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

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

מסירים ספריות לא נחוצות

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