דף זה תורגם על ידי Cloud Translation API.

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

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

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

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

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

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

כדי לעמוד ביעדים האלה:

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

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

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

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

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