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ìm nạp 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à kỹ thuật tăng tốc độ điều hướng bằng cách tải trước tài nguyên cho trang tiếp theo xuống. Liên kết nhanh 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 đi vào khung hiển thị.

Trong ứng dụng nhiều trang, thư viện tìm nạp trướ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, thư viện có thể được lấy từ bộ nhớ đệm HTTP.

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

Như đã nói, trong các trang web này, thay vì tìm nạp trước tài liệu, hiệu suất tốt nhất đến từ việc tìm nạp trước các phân đoạn này trước khi trang cần chúng.

Việc đạt được điều này cũng đặt ra một số thách thức:

Việc xác định đoạn nào (ví dụ: article.chunk.js) được liên kết với một tuyến nhất định (ví dụ: /article) trước khi hạ cánh là không hề dễ dàng.
Không thể dự đoán tên URL cuối cùng của các phân đoạn này vì các gói mô-đun hiện đại thường sử dụng phương thức 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 tìm nạp trước trên quy mô lớn trong ứng dụng trang đơn React.

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

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 cho các tuyến và đoạn. Điều này cho phép thư viện biết được tệp nào sẽ cần thiết trong mỗi tuyến của ứng dụng và tìm nạp trước chúng khi các tuyến này đi vào khung hiển thị.

Sau khi tích hợp trình bổ trợ với dự án, dự án sẽ tạo một tệp kê khai JSON liên kết từng tuyến với các phân đoạ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',
    },
  ],
}

Có thể yêu cầu tệp kê khai này theo 2 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ìm nạp trước các đoạn cho 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ể dùng withQuicklink() của thành phần thứ tự cao hơn (HOC) để cho biết rằng một tuyến nhất định cần được tìm nạp trước khi đường liên kết đến khung hiển thị.

Mã sau đây thuộc về thành phần App của ứng dụng React hiển thị 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 sẽ được tìm nạp trước khi chúng đi vào khung hiển thị:

Nhập HOC quicklink ở đầu thành phần.
Gói từng 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>
);

withQuicklink() HOC 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. Trong trường hợp này, khi các đường liên kết đi vào khung hiển thị, thư viện sẽ chèn một thẻ <link rel="prefetch"> vào trang cho từng phần để chúng có thể được tìm nạp trước. Tài nguyên được tìm nạp trước sẽ được trình duyệt yêu cầu ở 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à di chuyển đến một tuyến nhất định, các phần sẽ được truy xuất từ bộ nhớ đệm, giúp cải thiện đáng kể thời gian cần thiết để kết xuất tuyến đường đó.

Kết luận

Việc tìm nạp trước có thể giúp 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 đoạn được liên kết với mỗi tuyến, trước khi người dùng truy cập vào đó. Giải pháp của Quicklink SPA cho React SPA sử dụng webpack-route-manifest để tạo bản đồ các tuyến đường và đoạn dữ liệu nhằm xác định tệp nào cần tìm nạp trước, khi một đường liên kết đi vào khung hiển thị. Việc triển khai kỹ thuật này trên toàn bộ trang web của bạn có thể cải thiện đáng kể các thao tác điều hướng đến mức làm cho chúng xuất hiện ngay lập tức.