الجلب المُسبَق في إنشاء تطبيق للتفاعل باستخدام رابط سريع

Addy Osmani

Anton Karlovskiy

Demián Renzulli

يوضِّح لك هذا الدرس التطبيقي حول الترميز كيفية تنفيذ مكتبة الرابط السريع في عرض توضيحي لـ React SPA لتوضيح كيفية تسريع الجلب المُسبَق في عمليات الانتقال اللاحقة.

قياس

قبل إضافة تحسينات، من الأفضل دائمًا تحليل الحالة الحالية للتطبيق أولاً.

• انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .

الموقع الإلكتروني هو عرض توضيحي بسيط تم إنشاؤه باستخدام create-react-app.

أكمل التعليمات التالية في علامة التبويب الجديدة التي فتحتها:

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
2. انقر على علامة التبويب الشبكة.
3. ضع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
4. في القائمة المنسدلة التقييد، اختر شبكة الجيل الثالث السريعة لمحاكاة نوع اتصال بطيء.
5. أعِد تحميل التطبيق.
6. اكتب chunk في مربّع نص الفلتر لإخفاء أي موارد لا تتضمن chunk في أسمائها.

يستخدم الموقع الإلكتروني تقسيم الرموز المستندة إلى المسار، والذي يتم بموجبه طلب الرمز الضروري فقط في البداية.

1. محو طلبات الشبكة في "أدوات مطوري البرامج"
2. انقر على رابط المدونة داخل التطبيق للانتقال إلى تلك الصفحة.

يتم تحميل مقاطع JS وCSS للمسار الجديد لعرض الصفحة.

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

يتيح لك ذلك الجمع بين أفضل ما في الأسلوبين:

• يؤدي تقسيم الرمز المستند إلى المسار إلى تحميل المتصفح فقط المقاطع الضرورية ذات أولوية أعلى في وقت تحميل الصفحة.
• يطلب الجلب المسبق من المتصفح تحميل مقاطع الروابط ضمن إطار العرض بأقل أولوية، أثناء وقت عدم نشاط المتصفّح.

ضبط webpack-route-manifest

الخطوة الأولى هي تثبيت وإعداد webpack-route-manifest، وهو مكوّن إضافي لحزمة الويب يتيح لك إنشاء ملف بيان يربط المسارات بالأجزاء المقابلة لها.

عليك عادةً تثبيت المكتبة، ولكننا قمنا بذلك بالفعل. إليك الأمر الذي يجب تنفيذه:

npm install webpack-route-manifest --save-dev

config-overrides.js هو ملف تم وضعه في الدليل الجذري لمشروعك حيث يمكنك إلغاء السلوك الحالي لإعدادات حزمة الويب، بدون الحاجة إلى إخراج المشروع.

• للاطّلاع على المصدر، اضغط على عرض المصدر.

افتح config-overrides.js للتعديل وأضِف تبعية webpack-route-manifest في بداية الملف:

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

بعد ذلك، يمكنك ضبط المكوّن الإضافي webpack-route-manifest بإضافة الرمز التالي إلى الجزء السفلي من config-overrides.js:

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      '@assets': `${path.resolve(__dirname, 'src/assets')}`,
      '@pages': `${path.resolve(__dirname, 'src/pages')}`,
      '@components': `${path.resolve(__dirname, 'src/components')}`,
    },
  };

  config.plugins.push(
    new RouteManifest({
      minify: true,
      filename: 'rmanifest.json',
      routes(str) {
        let out = str.replace('@pages', '').toLowerCase();
        if (out === '/article') return '/blog/:title';
        if (out === '/home') return '/';
        return out;
      },
    }),
  );

  return config;
};

ويقوم الرمز الجديد بما يلي:

• تشير السمة config.resolve إلى المتغيّرات في المسارات الداخلية إلى الصفحات ومواد العرض والمكوّنات.
• يمكن من خلال config.plugins.push() إنشاء عنصر RouteManifest وضبط إعداداته بحيث يمكن إنشاء ملف rmanifest.json استنادًا إلى مسارات الموقع الإلكتروني وأجزائه.

سيتم إنشاء ملف manifest.json وإتاحته على https://site_url/rmanifest.json.

إعداد الرابط السريع

في هذه المرحلة، ستحتاج إلى تثبيت مكتبة Quicklink في مشروعك. ولتبسيط الأمر، أضفناه بالفعل إلى المشروع. إليك الأمر الذي يجب تنفيذه:

npm install --save quicklink

فتح src/components/App/index.js للتعديل

أولاً، عليك استيراد مكوّن الطلب الأعلى (HOC) للربط السريع:

import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));

بعد ذلك، أنشئ كائن options بعد تعريف المتغير Blog لاستخدامه كوسيطة عند استدعاء quicklink:

const options = {
    origins: []
};

أخيرًا، يجب لفّ كل مسار باستخدام المكوِّن withQuicklink() من الرتبة الأعلى، مع ضبط المعلَمة options والمكوِّن المستهدف لذلك المسار:

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()، عندما يظهر الرابط في طريقة العرض.

القياس مرة أخرى

كرِّر أول 6 خطوات من القياس. لا تنتقل إلى صفحة المدونة بعد.

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

ويتم طلب هذه المقاطع بأولوية أدنى وبدون حظر الصفحة.

الفيديو التالي:

1. امحُ سجلّ الشبكة مرة أخرى.
2. أوقِف مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
3. انقر على رابط المدونة للانتقال إلى تلك الصفحة.

يشير عمود الحجم إلى أنّه تم استرداد هذه المقاطع من "ذاكرة التخزين المؤقت للجلب المُسبَق"، بدلاً من الشبكة. استغرق تحميل هذه المقاطع بدون رابط سريع 580 ملي ثانية تقريبًا. يستغرق استخدام المكتبة الآن 2 ملي ثانية، وهو ما يمثل انخفاضًا بنسبة 99% .