Cách tối ưu hóa hiệu suất xây dựng trong ứng dụng Next.js
Tìm hiểu cách cải thiện hiệu suất xây dựng của ứng dụng Next.js bằng nhiều kỹ thuật khác nhau, bao gồm tối ưu hóa hình ảnh, phân tách mã và bộ nhớ đệm.
Khi các ứng dụng web hiện đại phát triển, việc duy trì hiệu suất của chúng ngày càng trở nên khó khăn. Đó là lý do tại sao việc tối ưu hóa hiệu suất ứng dụng ngay từ đầu là điều cần thiết.
Với sự ra đời của các framework như Next.js, một framework React phổ biến, bạn có thể tạo một ứng dụng web đầy đủ chức năng chỉ trong vài phút. Next.js cung cấp nhiều tính năng sẵn có, bao gồm kết xuất phía máy chủ, tạo trang tĩnh và định tuyến dựa trên tệp. Nó cũng cung cấp nhiều tối ưu hóa sẵn có để cải thiện hiệu suất ứng dụng.
Trong bài viết này, chúng ta sẽ xem xét một số phương pháp để tối ưu hóa hiệu suất xây dựng của ứng dụng Next.js của bạn.
Hiệu suất xây dựng là gì?
Hiệu suất xây dựng là thời gian cần thiết để xây dựng ứng dụng của bạn: nghĩa là biên dịch và tạo các tệp tĩnh. Hiệu suất xây dựng nhanh cho phép bạn lặp lại nhanh hơn và cung cấp ứng dụng của mình cho người dùng nhanh hơn.
Nhiều yếu tố có thể ảnh hưởng đến hiệu suất xây dựng ứng dụng của bạn, bao gồm kích thước và số lượng phần phụ thuộc, trang và thành phần. Nếu hiệu suất xây dựng ứng dụng của bạn chậm thì hiệu suất tổng thể của ứng dụng sẽ bị ảnh hưởng, từ đó ảnh hưởng đến trải nghiệm người dùng.
Theo mặc định, Next.js cung cấp nhiều tính năng tối ưu hóa để cải thiện hiệu suất xây dựng ứng dụng. Ngoài ra, có nhiều cách tiếp cận khác mà bạn có thể thực hiện để cải thiện hơn nữa hiệu suất xây dựng ứng dụng của mình. Chúng ta hãy xem xét.
Sử dụng phiên bản ổn định mới nhất của Next.js
Cách dễ nhất để cải thiện hiệu suất xây dựng ứng dụng Next.js của bạn là sử dụng phiên bản ổn định mới nhất của Next.js. Nhóm đằng sau Next.js không ngừng làm việc để cải thiện hơn nữa khuôn khổ cũng như bổ sung các tính năng và tối ưu hóa mới. Vì vậy, điều quan trọng là sử dụng bản phát hành ổn định mới nhất.
Theo văn bản này, phiên bản ổn định mới nhất của Next.js là v13.4. Bạn có thể kiểm tra phiên bản ổn định mới nhất của Next.js tại đây và có thể nâng cấp ứng dụng của mình lên phiên bản ổn định mới nhất của Next.js bằng cách chạy lệnh sau:
npm install next@latestTận dụng tối ưu hóa sẵn có của Next.js
Next.js cung cấp một số tính năng tối ưu hóa sẵn có mà bạn có thể sử dụng để cải thiện hiệu suất xây dựng ứng dụng của mình, chẳng hạn như tối ưu hóa tĩnh tự động, tách mã, tối ưu hóa hình ảnh, tối ưu hóa phông chữ và tìm nạp trước, cũng như tối ưu hóa tập lệnh của bên thứ ba.
Tối ưu hóa tĩnh tự động
Nếu không có tuyến động nào trong ứng dụng của bạn, Next.js sẽ tự động hiển thị ứng dụng của bạn dưới dạng HTML tĩnh theo mặc định. Nếu cả hai đều getServerSidePropskhông getInitialPropsđược xác định, Next.js sẽ không cần hiển thị lại trang theo mọi yêu cầu vì các trang sẽ được tạo một lần và phân phát cho tất cả người dùng.
Tối ưu hóa này cải thiện hiệu suất ứng dụng bằng cách giảm thời gian tạo HTML tĩnh cho ứng dụng. Tối ưu hóa tĩnh là hoàn hảo cho các ứng dụng web không có tuyến đường động và các trang chỉ thỉnh thoảng thay đổi.
Đối với các trang có tuyến động hoặc tìm nạp dữ liệu từ API bên ngoài, việc sử dụng Next.js getServerSidePropshoặc getInitialPropscác hàm cho phép bạn kết xuất trước trang trên máy chủ và tìm nạp dữ liệu cần thiết trước khi gửi HTML đến máy khách. Điều này giúp cải thiện thời gian tải ban đầu và hiệu suất tổng thể của trang.
Tự động tách mã
Tách mã là quá trình chia mã của bạn thành các phần nhỏ hơn. Mỗi đoạn chứa mã cần thiết cho một trang cụ thể.
Theo mặc định, Next.js sẽ tự động chia mã của bạn thành các đoạn nhỏ hơn để giảm thời gian tải mã cho ứng dụng của bạn. Điều này có nghĩa là Next.js sẽ chỉ tải mã cần thiết cho trang cụ thể đó trong lần tải trang đầu tiên.
Để tận dụng tối đa lợi ích của việc tách mã, bạn có thể sử dụng tính năng nhập động để chỉ tải mã cho một trang cụ thể khi cần. Việc tách mã rất hữu ích cho các trang được truy cập không thường xuyên.
Tối ưu hóa hình ảnh tự động
Bạn có thể sử dụng next/imagethành phần này, là <img>phần tử có sẵn của Next.js, để tự động tối ưu hóa hình ảnh của bạn bằng cách tải từng phần và bằng cách tự động thay đổi kích thước hoặc nén hình ảnh dựa trên kích thước thiết bị.
Tải chậm là quá trình chỉ tải hình ảnh khi cần thiết: nghĩa là khi chúng hiển thị trên màn hình. Tối ưu hóa hình ảnh tự động giúp giảm thời gian tải hình ảnh trong ứng dụng của bạn, từ đó cải thiện hiệu suất.
Bạn cũng có thể chỉ định rằng một số hình ảnh sẽ được tải ban đầu bằng cách đặt priorityprop trên next/imagethành phần thành true. Next.js sẽ ưu tiên tải những hình ảnh cần thiết mà bạn muốn tải trước.
Tối ưu hóa phông chữ tự động
Next.js sử dụng next/fontthành phần này để tối ưu hóa phông chữ. Thành phần này bao gồm tính năng tự lưu trữ tự động sẵn có cho Google Fonts. Bạn có thể sử dụng Google Fonts trong ứng dụng của mình mà không phải lo lắng về việc thay đổi bố cục hoặc nhấp nháy văn bản vô hình (FOIT).
Next.js sẽ tự động tải xuống các phông chữ và phân phát chúng từ ứng dụng của bạn. Các phông chữ sẽ có sẵn cho người dùng của bạn, ngay cả khi ngoại tuyến. Điều này giúp giảm thời gian tải phông chữ trong ứng dụng của bạn, từ đó cải thiện hiệu suất ứng dụng.
Tự động tìm nạp trước
Tìm nạp trước đề cập đến việc tải mã cho một trang cụ thể trước khi người dùng điều hướng đến trang đó. Theo mặc định, khi bạn sử dụng Linkthành phần từ next/link, Next.js sẽ tự động tìm nạp trước mã cho trang mà người dùng có thể sẽ truy cập tiếp theo.
Khi trang đầu tiên được tải, các liên kết hiển thị trên màn hình sẽ được tìm nạp trước. Điều này rất hữu ích cho các trang được truy cập thường xuyên.
Đối với các trang được truy cập ít thường xuyên hơn, bạn có thể sử dụng prefetchprop trên Linkthành phần và đặt nó thành falsetắt tính năng tìm nạp trước cho trang đó. Với cách tiếp cận này, mã của trang sẽ chỉ được tìm nạp trước khi người dùng di chuột qua liên kết.
Tùy thuộc vào trường hợp sử dụng, bạn có thể cải thiện hiệu suất ứng dụng của mình bằng prefetch, giảm thời gian tải mã cho trang tiếp theo.
Tối ưu hóa tập lệnh của bên thứ ba
Next.js cung cấp một next/scriptthành phần để tải tập lệnh của bên thứ ba. Theo mặc định, thành phần này cho phép bạn tải tập lệnh sớm nhưng sau khi một số nội dung quan trọng đã được tải để ngăn chặn việc tải trang.
Next.js cũng đảm bảo rằng tập lệnh chỉ được tải một lần, điều này có lợi cho các tập lệnh được sử dụng trên nhiều trang trong ứng dụng của bạn. Ngay cả khi người dùng điều hướng đến một trang không sử dụng tập lệnh, tập lệnh sẽ không được tải lại khi người dùng điều hướng đến trang sử dụng tập lệnh đó.
Tối ưu hóa đường dẫn hiển thị quan trọng
Đường dẫn hiển thị quan trọng (CRP) đề cập đến các bước trình duyệt thực hiện để chuyển đổi HTML, CSS và JavaScript thành trang web được hiển thị. Tối ưu hóa CRP là điều cần thiết để cải thiện thời gian tải ban đầu và hiệu suất cảm nhận của ứng dụng web.
Tối ưu hóa CRP liên quan đến việc tối ưu hóa việc phân phối và hiển thị nội dung quan trọng nhất cho người dùng càng nhanh càng tốt. Bằng cách giảm thiểu thời gian trình duyệt hiển thị trang, bạn có thể cải thiện hiệu suất cảm nhận và cung cấp trải nghiệm người dùng tốt hơn. Chúng ta hãy xem xét kỹ hơn một số kỹ thuật để tối ưu hóa việc hiển thị đường dẫn quan trọng.
Tối ưu hóa sơn có nội dung lớn
Hiển thị nội dung lớn (LCP) là chỉ số Core Web Vitals đo thời gian cần thiết để phần tử nội dung lớn nhất trong khung nhìn hiển thị. LCP rất quan trọng vì nó đo tốc độ tải cảm nhận của ứng dụng của bạn.
Các công cụ như Lighthouse và PageSpeed Insights có thể giúp xác định các cơ hội cải thiện LCP cho ứng dụng của bạn. Một số cách để nâng cao LCP của ứng dụng bao gồm:
- Giảm thiểu tài nguyên chặn hiển thị : Tài nguyên chặn hiển thị, như tệp CSS và JavaScript, chặn trình duyệt hiển thị trang. Giảm thiểu số lượng tài nguyên chặn hiển thị có thể cải thiện LCP của ứng dụng của bạn
- Giảm thiểu công việc của luồng chính : Luồng chính của ứng dụng phân tích cú pháp HTML, thực thi JavaScript và hiển thị trang. Giảm thiểu số lượng công việc được thực hiện trên luồng chính có thể cải thiện LCP của ứng dụng
- Giảm thời gian thực thi JavaScript : JavaScript là ngôn ngữ đơn luồng, nghĩa là mỗi lần chỉ thực thi một tác vụ. Giảm số lượng JavaScript được thực thi trên luồng chính có thể cải thiện LCP của ứng dụng của bạn
- Sử dụng asyncvànext/script component to load scripts : Cho phép trình duyệt tải xuống tập lệnh không đồng bộ mà không chặn hiển thị trang cũng có thể giúp cải thiện LCP của ứng dụng của bạn
Sử dụng API quan sát giao lộ
API Intersection Observer là API trình duyệt cho phép chúng tôi quan sát các thay đổi trong giao điểm của phần tử đích với phần tử tổ tiên của nó hoặc khung nhìn của tài liệu cấp cao nhất. API này hữu ích cho việc lười tải hình ảnh và nội dung khác không hiển thị trên màn hình. Bạn có thể sử dụng API Intersection Observer để cải thiện LCP của ứng dụng bằng cách chỉ tải nội dung khi nội dung đó hiển thị trên màn hình.
Tối ưu hóa và thu nhỏ CSS và JS
Tối ưu hóa và thu nhỏ CSS và JavaScript sẽ loại bỏ các ký tự không cần thiết khỏi tệp CSS và JavaScript của bạn mà không thay đổi chức năng của chúng. Tránh sử dụng bộ tiền xử lý CSS để thêm các ký tự không cần thiết vào tệp CSS của bạn.
Bạn cũng có thể sử dụng các công cụ như PurgeCSS để xóa CSS không sử dụng khỏi ứng dụng của mình. Điều này sẽ giảm kích thước tệp CSS, cải thiện LCP cho ứng dụng của bạn. Tương tự, tránh sử dụng các ký tự không cần thiết trong tệp JavaScript của bạn. Các công cụ như Terser cũng sẽ giúp bạn thu nhỏ các tệp JavaScript, giảm kích thước của chúng và cải thiện LCP của ứng dụng.
Cải thiện hiệu suất mạng
Cải thiện hiệu suất mạng là một cách khác để giảm hiệu suất xây dựng ứng dụng Next.js của bạn. Hiệu suất mạng là thời gian cần thiết để trình duyệt tải xuống các tài nguyên cần thiết cho ứng dụng của bạn. Hãy cùng xem xét một số chiến lược để cải thiện hiệu suất mạng của ứng dụng của bạn.
Bộ nhớ đệm
Bộ nhớ đệm lưu trữ tài nguyên cho ứng dụng của bạn trong trình duyệt. Việc triển khai các chiến lược bộ nhớ đệm như tiêu đề Kiểm soát bộ đệm và nhân viên dịch vụ có thể giúp cải thiện hiệu suất mạng cho ứng dụng của bạn.
Tiêu đề Kiểm soát bộ đệm cho phép bạn chỉ định các chính sách bộ đệm của trình duyệt, như thời gian lưu vào bộ nhớ đệm tài nguyên và thời điểm xác thực lại tài nguyên. Next.js cho phép bạn đặt tiêu đề Kiểm soát bộ đệm cho ứng dụng của mình bằng cách sử dụng headersthuộc tính trong next.config.jstệp.
Nhân viên dịch vụ cho phép bạn lưu trữ tài nguyên vào bộ đệm trong trình duyệt và phân phát chúng từ bộ đệm khi người dùng ngoại tuyến. Điều này giúp giảm thời gian tải tài nguyên trong ứng dụng của bạn, từ đó cải thiện hiệu suất mạng của ứng dụng.
Tích hợp CDN
Mạng phân phối nội dung (CDN) là mạng lưới các máy chủ được phân phối trên toàn cầu. Bạn lưu trữ nội dung tĩnh của mình trên các máy chủ này và chúng sẽ được phân phối tới người dùng dựa trên vị trí.
Bạn có thể lưu vào bộ nhớ đệm các nội dung tĩnh và phân phối chúng từ các vị trí biên bằng CDN để phân phối toàn cầu nhanh hơn. Next.js cũng cung cấp hỗ trợ sẵn có cho Vercel Edge Network . Nếu bạn sử dụng Vercel để triển khai, mạng Vercel Edge sẽ tự động trở thành CDN.
Sử dụng phân tích bó
Phân tích gói là một cách tiếp cận để phân tích ứng dụng của bạn nhằm xác định các cơ hội giảm kích thước của nó. Với công cụ phân tích gói, bạn có thể xem mô-đun nào trong gói ứng dụng của mình chiếm nhiều dung lượng, xác định các tệp không cần thiết và tìm cách giảm kích thước của các tệp đó hoặc xóa những tệp không sử dụng.
Một số công cụ để phân tích kích thước ứng dụng Next.js của bạn bao gồm next/bundle-analyzer, webpack-bundle-analyzer và next-bundle-analyzer.
Tận dụng quản lý phụ thuộc
Quản lý các phần phụ thuộc trong ứng dụng của bạn là một cách khác để cải thiện hiệu suất xây dựng của ứng dụng. Bằng cách loại bỏ các phần phụ thuộc không sử dụng và tối ưu hóa những phần phụ thuộc đang được sử dụng, bạn có thể nâng cao hiệu suất xây dựng của nó.
Loại bỏ các phụ thuộc không sử dụng
Các công cụ quản lý phần phụ thuộc, như depcheck , có thể giúp xác định các phần phụ thuộc không được sử dụng. Sau đó, bạn có thể gỡ cài đặt các phần phụ thuộc không sử dụng, giảm kích thước ứng dụng và cải thiện hiệu suất xây dựng của ứng dụng.
Cây rung chuyển
Rung cây là quá trình loại bỏ mã không sử dụng hoặc mã chết khỏi gói ứng dụng cuối cùng của bạn. sử dụng các mô-đun ES6 thay vì CommonJS để tận dụng sự hỗ trợ sẵn có của Next.js cho việc rung cây. Ví dụ: sử dụng câu lệnh importvà exportthay vì câu lệnh requirevà module.exports.
Nhập khẩu cụ thể
Khi nhập mô-đun, bạn chỉ nên nhập những phần bạn cần. Sẽ rất hữu ích khi ghi nhớ phương pháp này đối với các mô-đun có nhiều lần xuất.
Ví dụ: thay vì nhập toàn bộ mô-đun như thế này:
import { Button, Card, Input } from "react-bootstrap";Bạn chỉ có thể nhập những phần của mô-đun mà bạn cần, như sau:
import Button from "react-bootstrap/Button";
import Card from "react-bootstrap/Card";
import Input from "react-bootstrap/Input";Loại trừ các thư mục hoặc tập tin không cần thiết
Một cách khác để tối ưu hóa hiệu suất xây dựng của ứng dụng Next.js của bạn là loại trừ các thư mục hoặc tệp không cần thiết khỏi quá trình xây dựng. Bạn có thể giảm thời gian xây dựng và cải thiện hiệu suất tổng thể bằng cách loại trừ các thư mục hoặc tệp cụ thể không cần thiết để hiển thị ứng dụng của bạn.
Bạn có thể sử dụng excludetùy chọn trong next.config.jstệp để định cấu hình quá trình xây dựng nhằm loại trừ các thư mục hoặc tệp cụ thể. Điều này cho phép bạn chỉ định các mẫu hoặc đường dẫn cần bỏ qua trong quá trình xây dựng.
Ví dụ: bạn có thể loại trừ các thư mục chứa tệp phương tiện lớn, tài liệu hoặc nội dung dành riêng cho việc phát triển không cần thiết cho quá trình xây dựng sản xuất:
module.exports = {
exclude: ["**/media/**", "**/docs/**", "**/dev/**"],
};Bằng cách loại trừ các tài nguyên không cần thiết khỏi bản dựng, bạn sẽ giảm lượng dữ liệu cần được xử lý và đóng gói, dẫn đến thời gian xây dựng nhanh hơn và sử dụng tài nguyên hiệu quả hơn. Kỹ thuật tối ưu hóa này thuận lợi khi xử lý các dự án lớn hoặc khi bạn có các thư mục hoặc tệp cụ thể không đóng góp vào quá trình hiển thị.
Ví dụ tối ưu hóa hiệu suất Next.js
Để chứng minh tác động đáng kể mà một số phương pháp trên có thể mang lại đối với hiệu suất của bản dựng, tôi đã tạo một ứng dụng web Next.js đơn giản. Bạn có thể tìm thấy ứng dụng mẫu trên GitHub . Ứng dụng này có bốn trang: home, form, accordionvà carousel.
Tôi đã tối ưu hóa hoàn toàn mainnhánh của ứng dụng web. Sau đó, tôi xây dựng các nhánh khác, chẳng hạn như unused-dependenciesvà unnecessary-imports, để so sánh chúng với mainnhánh.
Chúng ta sẽ chạy yarn buildtrong terminal trên mainnhánh để xây dựng ứng dụng. Dưới đây, bạn có thể thấy kích thước bản dựng cho mỗi trang:
Ví dụ về ứng dụng Next.js,main branch build.
Tiếp theo, tôi cài đặt một số phần phụ thuộc không cần thiết trong unused-dependenciesnhánh:
- react-icons: Dự án chỉ cần một biểu tượng và sử dụng SVG sẽ tốt hơn
- react-accessible-accordion: Việc chế tạo một chiếc đàn accordion tùy chỉnh thật dễ dàng và có kích thước nhỏ hơn
- react-hook-form: Đối với một biểu mẫu đơn giản, gói này là quá mức cần thiết
Bây giờ hãy chạy yarn buildtrong terminal của nhánh này. Dưới đây, bạn có thể thấy kích thước xây dựng của các trang:
Ví dụ về ứng dụng Next.js, unused-dependenciesbản dựng chi nhánh.
Nếu so sánh cả hai bản dựng, bạn sẽ nhận thấy sự khác biệt lớn về kích thước trang. Trang formtăng từ 844Bđến 8.416kBvà accordiontrang tăng từ 1.39kBđến 5.004kB. Hiểu khi nào nên sử dụng gói hoặc phần phụ thuộc có thể rất quan trọng trong việc xây dựng hiệu suất.
Bây giờ, hãy so sánh unnecessary-importschi nhánh với mainchi nhánh. Trong nhánh mới này, tôi đã nhập một số tệp CSS vào accordionrồi chạy yarn build. Kích thước trang accordion tăng từ 1.39kBlên 5.26kB.
Ví dụ về ứng dụng Next.js, bản dựng nhánh nhập khẩu không cần thiết.
Hiệu suất xây dựng sẽ còn đáng kể hơn nếu các phương pháp tối ưu hóa này được áp dụng cho cơ sở mã phức tạp hơn.
Phần kết luận
Tối ưu hóa hiệu suất xây dựng của ứng dụng Next.js của bạn là rất quan trọng để mang lại trải nghiệm người dùng nhanh và nhạy. Tận dụng tối ưu hóa Next.js sẵn có và các kỹ thuật khác như tối ưu hóa đường dẫn kết xuất quan trọng, cải thiện hiệu suất mạng và tận dụng quản lý phụ thuộc để cải thiện hiệu suất xây dựng ứng dụng của bạn. Việc giám sát và kiểm tra liên tục ứng dụng của bạn sẽ giúp xác định các khu vực cần cải thiện và đảm bảo cải tiến hiệu suất liên tục.
Nguồn: https://blog.logrocket.com
#nextjs #react #reactjs