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 trang đơn 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 tài nguyên cho trang tiếp theo xuống. 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 tài liệu (ví dụ: /article.html) đối với 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 chọn từ bộ nhớ đệm HTTP.

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

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

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

Việc xác định đoạn (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 truy cập vào đoạn đó không hề đơn giản.
Không thể dự đoán tên URL cuối cùng của những phần này, vì các gói mô-đun hiện đại thường sử dụng phương pháp 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 các ứng dụng trang đơn React.

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

Sau khi tích hợp trình bổ trợ với dự án, trình bổ trợ này 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 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 đó, thành phần bậc cao hơn (HOC) withQuicklink() có thể được dùng để cho biết rằng cần tìm nạp trước một tuyến nhất định khi đường liên kết xuất hiện trong 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 xuất hiện trong khung hiển thị:

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 đế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 được liên kết từ rmanifest.json. Về sau, khi các đường liên kết xuất hiện trong khung hiển thị, thư viện sẽ chèn một thẻ <link rel="prefetch"> vào trang cho từng đoạn để có thể tìm nạp trước. Trình duyệt sẽ yêu cầu các tài nguyên đã 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 này, 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 nhất định, các đoạn dữ liệu 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

Tìm nạp trước có thể cải thiện đáng kể thời gian tải cho các lần điều hướng trong tương lai. Trong các ứng dụng trang đơn trong React, bạn có thể thực hiện điều này bằng cách tải các đoạn liên kết với mỗi tuyến đường, trước khi người dùng truy cập vào các đoạ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 và đoạn, 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 xuất hiện trong 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 thành phần điều hướng đến mức hiển thị chúng tức thì.