Otomatis melakukan pramuat link dalam area pandang dengan quicklink untuk aplikasi web satu halaman React.
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:
- Impor HOC
quicklink
di awal komponen. - 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.