Mở rộng quy mô một ứng dụng React tự nó là một nhiệm vụ. Các nhà phát triển của chúng tôi cần xem xét nhiều góc của ứng dụng để tối ưu hóa nhằm cải thiện hiệu suất và cung cấp trải nghiệm người dùng tuyệt vời. Bài viết này giúp bạn về các kỹ thuật tối ưu hóa chính và các phương pháp viết mã mà bạn có thể kết hợp vào ứng dụng React của mình.

Chúng tôi phải ngừng tối ưu hóa cho lập trình viên và bắt đầu tối ưu hóa cho người dùng.
- Jeff Atwood, Coding Horror

Phân nhánh logic nghiệp vụ từ thành phần giao diện người dùng

Giữ sạch các thành phần React với tất cả logic nghiệp vụ trong một tệp riêng biệt có thể giúp cải thiện chất lượng mã, khả năng bảo trì và khả năng đọc.
Hãy xem một ví dụ về việc gửi email để hiểu làm thế nào có thể đạt được điều này.

Trong ví dụ trên, bạn có thể thấy cả phần tử giao diện người dùng và logic nghiệp vụ để gửi và hiển thị email người dùng đã nhập, nằm trong một thành phần duy nhất. Đây có thể là một ví dụ rất nhỏ, nhưng khi xây dựng một thành phần lớn với nhiều logic nghiệp vụ, việc tách cả hai sẽ giúp hiểu rõ hơn về mã và khả năng mở rộng.

Bây giờ chúng ta hãy đi sâu vào cách chúng ta có thể tách logic nghiệp vụ khỏi thành phần giao diện người dùng.

Ở đây chúng tôi đã tách thành phần giao diện người dùng và logic nghiệp vụ để mang lại khả năng hiển thị rõ ràng để hiểu.

Chia nhỏ các thành phần nặng thành nhiều thành phần phụ

Khi ứng dụng phát triển, nhiều phần tử giao diện người dùng được thêm vào thành phần, cuối cùng, mã trở nên dài dòng và vụng về. Để duy trì khả năng đọc mã tốt hơn, cần phải chia nhỏ thành phần mẹ thành một hoặc nhiều thành phần con (thành phần con). Điều này cũng sẽ cải thiện khả năng tái sử dụng của các thành phần và duy trì tính nhất quán .

Hãy lấy ví dụ trước để chia nhỏ thành phần thành nhiều thành phần con, cụ thể là - Button và Input

Vì chúng tôi đã tạo hai thành phần mới, chúng có thể được sử dụng lại trong toàn bộ ứng dụng mà không bị trùng lặp mã.

Tránh kết xuất nhiều lần

React hiển thị lại toàn bộ thành phần khi có thay đổi trong statehoặc props. React cũng hiển thị các thành phần con khi có sự thay đổi trong trạng thái thành phần. Nếu bạn nghĩ đến việc tránh việc khoan lỗ, thì điều khó khăn là, ngay cả khi một thành phần con không có đạo cụ nào được chuyển đến nó từ thành phần mẹ, thì React vẫn sẽ hiển thị lại thành phần con chỉ vì thành phần mẹ được kết xuất lại!

Chà, làm cách nào chúng ta có thể giảm hoặc tránh kết xuất nhiều lần?
Câu trả lời là 'React.memo'. React.memolà Thành phần thứ tự cao hơn (HOC) ngăn một thành phần hiển thị lại nếu các đạo cụ (hoặc giá trị bên trong nó) không thay đổi.

Dưới đây là một ví dụ về thành phần React chấp nhận các đạo cụ và hiển thị thông tin chi tiết về xe tương ứng bằng cách sử dụng React.memo, chỉ hiển thị lại khi các đạo cụ thay đổi.

Tăng tốc độ tải ứng dụng của bạn bằng cách tách và nén mã

Trong khi xây dựng một ứng dụng React quy mô lớn, kích thước bản dựng sẽ tăng lên khi bạn bắt đầu triển khai các tính năng mới và thêm các phần phụ thuộc. Việc gửi tệp gói JavaScript khổng lồ này đến trình duyệt của khách hàng góp phần làm cho thời gian tải ứng dụng chậm hơn. Để khắc phục điều này, chúng ta có thể sử dụng một kỹ thuật gọi là 'Tách mã'.

Việc tách mã có thể đạt được bằng cách sử dụng bất kỳ gói mô-đun nào . Các gói mô-đun này giúp tách hoặc tách mã ứng dụng đã xây dựng của bạn thành nhiều 'phần' và cung cấp cho trình duyệt khi cần thiết. Do đó, giảm thời gian tải trên trình duyệt.

Nếu bạn đang sử dụng Webpack để đóng gói, thì bạn có thể đạt được loại khả năng tách mã này. Bằng cách chia nhỏ các tệp đi kèm, trình duyệt web sẽ lưu vào bộ nhớ cache các tệp thay đổi thường xuyên hơn và tài nguyên tải xuống song song để giảm thời gian tải.

Webpack không chỉ giúp tách mã mà còn cung cấp khả năng rung cây, tối ưu hóa sự phụ thuộc bằng cách sử dụng các plugin giúp loại bỏ các phần phụ thuộc không sử dụng trong gói cuối cùng của bạn.

