Lớp học lập trình này sẽ hướng dẫn bạn cách triển khai thư viện Quicklink (Đường liên kết nhanh) trong bản minh hoạ React SPA để minh hoạ việc tìm nạp trước giúp tăng tốc các thao tác điều hướng tiếp theo.
Đo
Trước khi thêm tối ưu hoá, bạn nên phân tích trạng thái hiện tại của ứng dụng trước.
- Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn
Toàn màn hình
.
Trang web là một bản minh hoạ đơn giản được xây dựng bằng tính năng create-react-app.
Hoàn thành các hướng dẫn sau trong thẻ mới vừa mở ra:
- Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Mạng.
- Chọn hộp kiểm Tắt bộ nhớ đệm.
- Trong danh sách thả xuống Điều tiết, chọn 3G nhanh để mô phỏng loại kết nối chậm.
- Tải lại ứng dụng.
- Nhập
chunkvào hộp văn bản Filter (Bộ lọc) để ẩn mọi tài nguyên không cóchunktrong tên của tài nguyên đó.
Trang web sử dụng phương pháp phân tách mã dựa trên định tuyến, nhờ đó, ban đầu hệ thống chỉ yêu cầu mã cần thiết.
- Xoá yêu cầu mạng trong Công cụ cho nhà phát triển.
- Trong ứng dụng, hãy nhấp vào đường liên kết Blog để điều hướng đến trang đó.
Các đoạn JS và CSS cho tuyến mới này sẽ được tải để hiển thị trang.
Tiếp theo, bạn sẽ triển khai Đường liên kết nhanh trên trang web này để có thể tìm nạp trước các phần này trên trang chủ, giúp quá trình điều hướng trở nên nhanh hơn.
Điều này cho phép bạn kết hợp những điểm tốt nhất của cả hai kỹ thuật:
- Tách mã dựa trên tuyến đường yêu cầu trình duyệt chỉ tải các phần cần thiết ở mức độ ưu tiên cao hơn tại thời điểm tải trang.
- Quá trình tìm nạp trước yêu cầu trình duyệt tải các phân đoạn cho đường liên kết trong khung nhìn ở mức độ ưu tiên thấp nhất, trong thời gian trình duyệt ở trạng thái rảnh.
Định cấu hình webpack-route-manifest
Bước đầu tiên là cài đặt và định cấu hình webpack-route-manifest, một trình bổ trợ webpack cho phép bạn tạo một tệp kê khai liên kết các tuyến với các phân đoạn tương ứng.
Thông thường, bạn cần phải cài đặt thư viện, nhưng chúng tôi đã thực hiện việc này cho bạn. Dưới đây là lệnh mà bạn cần chạy:
npm install webpack-route-manifest --save-dev
config-overrides.js là một tệp được đặt trong thư mục gốc của dự án, nơi bạn có thể ghi đè hành vi hiện có của cấu hình gói web mà không phải đẩy dự án.
- Để xem nguồn, hãy nhấn vào Xem nguồn.
Mở config-overrides.js để chỉnh sửa và thêm phần phụ thuộc webpack-route-manifest vào đầu tệp:
const path = require('path');
const RouteManifest = require('webpack-route-manifest');
Tiếp theo, hãy định cấu hình trình bổ trợ webpack-route-manifest bằng cách thêm đoạn mã sau
mã ở cuối 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;
};
Đoạn mã mới này sẽ thực hiện những việc sau:
config.resolvekhai báo các biến có tuyến nội bộ đến các trang, thành phần và thành phần.config.plugins.push()tạo một đối tượngRouteManifestvà truyền đối tượng này cấu hình để có thể tạo tệprmanifest.jsondựa trên các tuyến và đoạn của trang web.
Tệp manifest.json sẽ được tạo và cung cấp tại https://site_url/rmanifest.json.
Định cấu hình đường liên kết nhanh
Tại thời điểm này, bạn cần cài đặt thư viện Quicklink trong dự án của mình. Để đơn giản hoá, chúng tôi đã thêm tính năng này vào dự án. Dưới đây là lệnh mà bạn cần chạy:
npm install --save quicklink
Mở src/components/App/index.js để chỉnh sửa.
Trước tiên, hãy nhập Thành phần đơn đặt hàng cao hơn của Đường liên kết nhanh (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'));
Tiếp theo, hãy tạo một đối tượng options sau phần khai báo biến Blog để dùng làm đối số khi gọi quicklink:
const options = {
origins: []
};
Cuối cùng, hãy gói mỗi tuyến bằng thành phần có thứ tự cao hơn withQuicklink(), truyền vào đó một tham số options và thành phần mục tiêu của tuyến đó:
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>
);
Đoạn mã trước đó hướng dẫn tìm nạp trước các phân đoạn cho các tuyến được gói bằng withQuicklink(), khi đường liên kết xuất hiện trong khung hiển thị.
Đo lại
Lặp lại 6 bước đầu tiên trong mục Đo lường. Chưa điều hướng đến trang blog lúc này.
Khi trang chủ tải, các đoạn cho tuyến đường đó sẽ được tải. Sau đó, Quicklink sẽ tìm nạp trước các đoạn của tuyến cho các đường liên kết trong khung nhìn:
Những phần này được yêu cầu ở mức độ ưu tiên thấp nhất mà không chặn trang.
Tiếp theo:
- Xoá lại Nhật ký mạng.
- Bỏ chọn hộp kiểm Disable cache.
- Nhấp vào đường liên kết Blog để chuyển đến trang đó.
Cột Kích thước cho biết các phân đoạn này được truy xuất từ "bộ nhớ đệm tìm nạp trước", thay vì từ mạng. Tải các đoạn này mà không dùng đường liên kết nhanh mất khoảng 580 mili giây. Sử dụng thư viện, giờ đây bạn mất 2 mili giây, nghĩa là giảm 99% !