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

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

• لعرض المصدر، اضغط على View Source (عرض المصدر).

افتح 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) من Quicklink:

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 خطوات من قسم قياس. لا تنتقل إلى صفحة المدونة في الوقت الحالي.

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

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

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

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

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