Mempercepat navigasi di React dengan Quicklink

Ambil otomatis link dalam area pandang dengan link cepat untuk aplikasi halaman tunggal React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Pengambilan data adalah teknik untuk mempercepat navigasi dengan mendownload resource untuk halaman berikutnya terlebih dahulu. Quicklink adalah library yang memungkinkan Anda menerapkan teknik ini dalam skala besar, dengan otomatis mengambil data link saat muncul dalam tampilan.

Di aplikasi multi-halaman, library akan mengambil data dokumen (misalnya, /article.html), untuk link dalam area pandang, sehingga saat pengguna mengklik link ini, file tersebut dapat diambil dari cache HTTP.

Aplikasi satu halaman biasanya menggunakan teknik yang disebut pemisahan kode berbasis rute. Tindakan ini memungkinkan situs memuat kode untuk rute tertentu hanya saat pengguna membuka situs tersebut. File ini (JS, CSS) umumnya disebut sebagai "bagian".

Dengan demikian, di situs-situs ini, alih-alih mengambil dokumen, peningkatan kinerja terbesar berasal dari pengambilan data potongan ini sebelum halaman membutuhkannya.

Mencapai hal ini memunculkan beberapa tantangan:

• Menentukan bagian (misalnya, article.chunk.js) yang dikaitkan dengan rute tertentu (misalnya, /article) sebelum mencapainya bukanlah hal yang mudah.
• Nama URL final dari potongan ini tidak dapat diprediksi, karena pemaket modul modern biasanya menggunakan hashing jangka panjang untuk pembuatan versi (misalnya, article.chunk.46e51.js).

Panduan ini menjelaskan cara Quicklink mengatasi tantangan ini dan memungkinkan Anda mencapai pengambilan data dalam skala besar di aplikasi web satu halaman React.

Menentukan potongan yang terkait dengan setiap rute

Salah satu komponen inti quicklink adalah webpack-route-manifest, sebuah plugin webpack yang memungkinkan Anda membuat kamus rute dan potongan JSON. Hal ini memungkinkan library mengetahui file mana yang akan diperlukan oleh setiap rute aplikasi dan melakukan pengambilan data saat rute muncul dalam tampilan.

Setelah mengintegrasikan plugin dengan project, plugin akan menghasilkan file manifes JSON yang mengaitkan setiap rute dengan potongannya yang sesuai:

{
  '/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',
    },
  ],
}

File manifes ini dapat diminta dengan dua cara:

• Dengan URL, mis. https://site_url/rmanifest.json.
• Melalui objek jendela, di window.__rmanifest.

Mengambil potongan untuk rute dalam tampilan

Setelah file manifes tersedia, langkah berikutnya adalah menginstal Quicklink dengan menjalankan npm install quicklink.

Kemudian, withQuicklink() komponen urutan yang lebih tinggi (HOC) dapat digunakan untuk menunjukkan bahwa rute tertentu harus pengambilan data ketika link muncul dalam tampilan.

Kode berikut termasuk dalam komponen App dari aplikasi React yang merender menu teratas dengan empat link:

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>
);

Untuk memberi tahu Quicklink bahwa rute ini harus dilakukan pengambilan data saat muncul dalam tampilan:

1. Impor HOC quicklink di awal komponen.
2. Gabungkan setiap rute dengan HOC withQuicklink(), dengan meneruskan komponen halaman dan parameter opsi ke rute tersebut.

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() menggunakan jalur rute sebagai kunci untuk mendapatkan potongan terkait dari rmanifest.json. Di balik layar, saat link masuk ke tampilan, library akan memasukkan tag <link rel="prefetch"> di halaman untuk setiap potongan sehingga dapat dilakukan pengambilan data. Resource yang diambil sebelumnya akan diminta pada prioritas terendah oleh browser dan disimpan dalam Cache HTTP selama 5 menit. Setelah itu, aturan cache-control resource akan berlaku. Sebagai hasilnya, saat pengguna mengklik link dan bergerak ke rute tertentu, potongan tersebut akan diambil dari cache, sehingga sangat mengurangi waktu yang dibutuhkan untuk merender rute tersebut.

Kesimpulan

Pengambilan data dapat meningkatkan waktu pemuatan secara signifikan untuk navigasi mendatang. Di aplikasi satu halaman React, hal ini dapat dilakukan dengan memuat potongan yang terkait dengan setiap rute, sebelum pengguna membuka di dalamnya. Solusi Quicklink untuk React SPA menggunakan webpack-route-manifest untuk membuat peta rute dan potongan, guna menentukan file mana yang akan diambil data, saat link muncul dalam tampilan. Menerapkan teknik ini di seluruh situs Anda dapat meningkatkan navigasi secara signifikan sehingga membuatnya muncul dengan cepat.