Codelab นี้จะแสดงวิธีใช้ไลบรารี Quicklink ในการสาธิต SPA ของ React เพื่อแสดงให้เห็นว่าการดึงข้อมูลล่วงหน้าช่วยเพิ่มความเร็วในการไปยังส่วนต่างๆ ในลำดับต่อมาได้อย่างไร
วัดระยะทาง
ก่อนที่จะเพิ่มการเพิ่มประสิทธิภาพ คุณควรวิเคราะห์สถานะปัจจุบันของแอปพลิเคชันก่อน
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
เว็บไซต์ดังกล่าวเป็นการสาธิตง่ายๆ ที่สร้างขึ้นด้วย create-react-app
ทำตามวิธีการต่อไปนี้ในแท็บใหม่ที่เพิ่งเปิด
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
- เลือกช่องทำเครื่องหมายปิดใช้แคช
- ในรายการแบบเลื่อนลงการควบคุม ให้เลือก Fast 3G เพื่อจำลองประเภทการเชื่อมต่อที่ช้า
- โหลดแอปซ้ำ
- พิมพ์
chunk
ในกล่องข้อความตัวกรองเพื่อซ่อนทรัพยากรที่ไม่มีchunk
อยู่ในชื่อ
เว็บไซต์ใช้การแยกรหัสตามเส้นทางซึ่งต้องขอเฉพาะโค้ดที่จำเป็นในตอนต้น
- ล้างคำขอเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ
- ภายในแอป ให้คลิกลิงก์บล็อกเพื่อไปยังหน้านั้น
ระบบจะโหลดส่วน 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 จะดึงข้อมูลส่วนของเส้นทางล่วงหน้าสำหรับลิงก์ในวิวพอร์ต
ระบบจะขอส่วนเหล่านี้ที่ลำดับความสำคัญต่ำสุดและจะไม่บล็อกหน้าเว็บ
ถัดไป:
- ล้างบันทึกเครือข่ายอีกครั้ง
- ปิดใช้ช่องทำเครื่องหมายปิดใช้แคช
- คลิกลิงก์บล็อกเพื่อไปยังหน้านั้น
คอลัมน์ขนาดบ่งบอกว่าส่วนเหล่านี้มาจาก "ดึงข้อมูลแคชล่วงหน้า" แทนเครือข่าย การโหลดส่วนเหล่านี้โดยไม่ใช้ Quicklink จะใช้เวลาประมาณ 580 มิลลิวินาที การใช้ไลบรารีตอนนี้จะใช้เวลา 2 มิลลิวินาที ซึ่งเท่ากับลดลง 99% !