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

Houssein Djirdeh

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

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

כדי להשתמש ב-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
            }
         }
      ]
   ]
}

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

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

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

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

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

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

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

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