Các mô-đun tải chậm trong Next.js

Cách tải mô-đun lười biếng trong ứng dụng Next.js của bạn

Có thể phân tích trực quan một gói là điều tuyệt vời vì chúng tôi có thể tối ưu hóa ứng dụng của mình rất dễ dàng.

Giả sử chúng ta cần tải thư viện Moment trong các bài đăng trên blog của mình. Chạy:

npm install moment

để đưa nó vào dự án.

Bây giờ hãy mô phỏng thực tế chúng ta cần nó trên hai tuyến đường khác nhau:/blogvà/blog/[id].

Chúng tôi nhập nó vàopages/blog/[id].js:

import moment from 'moment'
…
const Post = props => {
return (
<div>
<h1>{props.post.title}</h1>
<p>Published on {moment().format(‘dddd D MMMM YYYY’)}</p>
<p>{props.post.content}</p>
</div>
)
}

Tôi chỉ thêm ngày hôm nay để làm ví dụ.

Điều này sẽ bao gồm Moment.js trong gói trang bài đăng blog, như bạn có thể thấy bằng cách chạynpm run analyze:

Thấy rằng bây giờ chúng ta có một mục màu đỏ trong/blog/[id], tuyến đường mà chúng tôi đã thêm Moment.js vào!

Nó đã tăng từ ~ 1kB đến 350kB, một vấn đề khá lớn. Và điều này là do bản thân thư viện Moment.js là 349kB.

Hình ảnh hóa các gói ứng dụng khách giờ đây cho chúng ta thấy rằng gói lớn hơn là trang một, điều mà trước đây là rất ít. Và 99% mã của nó là Moment.js.

Mỗi khi chúng tôi tải một bài đăng trên blog, chúng tôi sẽ chuyển tất cả mã này cho khách hàng. Mà không phải là lý tưởng.

Một cách khắc phục là tìm kiếm một thư viện có kích thước nhỏ hơn, vì Moment.js không được biết đến là nhẹ (đặc biệt là khi có tất cả các ngôn ngữ được bao gồm), nhưng hãy giả sử vì lợi ích của ví dụ mà chúng ta phải sử dụng nó.

Thay vào đó, những gì chúng ta có thể làm là tách tất cả mã Moment trong mộtgói riêng biệt.

Làm sao? Thay vì nhập Moment ở cấp thành phần, chúng tôi thực hiện nhập không đồng bộ bên tronggetInitialPropsvà chúng tôi tính toán giá trị để gửi đến thành phần. Hãy nhớ rằng chúng ta không thể trả về các đối tượng phức tạp bên tronggetInitialProps()đối tượng trả về, vì vậy chúng tôi tính toán ngày bên trong nó:

import posts from '../../posts.json'
const Post = props => {
return (
<div>
<h1>{props.post.title}</h1>
<p>Published on {props.date}</p>
<p>{props.post.content}</p>
</div>
)
}
Post.getInitialProps = async ({ query }) => {
const moment = (await import(‘moment’)).default()
return {
date: moment.format(‘dddd D MMMM YYYY’),
post: posts[query.id]
}
}
export default Post

Xem cuộc gọi đặc biệt đó tới.default()sauawait import? Nó cần thiết để tham chiếu đến xuất mặc định trong nhập động (xemhttps://v8.dev/features/dynamic-import)

Bây giờ nếu chúng ta chạynpm run analyzemột lần nữa, chúng ta có thể thấy điều này:

Của chúng tôi/blog/[id]gói lại rất nhỏ, vì Moment đã được chuyển sang tệp gói của riêng nó, được tải riêng bởi trình duyệt.

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

Các mô-đun tải chậm trong Next.js

Cách tải mô-đun lười biếng trong ứng dụng Next.js của bạn

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