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

אחסון מקדים אוטומטי של קישורים בחלון התצוגה באמצעות קישור מהיר לאפליקציות React עם דף יחיד.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

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