عرض الرمز الحديث في المتصفِّحات الحديثة لتحميل الصفحات بشكلٍ أسرع

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 لتضمين عمليات التحويل ورموز 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 ميزات متعددة لبنية 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 المتصفّحات التي لا تدعم الوحدات تفعل عكس ذلك.

إذا كنت تستخدم حزمة ويب، يمكنك ضبط استهدافات مختلفة في إعداداتك لموقعَين لإصدارات منفصلة من التطبيق:

• إصدار مخصّص للمتصفّحات التي تتوافق مع الوحدات فقط.
• إصدار يتضمن نصًا برمجيًا مجمّعًا يعمل في أي متصفح قديم. هذا الملف ذو حجم أكبر، إذ تحتاج خدمة الترجمة إلى دعم مجموعة أكبر من المتصفحات.

وشكرًا لـ "كونور كلارك" و"جايسون ميلر" على مراجعاتهما.