הפחתת מטענים ייעודיים (payloads) של JavaScript באמצעות פיצול קוד

Houssein Djirdeh
Jeremy Wagner

אף אחד לא אוהב לחכות. יותר מ-50% מהמשתמשים נוטשים אתר אם הטעינה שלו נמשכת יותר מ-3 שניות.

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

למה פיצול קוד מועיל?

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

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

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

מדידה

אם נדרש זמן רב לביצוע כל ה-JavaScript בדף, Lighthouse מציג ביקורת שנכשלה.

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

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

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

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

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

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

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

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

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