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

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

Addy Osmani
Addy Osmani
X GitHub
Anton Karlovskiy
Demián Renzulli

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

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

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

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

ويمثل تحقيق ذلك بعض التحديات:

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

يوضّح هذا الدليل كيف يساعد الرابط السريع في التغلّب على هذه التحديات ويتيح لك تحقيق الجلب المُسبَق على نطاق واسع في تطبيقات 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>
);

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

  1. استورِد quicklink HOC في بداية المكوِّن.
  2. يمكنك لفّ كل مسار باستخدام withQuicklink() HOC، مع تمرير مكوِّن الصفحة ومَعلمة الخيارات إليه.
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 المكوّنة من صفحة واحدة، يمكن تحقيق ذلك من خلال تحميل المقاطع المرتبطة بكل مسار قبل وصول المستخدم إليها. يستخدم حلّ الرابط السريع React SPA webpack-route-manifest لإنشاء خريطة للمسارات والأجزاء، وذلك لتحديد الملفات التي سيتم جلبها مسبقًا عندما يظهر رابط. يمكن أن يؤدي تطبيق هذا الأسلوب في أنحاء موقعك الإلكتروني إلى تحسين عمليات الانتقال بشكل كبير إلى أن تبدو فوريًا.