Best practices cho Mini App

Mục tiêu bài viết

Tài liệu này sẽ đề cập tới các giải pháp để Nhà phát triển Mini App tham khảo nhằm tối ưu hoá Mini App, không chỉ là cải thiện về tốc độ, hiệu suất mà còn là trải nghiệm người dùng.

Tối ưu hoá hiệu suất

Tối ưu hoá hiệu suất là một trong những phần quan trọng nhất để nâng cao trải nghiệm nguời dùng và cải thiện LCP. Bạn có thể tham khảo các giải pháp dưới đây:

Giảm thiểu kích thước của Mini App và tối ưu tài nguyên

Khi một Mini App được phát hành trên V-App. Mặc định sẽ không được load từ đâu trong V-App, chỉ tới khi người dùng truy cập vào Mini App đó thì thông tin của app mới được tải về. Việc này sẽ đảm bảo được kích thước của V-App sẽ nhẹ hơn vì ứng dụng chỉ được tải khi thực sự cần thiết. Do đó, nếu Mini App kích thước càng nhẹ, thì sẽ tải càng nhanh.

Các thành phần được tải về trong một Mini App mình sẽ chia thành 2 thành phần cơ bản: Code để chạy và Tài nguyên của ứng dụng.

• Code để chạy bao gồm: code trong file js, css và các thư viện trong node_modules (nếu có)

  Để tối ưu hoá dung lượng code để chạy, hãy chỉ dùng các thư viện khi thực sự cần thiết. Ví dụ: sẽ không cần phải cài package momentjs chỉ để format ngày tháng, hay chỉ sử dụng các hàm như isEmpty mà phải cài cả package lodash vào. Đây là những hàm mà bạn hoàn toàn có thể tự viết hoặc tham khảo trên mạng, việc loại bỏ các thư viện/code không cần thiết không chỉ giúp code bạn nhẹ hơn mà còn giúp bạn hiểu rõ hơn về code và cách làm của hàm đó.

• Các tài nguyên bao gồm: hình ảnh, video, audio, json, font,...

  Trong các tài nguyên trên, có vẻ hình ảnh là tài nguyên thường được sử dụng nhiều nhất. Có nhiều giải pháp để tối ưu hoá hình ảnh, trong đó sẽ có các cách phổ biến như giảm dung lượng hình ảnh, sử dụng các định dạng nén ảnh như webp, avif, với những hình nào được dùng thường xuyên nên upload lên CDN và có cache.

  Đối với font, mặc định Mini App sẽ sử dụng font Inter cho toàn bộ app. Việc thay đổi một font khác sẽ ảnh hưởng tới trả nghiệm tải app cũng như tăng dung lượng của app lên nếu các file font được đính kèm trong app.

  Với các tài nguyên khác như video, audio, json,... bạn cũng nên cân nhắc về dung lượng của chúng để có thể dùng CDN hay bỏ vào app một cách hợp lý.

Chỉ hiển thị và load những thông tin cần thiết

Khi phát triển Mini App, việc quản lý tài nguyên hiển thị trên màn hình là rất quan trọng để tránh giật lag (jank), crash ứng dụng và cải thiện cảm giác chờ đợi của người dùng.

1. Virtual Scroll

Đối với các danh sách dài (long list) có từ hàng trăm đến hàng nghìn phần tử (ví dụ: lịch sử giao dịch, danh sách sản phẩm...), việc render toàn bộ các phần tử vào DOM cùng lúc sẽ gây quá tải cho trình duyệt và làm chậm thao tác cuộn trang.

Giải pháp là sử dụng kỹ thuật Virtual Scroll. Kỹ thuật này chỉ render các phần tử đang nằm trong vùng nhìn thấy (viewport) của người dùng. Khi người dùng cuộn, các phần tử mới sẽ được render và các phần tử cũ sẽ bị huỷ bỏ hoặc tái sử dụng.

Bạn nên sử dụng các thư viện chuyên dụng đã được tối ưu tốt như:

• react-window hoặc react-virtuoso.

