Mempercepat navigasi di React dengan Quicklink

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

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Pra-pengambilan 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 melakukan pengambilan data link secara otomatis saat link muncul di 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. Hal ini memungkinkan situs memuat kode untuk rute tertentu hanya saat pengguna membukanya. 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 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 bundler 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 melakukan pengambilan data secara berskala besar di aplikasi web satu halaman React.

Menentukan bagian yang terkait dengan setiap rute

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

Setelah mengintegrasikan plugin dengan project, plugin akan menghasilkan file manifes JSON yang mengaitkan setiap rute dengan bagian 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:

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

Mengambil bagian data terlebih dahulu 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 adalah milik komponen App aplikasi React yang merender menu atas 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 dipramuat akan diminta dengan prioritas terendah oleh browser dan disimpan di 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 web satu halaman React, hal ini dapat dicapai dengan memuat bagian yang terkait dengan setiap rute, sebelum pengguna membukanya. 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 dapat sangat meningkatkan navigasi hingga membuatnya tampak instan.