Mempercepat navigasi di React dengan Quicklink

Otomatis melakukan pramuat link dalam area pandang dengan quicklink untuk aplikasi web satu halaman React.

Addy Osmani
Addy Osmani
Anton Karlovskiy
Anton Karlovskiy
Demián Renzulli
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 melakukan pramuat dokumen (misalnya /article.html), untuk link dalam area pandang, sehingga saat pengguna mengklik link ini, link tersebut dapat diambil dari cache HTTP.

Aplikasi web 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) biasanya disebut sebagai "chunk".

Dengan demikian, di situs ini, peningkatan performa terbesar berasal dari pengambilan data sebelumnya pada bagian ini sebelum halaman membutuhkannya, bukan dari pengambilan data sebelumnya pada dokumen.

Untuk mencapai hal ini, ada beberapa tantangan:

  • Menentukan bagian mana (misalnya article.chunk.js) yang terkait dengan rute tertentu (misalnya /article) sebelum membukanya bukanlah hal yang mudah.
  • Nama URL final dari potongan ini tidak dapat diprediksi, karena penggabungan 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 bagian yang terkait dengan setiap rute

Salah satu komponen inti quicklink adalah webpack-route-manifes, 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 pramuat 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, misalnya, https://site_url/rmanifest.json.
  • Melalui objek jendela, di window.__rmanifest.

Mengambil potongan data secara pramuat untuk rute dalam area pandang

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

Kemudian, withQuicklink() komponen tingkat tinggi (HOC) dapat digunakan untuk menunjukkan bahwa rute tertentu harus dipramuat saat link muncul di 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 dipramuat saat muncul di tampilan:

  1. Impor HOC quicklink di awal komponen.
  2. Gabungkan setiap rute dengan HOC withQuicklink(), dengan meneruskan parameter opsi dan komponen halaman 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 bagian terkait dari rmanifest.json. Di balik layar, saat link muncul dalam tampilan, library akan memasukkan tag <link rel="prefetch"> di halaman untuk setiap bagian sehingga dapat diambil sebelumnya. 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. Akibatnya, saat pengguna mengklik link dan berpindah ke rute tertentu, potongan akan diambil dari cache, sehingga sangat meningkatkan waktu yang diperlukan untuk merender rute tersebut.

Kesimpulan

Pengambilan data dapat sangat meningkatkan waktu pemuatan 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 bagian, guna menentukan file mana yang akan dipramuat, saat link muncul dalam tampilan. Menerapkan teknik ini di seluruh situs Anda dapat meningkatkan navigasi secara signifikan sehingga membuatnya muncul dengan cepat.