Các tuyến đường kết xuất trước có React-snap

Bạn không hiển thị phía máy chủ nhưng vẫn muốn tăng tốc độ hiệu suất của trang web React? Hãy thử kết xuất trước!

Houssein Djirdeh

react-snap là bên thứ ba kết xuất trước các trang trên trang web của bạn vào các tệp HTML tĩnh. Điều này có thể cải thiện Hiển thị đầu tiên lần trong ứng dụng của bạn.

Dưới đây là so sánh về cùng một ứng dụng khi và không được kết xuất trước được tải trên kết nối 3G mô phỏng và thiết bị di động:

Một thông tin so sánh về quá trình tải cạnh nhau. Phiên bản sử dụng tính năng kết xuất trước tải nhanh hơn 4,2 giây.

Tại sao tính năng này hữu ích?

Vấn đề chính về hiệu suất với các ứng dụng trang đơn lớn là việc người dùng cần phải đợi(các) gói JavaScript tạo nên trang web hoàn tất tải xuống trước khi họ có thể xem bất kỳ nội dung thực sự nào. Gói càng lớn, người dùng sẽ phải đợi lâu hơn.

Để giải quyết vấn đề này, nhiều nhà phát triển sử dụng phương pháp kết xuất ứng dụng trên máy chủ thay vì chỉ khởi động máy trên trình duyệt. Với mỗi chuyển đổi trang/định tuyến, HTML hoàn chỉnh sẽ được tạo trên máy chủ và được gửi tới cho trình duyệt, giúp giảm thời gian Hiển thị đầu tiên nhưng phải trả chậm hơn Thời gian cho byte đầu tiên.

Kết xuất trước là một kỹ thuật riêng biệt, ít phức tạp hơn so với kỹ thuật máy chủ mà còn cung cấp một cách cải thiện Thời gian hiển thị đầu tiên trong . Sử dụng trình duyệt không có giao diện người dùng hoặc trình duyệt không có giao diện người dùng để tạo tệp HTML tĩnh của mỗi tuyến trong thời gian xây dựng. Các tệp này có thể được gửi cùng với các gói JavaScript cần cho .

phản ứng-bật-tắt

react-snap sử dụng Puppeteer để tạo tệp HTML được kết xuất trước của các tuyến khác nhau trong ứng dụng của bạn. Người nhận để bắt đầu, hãy cài đặt nó dưới dạng phần phụ thuộc phát triển:

npm install --save-dev react-snap

Sau đó, hãy thêm tập lệnh postbuild vào package.json:

"scripts": {
  //...
  "postbuild": "react-snap"
}

Thao tác này sẽ tự động chạy lệnh react-snap mỗi khi có một bản dựng mới của số ứng dụng được tạo ra (npm build).

Việc cuối cùng bạn cần làm là thay đổi cách khởi động ứng dụng. Thay đổi tệp src/index.js thành như sau:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

Thay vì chỉ sử dụng ReactDOM.render để kết xuất phần tử React gốc trực tiếp vào DOM, quá trình này sẽ kiểm tra xem có nút con nào không để xác định xem nội dung HTML có được kết xuất trước (hoặc hiển thị trên máy chủ). Nếu đúng như vậy, ReactDOM.hydrate sẽ được dùng để đính kèm sự kiện trình nghe HTML đã tạo thay vì tạo mới.

Việc tạo ứng dụng giờ đây sẽ tạo ra các tệp HTML tĩnh dưới dạng tải trọng cho từng tuyến đường được thu thập thông tin. Bạn có thể xem tải trọng HTML trông như thế nào chẳng hạn như bằng cách nhấp vào URL của yêu cầu HTML, sau đó nhấp vào Xem trước trong Công cụ của Chrome cho nhà phát triển.

So sánh trước và sau. Cảnh quay sau cho thấy nội dung đã kết xuất.

Flash của nội dung không được định kiểu

Mặc dù HTML tĩnh hiện được hiển thị gần như ngay lập tức, nhưng giao diện này vẫn không được định kiểu theo mặc định, điều này có thể gây ra sự cố hiển thị "flash chưa được định kiểu nội dung" (FOUC). Điều này có thể đặc biệt đáng chú ý nếu bạn đang sử dụng CSS trong JS thư viện để tạo bộ chọn vì gói JavaScript sẽ phải kết thúc trước khi áp dụng bất kỳ kiểu nào.

Để giúp ngăn chặn điều này, CSS quan trọng hay số lượng CSS tối thiểu cần thiết để trang ban đầu hiển thị, có thể được đưa trực tiếp vào <head> của tài liệu HTML. react-snap sử dụng một thư viện khác của bên thứ ba trong hood, minimalcss, để trích xuất bất kỳ CSS quan trọng cho các tuyến khác nhau. Bạn có thể bật tính năng này bằng cách chỉ định sau đây trong tệp package.json:

"reactSnap": {
  "inlineCss": true
}

Giờ đây, bạn có thể xem trước phản hồi trong Công cụ của Chrome cho nhà phát triển để hiển thị trang được tạo kiểu có cùng dòng CSS quan trọng.

So sánh trước và sau. Cảnh quay sau cho thấy nội dung đã kết xuất và được tạo kiểu do CSS quan trọng cùng dòng.

Kết luận

Nếu bạn không phải là các tuyến kết xuất phía máy chủ trong ứng dụng của mình, hãy sử dụng react-snap để kết xuất trước HTML tĩnh cho người dùng của bạn.

  1. Cài đặt phần này dưới dạng phần phụ thuộc phát triển và bắt đầu với phần phụ thuộc mặc định phần cài đặt.
  2. Sử dụng tuỳ chọn inlineCss thử nghiệm để chèn CSS quan trọng vào cùng dòng nếu nó hoạt động cho trang web của bạn.
  3. Nếu bạn đang sử dụng tính năng chia tách mã ở cấp thành phần trong bất kỳ tuyến nào, hãy cẩn thận để không hiển thị trước trạng thái đang tải cho người dùng của bạn. Chiến lược phát hành đĩa đơn react-snap README sẽ trình bày chi tiết hơn về vấn đề này.