Mempercepat navigasi di React dengan Quicklink

Ambil otomatis link dalam area pandang dengan quicklink 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, sebelumnya. Quicklink adalah library yang memungkinkan Anda menerapkan teknik ini dalam skala besar, dengan mengambil data link secara otomatis saat masuk dalam tampilan.

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

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

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

Untuk mencapainya, terdapat beberapa tantangan:

• Menentukan bagian mana (misalnya article.chunk.js) yang terkait dengan rute tertentu (misalnya /article) sebelum mendarat 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 halaman tunggal React.

Catatan: Saat ini, solusi ini hanya kompatibel dengan react-router.

Coba: Lihat codelab Pengambilan data di aplikasi create-react-app dengan Quicklink untuk demonstrasi Quicklink terpandu dan langsung.

Menentukan bagian yang terkait dengan setiap rute

Salah satu komponen inti dari quicklink adalah webpack-route-manifest, 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 mengambilnya saat rute masuk ke tampilan.

Setelah mengintegrasikan plugin dengan project, file manifes JSON 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:

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

Mengambil potongan untuk rute dalam area pandang

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

Kemudian, komponen urutan yang lebih tinggi (HOC) withQuicklink() dapat digunakan untuk menunjukkan bahwa rute tertentu harus diambil data saat link masuk ke tampilan.

Kode berikut termasuk dalam komponen App dari 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 diambil terlebih dahulu saat masuk ke tampilan:

1. Impor HOC quicklink di awal komponen.
2. Gabungkan setiap rute dengan HOC withQuicklink(), yang akan 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 bagian terkaitnya 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 HTTP Cache 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 bisa meningkatkan waktu pemuatan secara signifikan untuk navigasi di masa mendatang. Di aplikasi satu halaman React, hal ini dapat dilakukan dengan memuat bagian yang terkait dengan setiap rute, sebelum pengguna masuk ke dalamnya. Solusi Quicklink untuk React SPA menggunakan webpack-route-manifest untuk membuat peta rute dan bagian, untuk menentukan file mana yang akan diambil data-nya, saat link muncul di tampilan. Menerapkan teknik ini di seluruh situs Anda dapat meningkatkan kualitas navigasi secara signifikan hingga membuatnya tampak instan.