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

Houssein Djirdeh

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

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

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

משתמשים בשדה 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 פותרת את הבעיה על ידי המרת תחביר מודרני מנותק בדפדפנים מסוימים או בתחביר מקביל שאינו שבור בדפדפנים אלה. התוצאה היא קוד מודרני כמעט זהה באמצעות כמה שינויים קלים בתחביר שמבטיחים תאימות לכל דפדפני היעד. כדי להשתמש ב חשוב לוודא שבמכשיר מותקנת גרסה 7.10 ואילך של @babel/preset-env ואז להגדיר את נכס 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, אפשר להגדיר יעדים שונים בהגדרות האישיות גרסאות נפרדות של האפליקציה:

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

תודה לקונור קלרק וג'ייסון מילר (Jason Miller).