Phát hiện chặn quảng cáo

Xin lỗi bạn, mình có đặt quảng cáo để lấy kinh phí duy trì trang, nếu bạn không thấy phiền có thể tắt chức năng chặn quảng cáo và tải lại trang.

Tiếp tục xem
Tải lại

[VueJS] Tối ưu hiệu năng VueJS với Async Components

Xin chào các bạn, hôm nay sẽ là một bài viết liên quan tới VueJS và cụ thể ở đây đó chính là Async Components. Làm một thời gian với VueJS đã lâu, không biết bạn đã biết tới Async Components hay chưa? nếu chưa thì theo dõi bài viết này và cơ chế mà  Async Components hoạt động để tối ưu hiệu năng khi làm việc với VueJS.

Async Components là gì?

Hiểu một cách đơn giản như chính tên gọi của nó đó là cách mà chúng ta áp dụng lazy-load components trong chính ứng dụng của chúng ta. Các thành phần trong Vue truyền thống sẽ là load một cách đồng bộ, có nghĩa là tất cả các thành phần sẽ được tải trước, ngay cả khi mà nó chưa được xuất hiện, lát mình sẽ nói cụ thể trong demo phía dưới. Với cách load đồng bộ này thì khi ứng dụng phát triển tới một mức độ nào đấy đủ lớn, thì tổng thể ứng dụng của chúng ta sẽ load rất nhiều các thành phần ngay tại thời điểm đầu chạy ứng dụng. Điều này dẫn tới việc chậm ứng dụng. Chính vì vậy mà Async Components sinh ra để giải quyết điều này, hiểu một cách nôm na là khi chúng ta có yêu cầu thì cách thành phần đó mới được tải. Vậy làm sao để sử dụng Async Components trong VueJS?

Cách sử dụng Async Components để tối ưu hiệu năng

Lý thuyết một hồi rồi, giờ đến phần thực hành. Ở đây mình đã chuẩn bị một Project VueJS đơn giản để giải thích khái niệm này. Ở dưới sẽ có phần demo code, các bạn có thể xem full source ở đây nhé: https://github.com/thangdangblog/async-component

Ở trên mình có 2 button là Open SayHi ModalOpen Async Modal, tương ứng với 2 hành động mở modal là SayHiModal.vueSayAsyncModal.vue. Như các bạn đã thấy, là về mặt kết quả là 2 hành động này đều cho một kết quả là mở được modal mà mình đã thiết lập cho nó.

Tuy nhiên thì ở đây, cách mình import của 2 modal này là hoàn toàn khác nhau. Ở SayHiModal mình đã dùng với cách truyền thống, còn SayAsyncModal mình đã sử dụng defineAsyncComponent để thay thế cách khai báo. Vậy điều đặc biệt ở đây là gì?

Rõ ràng là chúng ta đã thấy được là, với cách truyền thống thì SayHiModal.vue đã được import ngay từ đầu ngay khi chưa được sử dụng. Còn đối với SayAsyncModal nó chỉ được load khi mà mình nhấn Open Async Modal, hay nói cách khác là khi mình có yêu cầu nó mới được tải. Rất dễ hiểu phần này đúng không ạ.

Cấu hình loadingComponent và errorComponent

Trong cú pháp của defineAsyncComponent để khai báo async component cho phép chúng ta nhúng thêm các thành phần cho 2 sự kiện diễn ra là tải component và trường hợp component tải bị lỗi như phía dưới đây:

Với cách khai báo này, chúng ta sẽ được kết quả như phía dưới:

Lợi ích sử dụng AsyncComponent

Với việc sử dụng AsyncComponent trong project sẽ giúp chúng ta cải thiện thời gian tải ban đầu của ứng dụng bằng cách chỉ tải các thành phần cần thiết khi cần thiết. Điều này có thể giảm đáng kể thời gian người dùng xem và tương tác với ứng dụng của bạn. Đồng thời cũng sẽ mang đến trải nghiệm cho người dùng, khách hàng một cách tốt hơn nếu xử tốt phần này.

Cảm ơn bạn đã dành thời gian đọc bài viết!

 

Về Đặng Thắng

Chào mọi người, mình là Thắng. Sở thích của mình là lập trình và chia sẻ mọi thứ mình học được cho tất cả mọi người. Rất mong mọi người ủng hộ Blog của mình.

Đề xuất

[VueJS]Bạn đã biết về Dynamic Components trong VueJS

Xin chào các bạn, hôm nay sẽ là một bài viết liên quan về một …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *