הצגת קוד מודרני בדפדפנים מודרניים לטעינת דפים מהירה יותר

Houssein Djirdeh

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

Babel הוא הכלי הנפוץ ביותר לעיבוד קוד שמכיל תחביר חדש יותר לקוד שדפדפנים וסביבות שונות (כמו Node) יכולים להבין. במדריך הזה אנו מניחים שאתם משתמשים ב-Babel, לכן אם עדיין לא עשיתם זאת, עליכם לפעול לפי הוראות ההגדרה כדי לכלול אותו באפליקציה. בוחרים באפשרות webpack ב-Build Systems אם משתמשים ב-webpack ככלי לאריזת מודולים באפליקציה.

הערה: עובדה מעניינת: Lebab היא ספרייה נפרדת שמבצעת את ההפך ממה ש-Babel עושה. הוא ממיר קוד ישן לתחביר חדש.

כדי להשתמש ב-Babel כדי להמיר רק את מה שדרוש למשתמשים, צריך:

1. מזהים את הדפדפנים שרוצים לטרגט.
2. משתמשים ב-@babel/preset-env עם מטרות דפדפן מתאימות.
3. אפשר להשתמש ב-<script type="module"> כדי להפסיק לשלוח קוד שעבר טרנספיילציה לדפדפנים שלא צריכים אותו.

איך מזהים את הדפדפנים שרוצים לטרגט

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

שימוש ב-‎ @babel/preset-env

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

במקום לכלול יישומי פלאגין ספציפיים כדי לקמפל באופן סלקטיבי תכונות שפה מסוימות שבהן אתם משתמשים, Babel מספק מספר הגדרות מוגדרות מראש שמקבצות יחד יישומי פלאגין. משתמשים ב-@babel/preset-env כדי לכלול רק את הטרנספורמציות והפוליפולים הנדרשים לדפדפנים שאתם מתכננים לטרגט.

מוסיפים את @babel/preset-env למערך presets בקובץ התצורה של Babel, .babelrc:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

כדי לציין אילו גרסאות דפדפן רוצים לכלול, מוסיפים שאילתת מתאימה לשדה browsers באמצעות השדה targets. @babel/preset-env משתלב עם browserslist, הגדרה בקוד פתוח ששותפה בין כלים שונים לטירגוט דפדפנים. רשימה מלאה של שאילתות תואמות מופיעה במסמכי העזרה של browserslist. אפשרות אחרת היא להשתמש בקובץ .browserslistrc כדי לרשום את הסביבות שאליהן רוצים לטרגט.

הערך ">0.25%" מורה ל-Babel לכלול רק את הטרנספורמציות הנדרשות כדי לתמוך בדפדפנים שמהווים יותר מ-0.25% מהשימוש הגלובלי. כך תוכלו לוודא שהחבילה לא מכילה קוד מומר מיותר לדפדפנים שבהם משתמשים אחוז קטן מאוד מהמשתמשים.

ברוב המקרים, זו גישה טובה יותר מאשר להשתמש בהגדרה הבאה:

  "targets": "last 2 versions"

הערך "last 2 versions" מבצע תרגום מקוד מדור קודם (transpile) של הקוד שלכם לשתי הגרסאות האחרונות של כל דפדפן, כלומר יש תמיכה בדפדפנים שהוצאו משימוש, כמו Internet Explorer. אם לא צפוי שייעשה שימוש בדפדפנים האלה כדי לגשת לאפליקציה, הדבר עלול להגדיל את גודל החבילה ללא צורך.

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

הפעלת תיקוני באגים מודרניים

@babel/preset-env מקבצת כמה תכונות של תחביר JavaScript לאוספים ומפעילה או משביתה אותן בהתאם לדפדפני היעד שצוינו. השיטה הזו פועלת היטב, אבל אם בדפדפן המטורגט יש באג שמכיל רק תכונה אחת, כל האוסף של תכונות התחביר משתנה. לרוב, התוצאה היא קוד עבר יותר טרנספורמציות ממה שנחוץ.

האפשרות של תיקוני באגים ב-@babel/preset-env, שפותחה במקור כהגדרה מוגדרת מראש נפרדת, פותרת את הבעיה הזו על ידי המרת תחביר מודרני שפגום בדפדפנים מסוימים לתחביר מקביל הקרוב ביותר שלא פגום בדפדפנים האלה. התוצאה היא קוד מודרני כמעט זהה, עם כמה שינויים קטנים בתחביר שמבטיחים תאימות בכל דפדפני היעד. כדי להשתמש באופטימיזציה הזו, צריך לוודא ש-@babel/preset-env מותקן בגרסה 7.10 ואילך, ולאחר מכן להגדיר את המאפיין bugfixes לערך true:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

ב-Babel 8, האפשרות bugfixes תופעל כברירת מחדל.

שימוש ב-<script type="module">

מודולים של JavaScript, או מודולים של ES, הם תכונה חדשה יחסית שנתמכת בכל הדפדפנים העיקריים. אפשר להשתמש במודולים כדי ליצור סקריפטים שיכולים לייבא ולייצא ממודולים אחרים, אבל אפשר גם להשתמש בהם עם @babel/preset-env כדי לטרגט רק דפדפנים שתומכים בהם.

במקום לשלוח שאילתות לגבי גרסאות ספציפיות של דפדפנים או נתח שוק, כדאי לציין את הערך "esmodules" : true בשדה targets בקובץ .babelrc.

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

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

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

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

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

בדפדפנים שתומכים במודולים, מתבצע אחזור והפעלה של main.mjs והתעלמות מ-compiled.js. בדפדפנים שלא תומכים במודולים, ההתנהגות היא הפוכה.

הערה: סקריפטים של מודולים מושהים כברירת מחדל. המאפיין defer מתווסף לסקריפט nomodule לאותו התנהגות.

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

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

הערה: הגישה הזו ל-HTML יכולה לספק יתרונות בביצועים, אבל נמצא שדפדפנים מסוימים מבצעים אחזור כפול כשמציינים סקריפטים של module ושל nomodule. הסבר מפורט יותר על הנושא הזה זמין במאמר טעינה מודרנית של סקריפטים של Jason Miller, שבו מפורטות כמה אפשרויות לעקיפת הבעיה.

תודה ל-Connor Clark ול-Jason Miller על הביקורות שלהם.