Pengambilan data di aplikasi create-react dengan Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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:

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Network
3. Centang kotak Disable cache.
4. Di menu drop-down Throttling, pilih Fast 3G untuk menyimulasikan jenis koneksi lambat.
5. Muat ulang aplikasi.
6. Ketik chunk di dalam kotak teks Filter untuk menyembunyikan aset apa pun yang tidak menyertakan chunk dalam namanya.

Situs menggunakan pemisahan kode berbasis rute, yang memungkinkan hanya kode yang diperlukan yang diminta di awal.

1. Hapus permintaan jaringan di DevTools.
2. 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 objek RouteManifest dan meneruskan konfigurasinya sehingga file rmanifest.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:

1. Hapus lagi Log jaringan.
2. Nonaktifkan kotak centang Disable cache.
3. 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% .