Gói ứng dụng Next.js

Cách Next.js tách mã ứng dụng của bạn thành các gói khác nhau và chúng chứa những gì

Khi bạn xem nguồn trang của ứng dụng Next.js, bạn có thể thấy một loạt các tệp JavaScript đang được tải:

Hãy bắt đầu bằng cách đặt mã trong mộtHTML định dạngđể làm cho nó được định dạng tốt hơn, vì vậy con người chúng ta có thể có cơ hội hiểu rõ hơn về nó:

<!DOCTYPE html>
<html>
<head>
<meta charSet=“utf-8” />
<meta name=“viewport” content=“width=device-width,minimum-scale=1,initial-scale=1” />
<meta name=“next-head-count” content=“2” />
<link rel=“preload” href="/_next/static/development/pages/index.js?ts=1572863116051" as=“script” />
<link rel=“preload” href="/_next/static/development/pages/_app.js?ts=1572863116051" as=“script” />
<link rel=“preload” href="/_next/static/runtime/webpack.js?ts=1572863116051" as=“script” />
<link rel=“preload” href="/_next/static/runtime/main.js?ts=1572863116051" as=“script” />
</head>
<body>
<div id="__next">
<div>
<h1>Home page</h1></div>
</div>
<script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script>
<script id=“NEXT_DATA” type=“application/json”>{“dataManager”:"[]",“props”:{“pageProps”:{}},“page”:"/",“query”:{},“buildId”:“development”,“nextExport”:true,“autoExport”:true}</script>
<script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script>
<script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script>
<script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script>
<script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script>
</body>
</html>

Chúng tôi có 4 tệp JavaScript đang được khai báo để tải trước tronghead, sử dụngrel="preload" as="script":

/_next/static/development/pages/index.js(96 LỘC)
/_next/static/development/pages/_app.js(5900 LỘC)
/_next/static/runtime/webpack.js(939 LỘC)
/_next/static/runtime/main.js(12k LỘC)

Điều này cho trình duyệt bắt đầu tải các tệp đó càng sớm càng tốt, trước khi quy trình kết xuất bình thường bắt đầu. Nếu không có những thứ đó, các tập lệnh sẽ được tải với độ trễ bổ sung và điều này cải thiện hiệu suất tải trang.

Sau đó, 4 tệp đó được tải ở cuốibody, cùng với/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js(31k LOC) và đoạn mã JSON đặt một số giá trị mặc định cho dữ liệu trang:

<script id="__NEXT_DATA__" type="application/json">
{
  "dataManager": "[]",
  "props": {
    "pageProps":  {}
  },
  "page": "/",
  "query": {},
  "buildId": "development",
  "nextExport": true,
  "autoExport": true
}
</script>

4 tệp gói được tải đang triển khai một tính năng được gọi làtách mã. Cácindex.jstệp cung cấp mã cần thiết choindexthành phần phục vụ/và nếu chúng tôi có nhiều trang hơn, chúng tôi sẽ có nhiều gói hơn cho mỗi trang, sau đó sẽ chỉ được tải nếu cần - để cung cấp thời gian tải hiệu quả hơn cho trang.

Tải xuống miễn phí của tôiSổ tay Next.js

Gói ứng dụng Next.js

Cách Next.js tách mã ứng dụng của bạn thành các gói khác nhau và chúng chứa những gì

Thêm các bài hướng dẫn tiếp theo: