Codelab ini menunjukkan cara menerapkan library Quicklink dalam demo React SPA untuk mendemonstrasikan cara pengambilan data mempercepat navigasi berikutnya.
Ukur
Sebelum menambahkan pengoptimalan, sebaiknya analisis status aplikasi saat ini terlebih dahulu.
- Klik Remix untuk Mengedit 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 Network
- Centang kotak Disable cache.
- Di menu drop-down Throttling, pilih Fast 3G untuk menyimulasikan jenis koneksi lambat.
- Muat ulang aplikasi.
- Ketik
chunk
di dalam kotak teks Filter untuk menyembunyikan aset apa pun yang tidak menyertakanchunk
dalam namanya.
Situs menggunakan pemisahan kode berbasis rute, yang memungkinkan 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 Quicklink di situs ini, sehingga potongan ini dapat diambil data di halaman beranda, sehingga navigasi menjadi lebih cepat.
Cara ini memungkinkan Anda untuk menggabungkan yang terbaik dari kedua teknik tersebut:
- Pemisahan kode berbasis rute memberi tahu browser untuk hanya memuat bagian yang diperlukan dengan prioritas yang lebih tinggi pada waktu pemuatan halaman.
- Pengambilan data memberi tahu browser agar memuat potongan untuk link dalam area pandang pada prioritas terendah, selama waktu tidak ada aktivitas browser.
Konfigurasikan webpack-route-manifest
Langkah pertama adalah menginstal dan mengonfigurasi webpack-route-manifest, plugin webpack yang memungkinkan Anda membuat file manifes yang mengaitkan rute dengan bagian terkait.
Biasanya, Anda perlu menginstal library tersebut, tetapi kita telah melakukannya untuk Anda. Berikut adalah perintah yang harus 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 sudah 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 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 quicklink
Pada tahap ini, Anda harus menginstal library Quicklink di project. Untuk memudahkan, kami sudah menambahkannya ke project. Berikut adalah perintah yang harus Anda jalankan:
npm install --save quicklink
Buka src/components/App/index.js
untuk mengedit.
Pertama, impor komponen urutan lebih tinggi (HOC) Quicklink:
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 yang 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 untuk mengambil data potongan untuk rute yang digabungkan dengan withQuicklink()
, saat link masuk ke tampilan.
Ukur lagi
Ulangi 6 langkah pertama dari Mengukur. Jangan buka halaman blog dulu.
Saat halaman beranda memuat potongan untuk rute tersebut. Setelah itu, Quicklink akan mengambil data potongan rute untuk link dalam area pandang:
Potongan ini diminta pada prioritas terendah dan tanpa memblokir halaman.
Berikutnya:
- Hapus lagi Log jaringan.
- Nonaktifkan kotak centang Disable cache.
- Klik link Blog untuk membuka halaman tersebut.
Kolom Size menunjukkan bahwa potongan ini diambil dari "cache pengambilan data", bukan jaringan. Memuat potongan-potongan ini tanpa Quicklink membutuhkan waktu sekitar 580 md. Dengan library, sekarang diperlukan waktu 2 md, yang menunjukkan pengurangan 99% .