Codelab ini menunjukkan cara menerapkan library Quicklink dalam demo React SPA untuk menunjukkan bagaimana pengambilan data mempercepat navigasi berikutnya.
Ukur
Sebelum menambahkan pengoptimalan, sebaiknya analisis status aplikasi saat ini terlebih dahulu.
- Klik Remix to Edit agar project dapat diedit.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
Situs ini adalah demo sederhana yang dibuat dengan create-react-app.
Selesaikan petunjuk berikut di tab baru yang baru saja terbuka:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Centang kotak Disable cache.
- Di menu drop-down Throttling, pilih 3G Cepat untuk menyimulasikan jenis koneksi lambat.
- Muat ulang aplikasi.
- Ketik
chunk
di dalam kotak teks Filter untuk menyembunyikan resource yang tidak menyertakanchunk
dalam namanya.
Situs ini menggunakan pemisahan kode berbasis rute, karena hanya kode yang diperlukan yang diminta di awal.
- Hapus permintaan jaringan di DevTools.
- Di dalam aplikasi, klik link Blog untuk membuka halaman tersebut.
Potongan JS dan CSS untuk rute baru dimuat untuk merender halaman.
Selanjutnya, Anda akan mengimplementasikan {i>Quicklink<i} di situs ini, sehingga potongan-potongan data ini dapat diambil sebelumnya di {i>home page<i}, membuat navigasi menjadi lebih cepat.
Hal ini memungkinkan Anda menggabungkan yang terbaik dari kedua teknik tersebut:
- Pemisahan kode berbasis rute memberi tahu browser agar hanya memuat potongan yang diperlukan dengan prioritas yang lebih tinggi pada waktu pemuatan halaman.
- Pengambilan data memberitahu browser untuk memuat potongan untuk link dalam tampilan yang terlihat pada prioritas terendah, selama waktu tidak ada aktivitas browser.
Konfigurasikan webpack-route-manifest
Langkah pertama adalah menginstal dan mengonfigurasi webpack-route-manifest, yakni plugin webpack yang memungkinkan Anda membuat file manifes yang mengaitkan rute dengan bagian yang sesuai.
Biasanya, Anda perlu menginstal library, tetapi kami telah melakukannya untuk Anda. Berikut adalah perintah yang perlu Anda jalankan:
npm install webpack-route-manifest --save-dev
config-overrides.js
adalah file yang ditempatkan di direktori utama project tempat Anda dapat mengganti perilaku konfigurasi webpack yang ada, tanpa harus mengeluarkan project.
- Untuk melihat sumber, tekan Lihat Sumber.
Buka config-overrides.js
untuk mengedit dan menambahkan dependensi webpack-route-manifest
di awal file:
const path = require('path');
const RouteManifest = require('webpack-route-manifest');
Selanjutnya, konfigurasi plugin webpack-route-manifest
dengan menambahkan kode berikut
kode ke bagian bawah config-overrides.js
:
module.exports = function override(config) {
config.resolve = {
...config.resolve,
alias: {
'@assets': `${path.resolve(__dirname, 'src/assets')}`,
'@pages': `${path.resolve(__dirname, 'src/pages')}`,
'@components': `${path.resolve(__dirname, 'src/components')}`,
},
};
config.plugins.push(
new RouteManifest({
minify: true,
filename: 'rmanifest.json',
routes(str) {
let out = str.replace('@pages', '').toLowerCase();
if (out === '/article') return '/blog/:title';
if (out === '/home') return '/';
return out;
},
}),
);
return config;
};
Kode baru akan melakukan hal berikut:
config.resolve
mendeklarasikan variabel dengan rute internal ke halaman, aset, dan komponen.config.plugins.push()
membuat objekRouteManifest
dan meneruskan konfigurasinya sehingga filermanifest.json
dapat dibuat berdasarkan rute dan potongan situs.
File manifest.json
akan dibuat dan tersedia di https://site_url/rmanifest.json
.
Konfigurasi link cepat
Pada tahap ini, Anda harus menginstal library Quicklink di project Anda. Untuk mempermudah, kami telah menambahkannya ke project. Berikut adalah perintah yang perlu Anda jalankan:
npm install --save quicklink
Buka src/components/App/index.js
untuk mengedit.
Pertama, impor komponen Quicklink urutan tinggi (HOC):
import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';
import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';
const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));
Selanjutnya, buat objek options
setelah deklarasi variabel Blog
, untuk digunakan sebagai argumen saat memanggil quicklink
:
const options = {
origins: []
};
Terakhir, gabungkan setiap rute dengan komponen urutan lebih tinggi withQuicklink()
, dengan meneruskan parameter options
dan komponen target untuk rute tersebut:
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>
);
Kode sebelumnya menginstruksikan pengambilan data potongan untuk rute yang digabungkan dengan withQuicklink()
, saat link muncul dalam tampilan.
Ukur lagi
Ulangi 6 langkah pertama dari Mengukur. Jangan menavigasi ke halaman blog dulu.
Saat halaman beranda memuat potongan untuk rute tersebut akan dimuat. Setelah itu, Quicklink mengambil data potongan rute untuk link dalam tampilan yang terlihat:
Potongan ini diminta pada prioritas terendah dan tanpa memblokir halaman.
Berikutnya:
- Hapus log Jaringan lagi.
- Nonaktifkan kotak centang Disable cache.
- Klik link Blog untuk menavigasi ke halaman tersebut.
Kolom Size menunjukkan bahwa potongan ini diambil dari "cache pengambilan data", bukan dari jaringan. Perlu waktu sekitar 580 md untuk memuat bagian ini tanpa Quicklink. Menggunakan library ini sekarang memerlukan waktu 2 md, yang berarti 99% pengurangan.