تسريع عمليات التنقّل في 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، مع تمرير مكوّن الصفحة ومَعلمة options إليه.

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 لإنشاء خريطة للمسارات والقطع، من أجل تحديد الملفات التي يجب تحميلها مسبقًا عند ظهور رابط في العرض. يمكن أن يؤدي تطبيق هذه التقنية في جميع أنحاء موقعك الإلكتروني إلى تحسين عمليات التنقّل بشكل كبير إلى أن تبدو فورية.