Trang này được dịch bởi Cloud Translation API.

Tăng tốc độ điều hướng trong React bằng Quicklink

Tự động tải trước các đường liên kết trong khung nhìn bằng đường liên kết nhanh cho các ứng dụng một trang React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Tìm nạp trước là một kỹ thuật giúp tăng tốc độ điều hướng bằng cách tải trước các tài nguyên cho trang tiếp theo. Quicklink là một thư viện cho phép bạn triển khai kỹ thuật này trên quy mô lớn, bằng cách tự động tìm nạp trước các đường liên kết khi chúng xuất hiện trong khung hiển thị.

Trong các ứng dụng nhiều trang, thư viện sẽ tìm nạp trước các tài liệu (ví dụ: /article.html) cho các đường liên kết trong khung nhìn để khi người dùng nhấp vào các đường liên kết này, chúng có thể được lấy từ bộ nhớ đệm HTTP.

Ứng dụng trang đơn thường sử dụng một kỹ thuật có tên là phân tách mã dựa trên tuyến. Điều này cho phép trang web chỉ tải mã cho một tuyến đường nhất định khi người dùng chuyển đến tuyến đường đó. Các tệp này (JS, CSS) thường được gọi là "mảnh".

Tuy nhiên, trong những trang web này, thay vì tìm nạp trước tài liệu, hiệu suất lớn nhất đến từ việc tìm nạp trước các đoạn này trước khi trang cần đến.

Để đạt được điều này, bạn sẽ gặp phải một số thách thức:

Không dễ dàng để xác định những đoạn (ví dụ: article.chunk.js) được liên kết với một tuyến đường nhất định (ví dụ: /article) trước khi truy cập vào tuyến đường đó.
Không thể dự đoán tên URL cuối cùng của các đoạn này, vì các trình đóng gói mô-đun hiện đại thường sử dụng hàm băm dài hạn để tạo phiên bản (ví dụ: article.chunk.46e51.js).

Hướng dẫn này giải thích cách Quicklink giải quyết những thách thức này và cho phép bạn thực hiện tính năng tải trước trên quy mô lớn trong các ứng dụng một trang React.

Xác định các đoạn liên kết với từng tuyến

Một trong những thành phần cốt lõi của quicklink là webpack-route-manifest, một trình bổ trợ webpack cho phép bạn tạo từ điển JSON gồm các tuyến và đoạn. Điều này cho phép thư viện biết những tệp nào sẽ cần thiết cho từng tuyến của ứng dụng và tải trước các tệp đó khi các tuyến đó xuất hiện trong chế độ xem.

Sau khi tích hợp trình bổ trợ với dự án, trình bổ trợ sẽ tạo một tệp kê khai JSON liên kết mỗi tuyến với các phần tương ứng:

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

Bạn có thể yêu cầu tệp kê khai này theo hai cách:

Theo URL, ví dụ: https://site_url/rmanifest.json.
Thông qua đối tượng cửa sổ, tại window.__rmanifest.

Tải trước các đoạn cho các tuyến đường trong khung nhìn

Sau khi có tệp kê khai, bước tiếp theo là cài đặt Quicklink bằng cách chạy npm install quicklink.

Sau đó, bạn có thể sử dụng thành phần bậc cao hơn (HOC) withQuicklink() để cho biết một tuyến đường nhất định phải được tìm nạp trước khi đường liên kết vào chế độ xem.

Mã sau đây thuộc về một thành phần App của ứng dụng React hiển thị một trình đơn trên cùng có 4 đường liên kết:

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

Để cho Quicklink biết rằng các tuyến này phải được tìm nạp trước khi chúng xuất hiện trong chế độ xem:

Nhập HOC quicklink ở đầu thành phần.
Gói mỗi tuyến bằng HOC withQuicklink(), truyền thành phần trang và tham số tuỳ chọn vào tuyến đó.

const options = {
  origins: [],
};
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>
);

HOC withQuicklink() sử dụng đường dẫn của tuyến làm khoá để lấy các đoạn liên kết từ rmanifest.json. Khi các đường liên kết xuất hiện trong thành phần hiển thị, thư viện sẽ chèn thẻ <link rel="prefetch"> vào trang cho mỗi phần để có thể tìm nạp trước các đường liên kết đó. Trình duyệt sẽ yêu cầu các tài nguyên được tìm nạp trước ở mức độ ưu tiên thấp nhất và lưu giữ trong Bộ nhớ đệm HTTP trong 5 phút. Sau thời điểm đó, các quy tắc cache-control của tài nguyên sẽ được áp dụng. Do đó, khi người dùng nhấp vào một đường liên kết và chuyển đến một tuyến đường nhất định, các đoạn sẽ được truy xuất từ bộ nhớ đệm, giúp cải thiện đáng kể thời gian hiển thị tuyến đường đó.

Kết luận

Tính năng tìm nạp trước có thể cải thiện đáng kể thời gian tải cho các thao tác điều hướng trong tương lai. Trong các ứng dụng trang đơn React, bạn có thể thực hiện việc này bằng cách tải các phần liên kết với từng tuyến trước khi người dùng truy cập vào các tuyến đó. Giải pháp của Quicklink cho React SPA sử dụng webpack-route-manifest để tạo bản đồ các tuyến đường và đoạn, nhằm xác định những tệp cần tìm nạp trước khi một đường liên kết xuất hiện trong chế độ xem. Việc triển khai kỹ thuật này trên toàn bộ trang web có thể cải thiện đáng kể khả năng điều hướng đến mức khiến người dùng cảm thấy như thao tác được thực hiện tức thì.