שליפה מראש (prefetch) של יצירת תגובה באפליקציה באמצעות Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

בשיעור הזה תלמדו איך להטמיע את ספריית Quicklink בהדגמה של React SPA כדי להדגים איך שליפה מראש (prefetch) מאיצה את הניווטים הבאים.

מדידה

לפני הוספת אופטימיזציות, תמיד כדאי לנתח תחילה את המצב הנוכחי של האפליקציה.

• לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
• כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .

האתר הוא הדגמה פשוטה שנוצרת באמצעות create-react-app.

בכרטיסייה החדשה שנפתחה, מבצעים את ההוראות הבאות:

1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
2. לוחצים על הכרטיסייה רשתות.
3. מסמנים את התיבה Disable cache (השבתת המטמון).
4. ברשימה הנפתחת של ויסות נתונים, בחר באפשרות Fast 3G כדי לדמות סוג חיבור איטי.
5. טוענים מחדש את האפליקציה.
6. מקלידים chunk בתיבת הטקסט של המסנן כדי להסתיר משאבים שלא כוללים את chunk בשמם.

האתר משתמש בפיצול קוד מבוסס-מסלול, וכתוצאה מכך נדרש רק הקוד הדרוש בהתחלה.

1. מנקים את בקשות הרשת בכלי הפיתוח.
2. בתוך האפליקציה, לוחצים על הקישור בלוג כדי לעבור לדף הזה.

קטעי ה-JS וה-CSS של הנתיב החדש נטענים כדי לעבד את הדף.

בשלב הבא, עליך להטמיע את Quicklink באתר הזה, כדי שיהיה אפשר לאחזר מראש את המקטעים האלה בדף הבית, וכך להפוך את הניווט למהיר יותר.

כך תוכלו לשלב את הטכניקות הטובות ביותר:

• פיצול קוד מבוסס-נתיב מורה לדפדפן לטעון רק את החלקים הנדרשים בעדיפות גבוהה יותר בזמן טעינת הדף.
• שליפה מראש (prefetch) מורה לדפדפן לטעון את המקטעים של קישורים באזור התצוגה בעדיפות הנמוכה ביותר, במהלך הזמן ללא פעילות של הדפדפן.

הגדרה של webpack-route-manifest

השלב הראשון הוא להתקין ולהגדיר את webpack-route-manifest, פלאגין Webpack שמאפשר ליצור קובץ מניפסט שמשייך מסלולים עם המקטעים התואמים שלהם.

בדרך כלל תצטרכו להתקין את הספרייה, אבל כבר עשינו זאת. מריצים את הפקודה הבאה:

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

config-overrides.js הוא קובץ שממוקם בספריית הבסיס של הפרויקט, שבו אפשר לשנות את ההתנהגות הקיימת של הגדרת ה-webpack בלי להוציא את הפרויקט.

• כדי להציג את המקור, לוחצים על הצגת מקור.

פותחים את 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 השלבים הראשונים של מדידה. עדיין לא נכנסים לדף הבלוג.

כשדף הבית טוען את המקטעים של מסלול זה. לאחר מכן, ב-Quicklink מתבצע אחזור מראש של מקטעי המסלול עבור הקישורים באזור התצוגה:

המקטעים האלה נדרשים בעדיפות הנמוכה ביותר, ובלי לחסום את הדף.

הבא:

1. מנקים שוב את יומן הרשת.
2. משביתים את תיבת הסימון Disable cache (השבתת מטמון).
3. לוחצים על הקישור לבלוג כדי לעבור לדף הזה.

בעמודה גודל מצוין שהמקטעים האלה אוחזרו מ'מטמון השליפה מראש', ולא מהרשת. טעינת המקטעים האלה ללא Quicklink נמשכה כ-580 אלפיות השנייה. השימוש בספרייה נמשך עכשיו 2 אלפיות שנייה, שמייצג הפחתה של 99% !