تطوير المنظومة المتكاملة لإطار عمل الويب

تعاون Chrome مع أُطر العمل المفتوحة المصدر للعمل على تحسين الويب

Houssein Djirdeh

يساهم Chrome بنشاط في نظام أُطر عمل الويب، ويتناول حديثنا في قمّة مطوّري Chrome لعام 2019 ما عملنا عليه في العام الماضي.

يمكنك الاطّلاع أدناه على ملخّص موسّع للحديث يتضمّن تفاصيل ومراجع إضافية.

كيف يمكننا تحسين الويب؟

هدف كل فرد في فريق Chrome هو تحسين الويب. نعمل على تحسين واجهات برمجة التطبيقات للمتصفّح وV8، وهو محرّك JavaScript وWebAssembly الأساسي الذي يشغّل Chrome، لكي يتمكّن المطوّرون من استخدام ميزات تساعدهم في إنشاء صفحات ويب رائعة. نحاول أيضًا تحسين المواقع الإلكترونية التي يتم إنتاجها حاليًا من خلال المساهمة في أدوات مفتوحة المصدر بعدة طرق.

يعتمد معظم مطوّري الويب على الأدوات المفتوحة المصدر كلما أمكنهم ذلك، ويفضّلون عدم إنشاء بنية أساسية مخصّصة بالكامل. تشكّل أُطر عمل JavaScript من جهة العميل ومكتبات واجهة المستخدم جزءًا متزايدًا من استخدام البرامج المفتوحة المصدر. توضّح البيانات المتعلقة بأكثر ثلاثة أُطر عمل ومكتبات من جهة العميل شيوعًا، وهي React وAngular وVue، ما يلي:

• يستخدم% 72 من المشاركين في الاستطلاع السنوي الأول لمطوّري الويب والمصمّمين الذي أجرته MDN واحدًا على الأقل من أُطر العمل والمكتبات هذه.
• تستخدم أكثر من 320,000 موقع إلكتروني في أفضل 5 ملايين عنوان URL تم تحليلها بواسطة HTTP Archive واحدًا على الأقل من أُطر العمل والمكتبات هذه.
• عند تجميع عناوين URL حسب الوقت الذي تم قضاؤه، تستخدم 30 من أفضل 100 عنوان URL واحدًا على الأقل من أُطر العمل والمكتبات هذه. (تم إجراء البحث على بيانات داخلية.)

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

المساهمات في أُطر عمل الويب

تندرج أُطر العمل الشائعة الاستخدام لإنشاء صفحات الويب وتنظيمها ضمن فئتَين:

• أُطر عمل واجهة المستخدم (أو المكتبات)، مثل Preact أو React أو Vue، التي توفّر التحكّم في طبقة العرض لتطبيق (من خلال نموذج مكوّن على سبيل المثال).
• أُطر عمل الويب، مثل Next.js وNuxt.js وGatsby، التي توفّر نظامًا شاملاً يتضمّن ميزات مدمجة ومحدّدة، مثل العرض من جهة الخادم. تستفيد أُطر العمل هذه عادةً من إطار عمل واجهة مستخدم أو مكتبة لطبقة العرض.

يمكن للمطوّرين اختيار عدم استخدام أُطر العمل، ولكن من خلال تجميع مكتبة طبقة عرض وجهاز توجيه ونظام تنسيق وعارض من جهة الخادم وما إلى ذلك، غالبًا ما ينتهي بهم الأمر بإنشاء نوع إطار عمل خاص بهم. على الرغم من أنّ أُطر عمل الويب محدّدة، فإنّها تعالج العديد من هذه المشاكل تلقائيًا.

يسلّط الجزء المتبقي من هذا المنشور الضوء على العديد من التحسينات التي تم إدخالها مؤخرًا في أُطر عمل وأدوات مختلفة، بما في ذلك المساهمات من فريق Chrome.

Angular

أطلق فريق Angular عددًا من التحسينات على الإصدار 8 من إطار العمل:

• التحميل التفاضلي تلقائيًا لتقليل عدد ملفات polyfill غير الضرورية للمتصفّحات الأحدث

• إتاحة استخدام بنية الاستيراد الديناميكي العادية لمسارات التحميل الكسول
• إتاحة استخدام عاملي الويب لتشغيل العمليات في سلسلة تعليمات في الخلفية منفصلة عن سلسلة التعليمات الرئيسية
• Ivy، وهو محرّك العرض الجديد من Angular الذي يوفّر أداء أفضل لإعادة التجميع ويقلّل أحجام الحزم، يتوفّر في وضع المعاينة للمشاريع الحالية.

يمكنك الاطّلاع على مزيد من المعلومات عن هذه التحسينات في "الإصدار 8 من Angular" ، ويتطلّع فريق Chrome إلى العمل معه عن كثب في العام المقبل مع إطلاق المزيد من الميزات.

Next.js

