איך להאיץ ניווט ב-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).

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

סיכום

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