2. Lazy load hình ảnh

Hình ảnh chiếm phần lớn băng thông. Việc tải tất cả hình ảnh cùng lúc sẽ làm chậm LCP.

• Sử dụng thuộc tính native: Thêm loading="lazy" vào thẻ img.
• Sử dụng thư viện: Để có hiệu ứng blur, placeholder, hãy dùng các thư viện như react-lazy-load-image-component.
• Intersection Observer: Dùng API này để chỉ render hoặc fetch dữ liệu cho các component phức tạp khi chúng đi vào vùng nhìn thấy.

3. Sử dụng Skeleton Loading

Thay vì để màn hình trắng hoặc chỉ hiện một vòng xoay loading (spinner) đơn điệu khi đang tải dữ liệu, hãy sử dụng Skeleton Loading.

Skeleton mô phỏng cấu trúc của nội dung sắp hiển thị (như khối hình ảnh, dòng tiêu đề, đoạn văn), giúp người dùng định hình được bố cục giao diện ngay lập tức. Kỹ thuật này giúp cải thiện đáng kể Perceived Performance (Hiệu năng cảm nhận), làm cho người dùng cảm thấy ứng dụng nhanh hơn và phản hồi tốt hơn so với việc phải chờ đợi một màn hình trống trơn.

Trong Mini App Component cũng đã hỗ trợ component Skeleton.

Tối ưu hoá React Component

Hiện tại Mini App đang được phát triển theo hệ sinh thái của React. Nên bạn có thể tham khảo các cách tối ưu React Component trên các bài blog. Dưới đây là một số cách phổ biến và hiệu quả nhất:

• Hạn chế Re-render: Sử dụng React.memo cho các component con để ngăn chặn việc render lại nếu props không thay đổi.
• Tối ưu tính toán: Sử dụng useMemo để lưu trữ kết quả của các phép tính phức tạp.
• Ổn định function reference: Sử dụng useCallback để đảm bảo các hàm truyền xuống component con không bị tạo mới sau mỗi lần render.
• Code Splitting: Sử dụng React.lazy và Suspense để chia tách code, chỉ tải code của màn hình đó khi người dùng thực sự truy cập.

Tăng trải nghiệm điều hướng

Mặc dù các Mini App sử dụng công nghệ web tuy nhiên lại được chạy trên V-App là một ứng dụng di động, nên việc mang lại trải nghiệm di động cho người dùng là một điều cần thiết. Trong số đó thì việc điều hướng là một trải nghiệm quan trọng.

Trong Mini App Component đã hỗ trợ sẵn Router module, hoạt động gần tương tự như với React Router.

Bạn nên sử dụng Router của Mini App Component cung cấp thay vì sử dụng các thư viện như React Router hay TanStack Router. Ngoài việc V-MiniApp đã xử lý việc navigation và history thì V-MiniApp Router sẽ cung cấp đầy đủ các function tương tự như React Router để bạn có thể dễ dàng làm quen và sử dụng.

Lưu ý: Trong Router có 2 mode là memory mode và browser mode, bạn nên dùng browser mode để có thể hỗ trợ swipe back hay bấm nút back trên android để quay về trang trước đó.

Sử dụng storage

Do Mini App được chạy trên môi trường web nên có thể sử dụng các phương thức lưu trữ như localStorage, cookie. Tuy nhiên bạn nên sử dụng các phương thức storage được cung cấp bởi các jsAPI storage.

Sử dụng các jsAPI này không chỉ đảm bảo các thông tin bạn được lưu trữ dưới storage của device, mà còn đảm bảo về an toàn bảo mật. Trong tương lai, MiniApp cũng sẽ có kế hoạch ngừng hỗ trợ localStorage, cookie.

Làm đẹp header

Bạn có thể tham khảo bài viết này để có thể thay đổi header cho phù hợp với App cùa bạn: Custom header cho H5 App

Ngoài ra để có thể có header phù hợp trên nhiều thiết bị có tai thỏ (notch), bạn có thể sử dụng các Variables được đề cập trong bài viết này