Next.js هو إطار عمل ويب يستخدم React كطبقة عرض. بالإضافة إلى نموذج مكوّن واجهة مستخدم يتوقّعه العديد من المطوّرين من إطار عمل من جهة العميل، يوفّر Next.js عددًا من الميزات التلقائية المضمّنة:

• التوجيه مع تقسيم الرموز تلقائيًا
• التجميع والتحزيم (باستخدام Babel و webpack)
• العرض من جهة الخادم
• آليات لجلب البيانات على مستوى كل صفحة
• التنسيق المغلَّف (باستخدام styled-jsx)

يُحسِّن Next.js أحجام الحزم لتقليلها، وساعد فريق Chrome في تحديد المجالات التي يمكننا فيها المساعدة في تحسين الأداء بشكل أكبر. يمكنك الاطّلاع على مزيد من المعلومات عن كل منها من خلال عرض طلبات التعليقات (RFC) وطلبات السحب (PR):

1. استراتيجية محسّنة لتقسيم حزم webpack تُنشئ حزمًا أكثر دقة، ما يقلّل من مقدار الرمز المكرّر الذي يتم جلبه من خلال مسارات متعددة (RFC، PR)
2. التحميل التفاضلي باستخدام نمط module/nomodule الذي يمكن أن يقلّل من إجمالي مقدار JavaScript في تطبيقات Next.js بنسبة تصل إلى% 20 بدون استخدام رمز (RFC و PR)
3. تتبُّع محسّن لمقياس الأداء يستخدم User Timing API (PR)

نستكشف أيضًا ميزات أخرى لتحسين تجربة المستخدم والمطوّر في استخدام Next.js، مثل:

• تفعيل الوضع المتزامن لإتاحة الترطيب التدريجي أو الجزئي للمكوّنات
• نظام مطابقة يستند إلى webpack يحلّل جميع ملفات المصدر والمواد العرضية التي تم إنشاؤها لـ عرض أخطاء وتحذيرات أفضل (RFC)

Nuxt.js

Nuxt.js هو إطار عمل ويب يجمع بين Vue.js ومكتبات مختلفة لـ توفير إعداد محدّد. على غرار Next.js، يتضمّن العديد من الميزات الجاهزة للاستخدام:

• التوجيه مع تقسيم الرموز تلقائيًا
• التجميع والتحزيم (باستخدام Babel و webpack)
• العرض من جهة الخادم
• جلب البيانات غير المتزامن لكل صفحة
• مخزن البيانات التلقائي (Vuex)

بالإضافة إلى العمل مباشرةً على تحسين أداء الأدوات المختلفة، وسّعنا نطاق الـ framework fund لتقديم دعم مالي لمزيد من الـ frameworks and libraries المفتوحة المصدر. من خلال دعمنا الأخير لـ Nuxt.js، من المقرر إطلاق بعض الميزات في المستقبل القريب، بما في ذلك العرض من جهة الخادم المحسّن وتحسينات الصور.

Babel

أحرزنا أيضًا تقدمًا في تحسين أداء أداة أساسية مهمة في جميع أُطر العمل المذكورة تقريبًا، وهي Babel.

يُجمّع Babel الرمز الذي يحتوي على بنية أحدث في رمز يمكن للمتصفّحات المختلفة فهمه. أصبح من الشائع استخدام @babel/preset-env لاستهداف المتصفّحات الحديثة حيث يمكن تحديد أهداف مختلفة للمتصفّح لتوفير ما يكفي من ملفات polyfill المطلوبة لجميع البيئات المختارة. إحدى طرق تحديد الأهداف هي استخدام <script type="module"> لاستهداف جميع المتصفّحات التي تتوافق مع وحدات ES.

لتحسين هذه الحالة، أطلقنا إعدادًا مسبقًا جديدًا تمامًا، وهو ‎ @babel/preset-modules. بدلاً من تحويل البنية الحديثة إلى بنية أقدم لتجنُّب أخطاء المتصفّح، يُصلِح preset-modules كل خطأ محدّد من خلال التحويل إلى أقرب بنية حديثة غير معطّلة ممكنة. يؤدي ذلك إلى إنشاء رمز حديث يمكن تسليمه بدون تعديل تقريبًا إلى معظم المتصفّحات.

سيستفيد المطوّرون الذين يستخدمون preset-env حاليًا من عمليات التحسين هذه بدون الحاجة إلى اتخاذ أي إجراء، لأنّه سيتم دمجها قريبًا في preset-env أيضًا.

ما هي الخطوات التالية؟

يساعد العمل عن كثب مع أُطر العمل والمكتبات المفتوحة المصدر لتوفير تجارب أفضل فريق Chrome في تحديد ما يهم المستخدمين والمطوّرين على حد سواء بشكل أساسي.

إذا كنت تعمل على إطار عمل ويب أو مكتبة واجهة مستخدم أو أي شكل من أشكال أدوات الويب (مجمِّع أو برنامج تجميع أو برنامج تدقيق)، يمكنك التقديم إلى صندوق إطار العمل.