سرعت ناوبری را در React با Quicklink افزایش دهید

هنگامی که فایل مانیفست در دسترس است، گام بعدی نصب 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. quicklink HOC را در ابتدای کامپوننت وارد کنید.
2. هر مسیر را با withQuicklink() HOC بپیچید و مولفه صفحه و پارامتر گزینه ها را به آن منتقل کنید.

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"> در صفحه تزریق می کند تا بتوان آنها را از قبل واکشی کرد. منابع از پیش واکشی شده با کمترین اولویت توسط مرورگر درخواست می شوند و به مدت 5 دقیقه در حافظه پنهان HTTP نگهداری می شوند و پس از آن، قوانین cache-control منبع اعمال می شود. در نتیجه، زمانی که کاربر روی یک لینک کلیک می‌کند و به یک مسیر مشخص می‌رود، تکه‌ها از حافظه پنهان بازیابی می‌شوند و زمان لازم برای ارائه آن مسیر را به میزان زیادی بهبود می‌بخشند.