การดึงข้อมูลล่วงหน้าในแอปสร้างแบบตอบสนองด้วย Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Codelab นี้จะแสดงวิธีใช้ไลบรารี Quicklink ในการสาธิต SPA ของ React เพื่อแสดงให้เห็นว่าการดึงข้อมูลล่วงหน้าช่วยเพิ่มความเร็วในการไปยังส่วนต่างๆ ในลำดับต่อมาได้อย่างไร

วัดระยะทาง

ก่อนที่จะเพิ่มการเพิ่มประสิทธิภาพ คุณควรวิเคราะห์สถานะปัจจุบันของแอปพลิเคชันก่อน

• คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ

เว็บไซต์ดังกล่าวเป็นการสาธิตง่ายๆ ที่สร้างขึ้นด้วย create-react-app

ทำตามวิธีการต่อไปนี้ในแท็บใหม่ที่เพิ่งเปิด

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บเครือข่าย
3. เลือกช่องทำเครื่องหมายปิดใช้แคช
4. ในรายการแบบเลื่อนลงการควบคุม ให้เลือก Fast 3G เพื่อจำลองประเภทการเชื่อมต่อที่ช้า
5. โหลดแอปซ้ำ
6. พิมพ์ chunk ในกล่องข้อความตัวกรองเพื่อซ่อนทรัพยากรที่ไม่มี chunk อยู่ในชื่อ

เว็บไซต์ใช้การแยกรหัสตามเส้นทางซึ่งต้องขอเฉพาะโค้ดที่จำเป็นในตอนต้น

1. ล้างคำขอเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ
2. ภายในแอป ให้คลิกลิงก์บล็อกเพื่อไปยังหน้านั้น

ระบบจะโหลดส่วน JS และ CSS สำหรับเส้นทางใหม่เพื่อแสดงหน้าเว็บ

ต่อไป คุณจะต้องใช้งาน Quicklink ในเว็บไซต์นี้ เพื่อให้สามารถดึงข้อมูลส่วนเหล่านี้ล่วงหน้าในหน้าแรก ทำให้การนำทางรวดเร็วขึ้น

ซึ่งจะทำให้คุณรวมเทคนิคที่ดีที่สุดจากทั้ง 2 เทคนิคเข้าด้วยกันได้

• การแยกโค้ดตามเส้นทางจะบอกให้เบราว์เซอร์โหลดเฉพาะส่วนที่จำเป็นในลำดับความสำคัญที่สูงขึ้นในการโหลดหน้าเว็บ
• การดึงข้อมูลล่วงหน้าจะบอกให้เบราว์เซอร์โหลดส่วนลิงก์ในวิวพอร์ตโดยมีลำดับความสำคัญต่ำสุดในช่วงที่เบราว์เซอร์ไม่มีการใช้งาน

กำหนดค่า webpack-route-manifest

ขั้นตอนแรกคือการติดตั้งและกำหนดค่า webpack-Routing-manifest ซึ่งเป็นปลั๊กอิน Webpack ที่ให้คุณสร้างไฟล์ Manifest ที่เชื่อมโยงเส้นทางกับกลุ่มที่เกี่ยวข้องได้

โดยปกติคุณจะต้องติดตั้งไลบรารี แต่เราได้ดำเนินการให้คุณแล้ว นี่คือคำสั่งที่คุณต้องเรียกใช้:

npm install webpack-route-manifest --save-dev

config-overrides.js คือไฟล์ที่วางไว้ในไดเรกทอรีรูทของโปรเจ็กต์ ซึ่งคุณจะลบล้างลักษณะการทำงานที่มีอยู่ของการกำหนดค่า Webpack ได้โดยไม่ต้องนำโปรเจ็กต์ออก

• หากต้องการดูแหล่งที่มา ให้กดดูแหล่งที่มา

เปิด config-overrides.js เพื่อแก้ไขและเพิ่มทรัพยากร Dependency webpack-route-manifest ที่ตอนต้นของไฟล์

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

ถัดไป ให้กำหนดค่าปลั๊กอิน webpack-route-manifest โดยการเพิ่มโค้ดต่อไปนี้ที่ด้านล่างของ 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;
};

โค้ดใหม่จะทำหน้าที่ดังต่อไปนี้

• config.resolve ประกาศตัวแปรที่มีเส้นทางภายในไปยังหน้าเว็บ ชิ้นงาน และคอมโพเนนต์
• config.plugins.push() จะสร้างออบเจ็กต์ RouteManifest แล้วส่งการกำหนดค่าเพื่อให้สร้างไฟล์ rmanifest.json โดยอิงตามเส้นทางและกลุ่มของเว็บไซต์

ระบบจะสร้างไฟล์ manifest.json และทำให้ใช้งานได้ที่ https://site_url/rmanifest.json

กำหนดค่าลิงก์ด่วน

ในขั้นตอนนี้ คุณต้องติดตั้งไลบรารี Quicklink ในโปรเจ็กต์ เราได้เพิ่มฟีเจอร์นี้ลงในโปรเจ็กต์แล้วเพื่อความสะดวก นี่คือคำสั่งที่คุณต้องเรียกใช้:

npm install --save quicklink

เปิด src/components/App/index.js เพื่อแก้ไข

ก่อนอื่น ให้นำเข้าองค์ประกอบลำดับที่สูงขึ้น (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'));

ถัดไป ให้สร้างออบเจ็กต์ options หลังการประกาศตัวแปร Blog เพื่อใช้เป็นอาร์กิวเมนต์เมื่อเรียกใช้ quicklink ดังนี้

const options = {
    origins: []
};

สุดท้าย ตัดแต่ละเส้นทางด้วยคอมโพเนนต์ที่มีลำดับสูงกว่า withQuicklink() โดยส่งผ่านพารามิเตอร์ options และคอมโพเนนต์เป้าหมายสำหรับเส้นทางนั้น ดังนี้

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>
);

โค้ดก่อนหน้านี้แนะนำให้ดึงข้อมูลส่วนนั้นล่วงหน้าสำหรับเส้นทางที่รวมด้วย withQuicklink() เมื่อลิงก์เข้ามาในมุมมอง

วัดอีกครั้ง

ทำซ้ำ 6 ขั้นตอนแรกจากวัด อย่าเพิ่งไปที่หน้าบล็อก

เมื่อหน้าแรกโหลดส่วนของเส้นทางนั้นขึ้นมา หลังจากนั้น Quicklink จะดึงข้อมูลส่วนของเส้นทางล่วงหน้าสำหรับลิงก์ในวิวพอร์ต

ระบบจะขอส่วนเหล่านี้ที่ลำดับความสำคัญต่ำสุดและจะไม่บล็อกหน้าเว็บ

ถัดไป:

1. ล้างบันทึกเครือข่ายอีกครั้ง
2. ปิดใช้ช่องทำเครื่องหมายปิดใช้แคช
3. คลิกลิงก์บล็อกเพื่อไปยังหน้านั้น

คอลัมน์ขนาดบ่งบอกว่าส่วนเหล่านี้มาจาก "ดึงข้อมูลแคชล่วงหน้า" แทนเครือข่าย การโหลดส่วนเหล่านี้โดยไม่ใช้ Quicklink จะใช้เวลาประมาณ 580 มิลลิวินาที การใช้ไลบรารีตอนนี้จะใช้เวลา 2 มิลลิวินาที ซึ่งเท่ากับลดลง 99% !