Lớp học lập trình này cho bạn biết cách triển khai thư viện Quicklink trong bản minh hoạ React SPA để minh hoạ cách tìm nạp trước giúp tăng tốc các lần điều hướng tiếp theo.
Đo
Trước khi thêm các biện pháp 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.
- Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào
Fullscreen
(Toàn màn hình).
Trang web này là một bản minh hoạ đơn giản bằng ứng dụng tạo-phản ứng.
Hoàn thành các hướng dẫn sau trong thẻ mới vừa mở:
- 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 lưu, 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 bộ lọc để ẩn mọi tài nguyên không cóchunktrong tên.
Trang web sử dụng tính năng phân tách mã dựa trên tuyến, nhờ đó chỉ yêu cầu mã cần thiết ở đầu.
- Xoá các yêu cầu mạng trong Công cụ cho nhà phát triển.
- Trong ứng dụng, nhấp vào đường liên kết Blog để chuyển đến trang đó.
Các phân đoạn JS và CSS cho tuyến mới sẽ được tải để hiển thị trang.
Tiếp theo, bạn sẽ triển khai Đường liên kết nhanh trong trang web này để có thể tìm nạp trước các phần này trong trang chủ, giúp quá trình điều hướng nhanh hơn.
Cách 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:
- Việc phân tách mã dựa trên tuyến sẽ 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 trong thời gian tải trang.
- Quá trình tìm nạp trước sẽ yêu cầu trình duyệt tải các phần cho các đường liên kết trong khung nhìn ở mức ưu tiên thấp nhất, trong thời gian không hoạt động của trình duyệt.
Đị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 đoạn tương ứng.
Thông thường, bạn cần 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 tại của cấu hình gói web mà không cần 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 ở đầ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 mã sau vào 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;
};
Mã mới có những chức năng 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ượngRouteManifestrồi truyền đối tượng đó 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 API 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 thứ tự cao hơn Quicklink (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 từng tuyến bằng thành phần có thứ tự cao hơn withQuicklink(), truyền vào đó tham số options và thành phần mục tiêu cho 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>
);
Mã trước đó hướng dẫn tìm nạp trước các phần cho các tuyến được gói bằng withQuicklink(), khi đường liên kết đến khung hiển thị.
Đo lại
Lặp lại 6 bước đầu tiên trong phần Đo lường. Chưa chuyển đến trang blog.
Khi trang chủ tải các đoạn cho tuyến đó thì sẽ được tải. Sau đó, Đường liên kết nhanh sẽ tìm nạp trước các đoạn của tuyến đường cho các đường liên kết trong khung nhìn:
Các phân đoạ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.
- Tắt hộp kiểm Tắt bộ nhớ đệm.
- Nhấp vào đường liên kết Blog để chuyển đến trang đó.
Cột Size (Kích thước) cho biết các phần này được truy xuất từ "bộ nhớ đệm tìm nạp trước", thay vì từ mạng. Quá trình 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 hiện chỉ mất 2 mili giây, tức là giảm 99% !