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

Houssein Djirdeh

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

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

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

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

זיהוי הדפדפנים שאליהם ברצונך למקד

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

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

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

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

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

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

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

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

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

  "targets": "last 2 versions"

הערך של "last 2 versions" מעביר את הקוד שלכם לשתי הגרסאות האחרונות של כל דפדפן. המשמעות היא שיש תמיכה בדפדפנים שהוצאו משימוש, כמו 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, אתם יכולים להגדיר יעדים שונים בהגדרות לשתי גרסאות נפרדות של האפליקציה:

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

הודות לקונור קלארק וג'ייסון מילר על הביקורות שלהם.