اطّلِع على مزيد من المعلومات عن ميزة "التحميل المُسبَق التوقّعي" وكيفية تنفيذها في Guess.js.
في جلسة التنقّل على الويب بشكل أسرع باستخدام ميزة "التحميل المُسبَق التوقّعي" التي قدّمتها في مؤتمر Google I/O لعام 2019، بدأت بالحديث عن تحسين تطبيقات الويب من خلال تقسيم الرموز البرمجية والآثار المحتملة للأداء على التنقّل اللاحق في الصفحات. في الجزء الثاني من المحادثة، ناقشت كيفية تحسين سرعة التنقّل باستخدام Guess.js لإعداد ميزة "التحميل المُسبَق التوقّعي":
تقسيم الرموز البرمجية لتشغيل تطبيقات الويب بشكل أسرع
تطبيقات الويب بطيئة، ولغة JavaScript هي من بين أغلى الموارد التي يمكنك شحنها. يمكن أن يؤدي انتظار بطء تحميل تطبيق الويب إلى شعور المستخدمين بالاستياء وتقليل الإحالات الناجحة.
إنّ "التحميل البطيء" هو أسلوب فعّال لتقليل وحدات البايت من JavaScript التي يتم نقلها عبر الإنترنت. يمكنك استخدام عدة أساليب لتحميل JavaScript بشكل كسول، بما في ذلك:
- تقسيم الرمز على مستوى المكوّن
- تقسيم الرموز على مستوى المسار
من خلال تقسيم الرمز على مستوى المكون، يمكنك نقل المكونات الفردية إلى مقاطع JavaScript منفصلة. في أحداث معيّنة، يمكنك تحميل النصوص البرمجية ذات الصلة وعرض المكوّنات.
ومع ذلك، باستخدام ميزة "تقسيم الرموز على مستوى المسار"، يمكنك نقل المسارات بأكملها إلى أجزاء مستقلة. عندما ينتقل المستخدمون من مسار إلى آخر، عليهم تنزيل ملف JavaScript المرتبط وتشغيل الصفحة المطلوبة. ويمكن أن تؤدي هذه العمليات إلى تأخيرات كبيرة، خاصةً على الشبكات البطيئة.
جلب JavaScript مسبقًا
يسمح الجلب المُسبَق للمتصفح بتنزيل الموارد التي من المحتمل أن يحتاجها المستخدم قريبًا وتخزينها مؤقتًا. الطريقة المعتادة هي استخدام <link rel="prefetch">، ولكن هناك خطأان شائعان:
- يؤدي الجلب المسبق لعدد كبير جدًا من الموارد (الجلب الزائد) إلى استهلاك الكثير من البيانات.
- قد لا يتم مطلقًا جلب بعض الموارد التي يحتاجها المستخدم مسبقًا.
ويحلّ التحميل المُسبَق التوقّعي هذه المشاكل باستخدام تقرير عن أنماط تنقّل المستخدِمين لتحديد مواد العرض التي يجب تحميلها مسبقًا.
الترجيع التوقّعي باستخدام Guess.js
Guess.js هي مكتبة JavaScript توفّر وظيفة التخزين المُسبَق التوقّعي. يستخدِم Guess.js تقريرًا من "إحصاءات Google" أو مقدّم خدمة إحصاءات آخر لإنشاء نموذج توقّعي يمكن استخدامه لتحميل ما يُرجّح أن يحتاجه المستخدِم فقط بشكل مُسبَق وبشكل ذكي.
تتيح Guess.js عمليات دمج مع Angular وNext.js وNuxt.js وGatsby. لاستخدامه في تطبيقك، أضِف هذه السطور إلى إعدادات webpack لتحديد معرّف عرض "إحصاءات Google":
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
إذا لم تكن تستخدم "إحصاءات Google"، يمكنك تحديد reportProvider وتنزيل البيانات من خدمتك المفضّلة.
الدمج مع إطارات العمل
لمعرفة المزيد حول كيفية دمج Guess.js مع إطار العمل المفضل لديك، اطلع على هذه الموارد:
للاطّلاع على جولة تفصيلية سريعة حول الدمج مع Angular، يمكنك مشاهدة هذا الفيديو:
كيف يعمل Guess.js؟
في ما يلي كيفية تنفيذ Guess.js لعملية التحميل المُسبَق التوقّعي:
- تستخرج هذه الميزة أولاً بيانات أنماط التنقّل للمستخدمين من مقدّم خدمة الإحصاءات المفضّل لديك.
- ثم تربط عناوين URL من التقرير بأجزاء JavaScript التي تم إنشاؤها بواسطة webpack.
- استنادًا إلى البيانات المستخرَجة، يتم إنشاء نموذج بسيط قائم على التوقّعات للصفحات التي يُرجّح أن ينتقل إليها المستخدِم من أيّ صفحة معيّنة.
- ويُستخدَم النموذج لكلّ جزء من JavaScript، مع توقّع الأجزاء الأخرى التي يُرجّح أن تكون مطلوبة بعد ذلك.
- وتضيف تعليمات التخزين المُسبَق إلى كل جزء.
عند اكتمال Guess.js، سيحتوي كل جزء على تعليمات لفلترة البيانات مسبقًا مشابهة لما يلي:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
يطلب هذا الرمز الذي تم إنشاؤه من خلال Guess.js من المتصفِّح التفكير في جلب المقطع a.js مسبقًا باستخدام الاحتمالية 0.2 والمقطع b.js مع احتمالية 0.8.
بعد تنفيذ المتصفح للرمز، سيتحقّق Guess.js من سرعة اتصال المستخدم. إذا كان ذلك كافيًا، ستُدخِل Guess.js علامتَي <link rel="prefetch"> في عنوان الصفحة، واحدة لكلّ جزء. إذا كان المستخدم على شبكة عالية السرعة، ستُحمِّل Guess.js كلا المقطعَين مسبقًا. إذا كان اتصال المستخدم بالشبكة ضعيفًا، لن تحمِّل Guess.js سوى الجزء b.js مسبقًا لأنّه من المرجّح أن يكون مطلوبًا.
مزيد من المعلومات
لمعرفة المزيد عن Guess.js، اطّلِع على هذه الموارد: