کدهای مدرن را به مرورگرهای مدرن برای بارگذاری سریعتر صفحه ارائه دهید

حسین جرده

ساختن وب‌سایت‌هایی که به خوبی روی همه مرورگرهای اصلی کار می‌کنند، اصل اصلی یک اکوسیستم وب باز است. با این حال، این به معنای کار اضافی برای اطمینان از اینکه همه کدهایی که می نویسید در هر مرورگری که قصد هدف گذاری دارید پشتیبانی می شود. اگر می‌خواهید از ویژگی‌های زبان جاوا اسکریپت جدید استفاده کنید، باید این ویژگی‌ها را به قالب‌های سازگار با عقب برای مرورگرهایی که هنوز از آنها پشتیبانی نمی‌کنند، تبدیل کنید.

Babel پرکاربردترین ابزار برای کامپایل کد است که حاوی دستورات جدیدتر به کدهایی است که مرورگرها و محیط های مختلف (مانند Node) می توانند آن را درک کنند. این راهنما فرض می‌کند که از Babel استفاده می‌کنید، بنابراین باید دستورالعمل‌های راه‌اندازی را دنبال کنید تا اگر قبلاً این کار را نکرده‌اید، آن را در برنامه خود قرار دهید. اگر از بسته webpack به عنوان بسته‌کننده ماژول در برنامه خود استفاده می‌کنید، بسته وب را در Build Systems انتخاب کنید.

برای استفاده از Babel فقط برای انتقال آنچه برای کاربران شما نیاز است، باید:

  1. مرورگرهایی را که می خواهید هدف قرار دهید مشخص کنید.
  2. از @babel/preset-env با اهداف مرورگر مناسب استفاده کنید.
  3. از <script type="module"> برای متوقف کردن ارسال کد ترجمه شده به مرورگرهایی که به آن نیاز ندارند، استفاده کنید.

مرورگرهایی را که می خواهید هدف قرار دهید مشخص کنید

قبل از اینکه شروع به تغییر نحوه انتقال کد در برنامه خود کنید، باید شناسایی کنید که کدام مرورگرها به برنامه شما دسترسی دارند. مرورگرهایی را که کاربران شما در حال حاضر از آنها استفاده می کنند و همچنین مرورگرهایی که قصد دارید برای تصمیم گیری آگاهانه هدف قرار دهید را تجزیه و تحلیل کنید.

از @babel/preset-env استفاده کنید

انتقال کد معمولاً منجر به فایلی می شود که از نظر اندازه فایل بزرگتر از فرم های اصلی است. با به حداقل رساندن حجم کامپایل‌هایی که انجام می‌دهید، می‌توانید اندازه بسته‌های خود را برای بهبود عملکرد یک صفحه وب کاهش دهید.

به جای افزودن افزونه‌های خاص برای کامپایل انتخابی ویژگی‌های زبان خاصی که استفاده می‌کنید، Babel تعدادی از پیش‌تنظیمات را ارائه می‌کند که افزونه‌ها را با هم جمع می‌کند. از babel/preset-env@ استفاده کنید تا فقط تبدیل‌ها و polyfill‌های مورد نیاز برای مرورگرهایی را که برای هدف‌گیری برنامه‌ریزی کرده‌اید، شامل شود.

@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 چندین ویژگی نحوی جاوا اسکریپت را در مجموعه ها گروه بندی می کند و آنها را بر اساس مرورگرهای هدف مشخص شده فعال/غیرفعال می کند. اگرچه این به خوبی کار می کند، اما وقتی یک مرورگر هدفمند دارای یک اشکال با تنها یک ویژگی باشد، کل مجموعه ای از ویژگی های نحوی تغییر می کند. این اغلب منجر به تبدیل کدهای بیشتر از آنچه لازم است می شود.

گزینه رفع اشکال در @babel/preset-env که در ابتدا به عنوان یک پیش تنظیم جداگانه توسعه یافته بود، این مشکل را با تبدیل نحو مدرنی که در برخی مرورگرها شکسته شده است به نزدیکترین نحو معادل که در آن مرورگرها شکسته نشده است، حل می کند. نتیجه تقریباً یک کد مدرن با چند ترفند کوچک نحوی است که سازگاری را در همه مرورگرهای هدف تضمین می کند. برای استفاده از این بهینه سازی، مطمئن شوید که @babel/preset-env 7.10 یا جدیدتر را نصب کرده اید، سپس ویژگی bugfixes را روی true تنظیم کنید:

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

در Babel 8، گزینه bugfixes به طور پیش فرض فعال خواهد بود.

از <script type="module"> استفاده کنید

ماژول‌های جاوا اسکریپت یا ماژول‌های ES یک ویژگی نسبتاً جدید هستند که در همه مرورگرهای اصلی پشتیبانی می‌شوند. می‌توانید از ماژول‌ها برای ایجاد اسکریپت‌هایی استفاده کنید که می‌توانند از ماژول‌های دیگر وارد و صادر کنند، اما همچنین می‌توانید از آنها با @babel/preset-env استفاده کنید تا فقط مرورگرهایی را هدف قرار دهید که از آنها پشتیبانی می‌کنند.

به جای پرس و جو برای نسخه های خاص مرورگر یا سهم بازار، تعیین "esmodules" : true در قسمت targets فایل .babelrc خود در نظر بگیرید.

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

بسیاری از ویژگی‌های جدیدتر ECMAScript که با Babel کامپایل شده‌اند، قبلاً در محیط‌هایی پشتیبانی می‌شوند که از ماژول‌های جاوا اسکریپت پشتیبانی می‌کنند. بنابراین با انجام این کار، فرآیند اطمینان از اینکه فقط کدهای ترجمه شده برای مرورگرهایی که واقعاً به آن نیاز دارند استفاده می شود را ساده می کنید.

مرورگرهایی که از ماژول‌ها پشتیبانی می‌کنند، اسکریپت‌های دارای ویژگی nomodule نادیده می‌گیرند. برعکس، مرورگرهایی که از ماژول ها پشتیبانی نمی کنند، عناصر اسکریپت با type="module" را نادیده می گیرند. این بدان معنی است که شما می توانید یک ماژول و همچنین یک بازگشت کامپایل شده را اضافه کنید.

در حالت ایده‌آل، دو نسخه اسکریپت یک برنامه کاربردی مانند زیر گنجانده می‌شوند:

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

مرورگرهایی که از ماژول ها پشتیبانی می کنند main.mjs واکشی و اجرا می کنند و compiled.js نادیده می گیرند. مرورگرهایی که از ماژول ها پشتیبانی نمی کنند برعکس عمل می کنند.

اگر از وب پک استفاده می کنید، می توانید اهداف مختلفی را در پیکربندی های خود برای دو نسخه مجزا از برنامه خود تنظیم کنید:

  • نسخه ای فقط برای مرورگرهایی که از ماژول ها پشتیبانی می کنند.
  • نسخه ای که شامل یک اسکریپت کامپایل شده است که در هر مرورگر قدیمی کار می کند. این حجم فایل بزرگ‌تری دارد، زیرا ترجمه باید از طیف وسیع‌تری از مرورگرها پشتیبانی کند.

با تشکر از کانر کلارک و جیسون میلر برای نقدهایشان.