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

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

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

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

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

ومع ذلك، في هذه المواقع الإلكترونية، بدلاً من prefetching documents (التحميل المُسبَق للمستندات)، تأتي أكبر مكاسب الأداء من prefetching these chunks (التحميل المُسبَق لهذه الأجزاء) قبل أن تحتاج الصفحة إليها.

ويواجه تحقيق ذلك بعض التحديات:

• ليس من السهل تحديد الأجزاء (مثل 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. احط كل مسار بعنصر 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>
);

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

الخاتمة

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