- Xem thêm về các cấu hình Webpack cần thiết cho các ứng dụng web tại đây .
- Kiểm tra danh sách các phụ thuộc mà bạn có thể tối ưu hóa.

Nén Gzip

Nén Gzip cho phép máy chủ web cung cấp kích thước tệp nhỏ hơn, giúp ứng dụng tải nhanh hơn. Lý do gzip hoạt động tốt là do các tệp JavaScript, CSS và HTML sử dụng nhiều văn bản lặp lại với nhiều khoảng trắng. Vì gzip nén các chuỗi thông thường, điều này có thể giảm kích thước trang và biểu định kiểu lên đến 70%, rút ​​ngắn thời gian hiển thị đầu tiên của ứng dụng.

Nếu bạn đang sử dụng chương trình phụ trợ Node.JS / Express, bạn có thể sử dụng Gzipping để nén kích thước gói của mình bằng mô-đun nén .

Tải chậm & Nhập động

Tải chậm là một kỹ thuật tối ưu hóa hiệu suất cho các ứng dụng web để tải hoặc hiển thị các thành phần web theo yêu cầu. Kỹ thuật này xác định thời điểm một phần tử rời đi và đi vào một khung nhìn. Đây là một cách hiệu quả để tải các thành phần xuất hiện trên khung nhìn .

Tải hình ảnh lười biếng

Thực hiện tải chậm cho hình ảnh là cách thông thường để cải thiện hiệu suất của các ứng dụng web và thiết bị di động, nơi bạn nhận được danh sách các hình ảnh sẽ được hiển thị.
Hỗ trợ cấp trình duyệt cho hình ảnh tải chậm hiện đã được hỗ trợ trên web!
Đây là đoạn mã để triển khai tính năng tải chậm hình ảnh trong <img/>thẻ.

Trong đoạn mã trên, bạn có thể thấy một thuộc tính mới - loadinggiúp tải hình ảnh một cách chậm rãi.

Ngoài ra, có nhiều thư viện tải lười biếng (Đối với Hình ảnh và Thành phần) dành cho các ứng dụng React giúp tăng tốc hiệu suất của ứng dụng React và cải thiện trải nghiệm người dùng tổng thể dễ dàng hơn.

Nhập khẩu linh kiện động

ES2020 đã giới thiệu tính năng nhập động, trong đó các mô-đun được tải động qua đó chúng tôi có thể giảm gói cuối cùng cần thiết cho tải trang ban đầu bằng cách nhập mô-đun trong thời gian chạy. Điều này cực kỳ mạnh mẽ vì nó cho phép bạn chỉ gửi mã cần chạy sau khi tải xong tài liệu.

Nhập động trong ứng dụng React bằng cách sử dụng 'React.lazy'
Chúng ta có thể nhập động các thành phần bằng cách sử dụngReact.lazy. Phương pháp này giúp dễ dàng tách mã một ứng dụng React ở cấp thành phần bằng cách sử dụng nhập động. Đây được gọi là phân tách dựa trên thành phần .
ThànhReact.lazyphần là một hàm nhận một hàm khác làm đối số, đến lượt nó, hàm này sẽ gọi một phép nhập động và trả về một lời hứa. React.lazy()xử lý lời hứa này và mong đợi nó trả về một mô-đun có chứadefault exportthành phần React.

Hãy xem mã nhập tĩnh và động trông như thế nào.

Đoạn mã trên đại diện cho nhập tĩnh của,,, các thành Loginphần .SuccessError

Trang successvà errorbây giờ được tải chậm, đảm bảo rằng cả hai phần chỉ được tải khi nó được hiển thị.

Có một số tiêu chuẩn trong mã của bạn - Các phương pháp hay nhất

Viết mã rõ ràng và duy trì một tiêu chuẩn mã hóa trong ứng dụng của bạn giúp bạn hiểu rõ hơn và dễ dàng mở rộng quy mô.

Sau đây là các phương pháp hay nhất mà bạn có thể đưa vào ứng dụng của mình

1. Sử dụng thành phần chức năng với Hooks trên thành phần lớp .
2. Nhập -kiểm tra đạo cụ của thành phần của bạn theo mặc địnhProps và propTypes .
3. Rung cây chết - Loại bỏ mã trùng lặp, không mong muốn và mã chết khỏi cơ sở mã ứng dụng.
4. Bao gồm Ranh giới Lỗi trong các thành phần của bạn, điều này sẽ giúp xử lý lỗi của thành phần tốt hơn.
5. Sử dụng ES6 hoặc bất kỳ tiêu chuẩn mã hóa ECMA mới nhất nào cho JavaScript.
   Thực hiện theo các phương pháp mã JS tốt nhất
6. Tránh cài đặt các gói / thư viện cho các tính năng nhỏ, nếu không, nó sẽ làm tăng kích thước gói của dự án và do đó, tăng thời gian tải ứng dụng.

Sự kết luận

Như đã nói, có nhiều cách để tối ưu hóa các ứng dụng React. Trong bài viết này, tôi đã cố gắng tóm tắt một vài kỹ thuật chính. Tinh chỉnh với những thay đổi nhỏ và duy trì tính nhất quán của mã trong ứng dụng của bạn dẫn đến hiệu suất tốt hơn, Điều này có thể có tác động tích cực đến người dùng và cả nhà phát triển.