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

به طور خودکار پیوندهای درون ویوپورت را با Quicklink برای برنامه های تک صفحه ای React واکشی کنید.

آدی عثمانی
Addy Osmani
X GitHub
آنتون کارلوفسکی
دمیان رنزولی

واکشی اولیه تکنیکی برای سرعت بخشیدن به ناوبری با دانلود منابع برای صفحه بعدی، پیش از موعد است. Quicklink کتابخانه‌ای است که به شما امکان می‌دهد این تکنیک را در مقیاس، با واکشی خودکار لینک‌ها در هنگام مشاهده، پیاده‌سازی کنید.

در برنامه‌های چند صفحه‌ای، کتابخانه اسناد (مثلاً /article.html ) را برای پیوندهای درون ویوپورت واکشی می‌کند، به طوری که وقتی کاربر روی این پیوندها کلیک می‌کند، بتوانند از حافظه پنهان HTTP دریافت کنند.

برنامه های تک صفحه ای معمولاً از تکنیکی به نام تقسیم کد مبتنی بر مسیر استفاده می کنند. این به سایت اجازه می دهد تنها زمانی که کاربر به سمت آن حرکت می کند، کد را برای یک مسیر معین بارگذاری کند. این فایل ها (JS، CSS) معمولاً به عنوان "تکه ها" شناخته می شوند.

با این اوصاف، در این سایت‌ها، به‌جای واکشی اولیه اسناد، بیشترین دستاوردهای عملکردی از واکشی اولیه این تکه‌ها قبل از نیاز صفحه به آنها حاصل می‌شود.

دستیابی به این امر چالش هایی را به همراه دارد:

  • تعیین اینکه کدام تکه‌ها (مثلا article.chunk.js ) با یک مسیر مشخص (مثلاً /article ) مرتبط هستند، قبل از فرود روی آن، امری بی‌اهمیت نیست.
  • نام URL نهایی این تکه‌ها قابل پیش‌بینی نیست، زیرا بسته‌کننده‌های ماژول مدرن معمولاً از هش طولانی‌مدت برای نسخه‌سازی استفاده می‌کنند (مثلا article.chunk.46e51.js ).

این راهنما توضیح می‌دهد که Quicklink چگونه این چالش‌ها را حل می‌کند و به شما امکان می‌دهد در برنامه‌های تک صفحه‌ای React به واکشی اولیه در مقیاس دست پیدا کنید.

تکه های مرتبط با هر مسیر را تعیین کنید

یکی از اجزای اصلی quicklink ، webpack-route-manifest است، یک افزونه بسته وب که به شما امکان می‌دهد یک فرهنگ لغت 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. 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 منبع اعمال می شود. در نتیجه، زمانی که کاربر روی یک لینک کلیک می‌کند و به یک مسیر مشخص می‌رود، تکه‌ها از حافظه پنهان بازیابی می‌شوند و زمان لازم برای ارائه آن مسیر را به میزان زیادی بهبود می‌بخشند.

نتیجه

واکشی اولیه می‌تواند زمان بارگذاری را برای پیمایش‌های آینده بسیار بهبود بخشد. در برنامه‌های تک صفحه‌ای React، می‌توان این کار را با بارگیری تکه‌های مرتبط با هر مسیر، قبل از اینکه کاربر در آن‌ها فرود آورد، به دست آورد. راه‌حل Quicklink برای React SPA از webpack-route-manifest برای ایجاد نقشه‌ای از مسیرها و تکه‌ها استفاده می‌کند تا مشخص کند که چه فایل‌هایی باید از قبل واکشی شوند، زمانی که یک پیوند در نمای ظاهر می‌شود. پیاده‌سازی این تکنیک در سرتاسر سایت شما می‌تواند تا حد زیادی ناوبری را بهبود بخشد تا جایی که آن‌ها را فوری نشان دهد.