Pengambilan data di aplikasi create-react dengan Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

Catatan: Codelab ini menggunakan Chrome DevTools. Download Chrome jika Anda belum memilikinya.

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:

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

Situs ini menggunakan pemisahan kode berbasis rute, karena 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 {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 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 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.

Catatan: Jika pada tahap ini Glitch menampilkan error terkait kurangnya dependensi, coba buka Terminal Glitch (Alat > Terminal), jalankan refresh di Terminal, lalu jalankan npm run build.

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:

1. Hapus log Jaringan lagi.
2. Nonaktifkan kotak centang Disable cache.
3. 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.