איך להאיץ ניווט ב-React באמצעות Quicklink

שליפה מראש (prefetch) אוטומטית של קישורים באזור התצוגה באמצעות קישור מהיר לאפליקציות בדף יחיד ב-React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

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

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

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

כדי לעשות את זה יש כמה אתגרים:

• חשוב לקבוע אילו מקטעים (למשל article.chunk.js) משויכים למסלול נתון (למשל, /article) לפני הנחיתה שלו.
• לא ניתן לחזות את השמות של כתובות ה-URL הסופיות של המקטעים האלה, מפני שבחבילות מודולים מודרניות בדרך כלל משתמשים בגיבוב לטווח ארוך לניהול גרסאות (למשל article.chunk.46e51.js).

במדריך הזה מוסבר איך הקישור המהיר פותר את האתגרים האלה ומאפשר לכם להשיג שליפה מראש (prefetch) בקנה מידה נרחב באפליקציות 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.

שליפה מראש של מקטעים במסלולים באזור התצוגה

ברגע שקובץ המניפסט יהיה זמין, השלב הבא הוא התקנת קישור מהיר על ידי הרצת 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. עולים על כל מסלול עם ה-HOC withQuicklink(), ומעבירים אליו את רכיב הדף ואת פרמטר האפשרויות.

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>
);

ב-HOC של withQuicklink() נעשה שימוש בנתיב המסלול כמפתח כדי לקבל את המקטעים המשויכים אליו מ-rmanifest.json. לפני שמתחילים, כשקישורים נכנסים לתצוגה, הספרייה מחדירה תג <link rel="prefetch"> לדף עבור כל מקטע, כדי שניתן יהיה לשלוף אותם מראש. הדפדפן יבקש להשתמש במשאבים שנשלפו מראש בעדיפות הנמוכה ביותר, והם יישמרו במטמון של HTTP למשך 5 דקות. לאחר מכן, יחולו כללי cache-control של המשאב. כתוצאה מכך, כשמשתמש לוחץ על קישור ועובר למסלול נתון, המקטעים מאוחזרים מהמטמון, והזמן שנדרש לעיבוד המסלול גדל משמעותית.

סיכום

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