تسريع عمليات التنقّل في React باستخدام الرابط السريع

يتم تلقائيًا جلب الروابط في إطار العرض باستخدام Quicklink لتطبيقات الصفحة الواحدة من React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

في التطبيقات المتعددة الصفحات، تحضر المكتبة المستندات مسبقًا (مثل /article.html)، بالنسبة إلى الروابط ضمن إطار العرض، وبالتالي عندما ينقر المستخدم على هذه الروابط، يمكن جلبها من ذاكرة التخزين المؤقت لـ HTTP.

تستخدم تطبيقات الصفحة الواحدة عادةً أسلوبًا يُسمى تقسيم الرموز المستنِدة إلى المسار. يتيح ذلك للموقع تحميل الرمز لمسار معين فقط عندما ينتقل المستخدم إليه. ويُشار إلى هذه الملفات (JS وCSS) بوجه عام باسم "الأجزاء".

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

ويطرح تحقيق ذلك بعض التحديات:

• ليس من السهل تحديد الأجزاء (مثل article.chunk.js) المرتبطة بمسار معين (مثل /article) قبل الوصول إليه.
• لا يمكن توقُّع أسماء عناوين URL النهائية لهذه المجموعات، لأنّ برامج حزم الوحدات الحديثة تستخدم عادةً التجزئة طويلة الأجل لتحديد النُسخ (مثل article.chunk.46e51.js).

يشرح هذا الدليل كيف يحلّ Quicklink هذه التحديات ويتيح لك إجراء الجلب المسبق على نطاق واسع في تطبيقات React التي تتضمّن صفحة واحدة.

تحديد الأجزاء المرتبطة بكل مسار

أحد المكوّنات الأساسية لـ quicklink هو webpack-route-manifest، وهو مكوّن إضافي من webpack يتيح لك إنشاء قاموس JSON للمسارات والمجموعات. ويتيح ذلك للمكتبة معرفة الملفات التي سيحتاج إليها كل مسار للتطبيق وجلبها مسبقًا مع ظهور المسارات.

بعد دمج المكوّن الإضافي مع المشروع، سينتج ملف بيان JSON يربط كل مسار بالمجموعات المقابلة له:

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

يمكن طلب ملف البيان هذا بطريقتين:

• حسب عنوان URL، مثلاً https://site_url/rmanifest.json
• من خلال كائن النافذة، في window.__rmanifest.

جلب أجزاء مسبقًا للمسارات ضمن إطار العرض

بمجرد توفر ملف البيان، فإن الخطوة التالية هي تثبيت Quicklink عن طريق تشغيل npm install quicklink.

وبعد ذلك، يمكن استخدام مكون الترتيب الأعلى (HOC) withQuicklink() للإشارة إلى أنه يجب جلب مسار معيّن مسبقًا عند ظهور الرابط في العرض.

ينتمي الرمز التالي إلى أحد المكوّنات App في تطبيق React الذي يعرض قائمة علوية تحتوي على أربعة روابط:

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

لإخبار Quicklink بأنه يجب جلب هذه المسارات مسبقًا عند ظهورها في العرض:

1. قم باستيراد HOC quicklink في بداية المكوِّن.
2. التفاف كل مسار مع HOC withQuicklink()، مع تمرير مكوِّن الصفحة ومعلمة الخيارات إليه.

const options = {
  origins: [],
};
const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={withQuicklink(Home, options)} />
        <Route path="/blog" exact component={withQuicklink(Blog, options)} />
        <Route
          path="/blog/:title"
          component={withQuicklink(Article, options)}
        />
        <Route path="/about" exact component={withQuicklink(About, options)} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

تستخدم HOC في withQuicklink() مسار المسار كمفتاح للحصول على الأجزاء المرتبطة به من rmanifest.json. بشكل غير مرئي، عندما تظهر الروابط في العرض، تُدخل المكتبة علامة <link rel="prefetch"> في الصفحة لكل مقطع كي يتم جلبها مسبقًا. سيطلب المتصفّح الموارد التي يتم جلبها مسبقًا بأولوية أدنى من خلال الاحتفاظ بها في ذاكرة التخزين المؤقت HTTP لمدة 5 دقائق، وبعد ذلك يتم تطبيق قواعد cache-control للمورد. ونتيجة لذلك، عندما ينقر المستخدم على رابط وينتقل إلى مسار معين، سيتم استرداد المقاطع من ذاكرة التخزين المؤقت، مما يؤدي إلى تحسين كبير في الوقت المستغرق لعرض هذا المسار.

الخاتمة

يمكن أن يؤدي الجلب المسبق إلى تحسين أوقات التحميل بشكل كبير لعمليات التنقل المستقبلية. في تطبيقات React ذات الصفحة الواحدة، يمكن تنفيذ ذلك من خلال تحميل المقاطع المرتبطة بكل مسار قبل وصول المستخدم إليها. يستخدم حلّ Quicklink في React SPA ميزة webpack-route-manifest لإنشاء خريطة للمسارات وأجزاء البيانات من أجل تحديد الملفات التي سيتم جلبها مسبقًا، وذلك عندما يظهر رابط. يمكن أن يؤدي تطبيق هذا الأسلوب في جميع أنحاء موقعك إلى تحسين عمليات التنقل بشكل كبير إلى حد جعلها تظهر بشكل فوري.