VueJS

Performance in VueJS #3 – Lazy Loading Individual Vue Components and Prefetching

Performance in VueJS #3 - Lazy Loading Individual Vue Components and Prefetching

1. Mở đầu

Như phần trước mình đã trình bày với các bạn về cách dùng Dynamic import với Router thì sẽ mang lại hiệu quả như thế nào. Thì trong phần này mình sẽ nói nhược điểm của nó và sẽ suggest cho các bạn cách fix nhé.

Nhắc lại một chút, bây giờ hãy đặt giả sử trường hợp app của chúng ta rất lớn, mỗi lần chúng ta load, nếu load hết về cùng một lúc sẽ dẫn đến time load khá lâu ảnh hưởng đến UX người dùng. Từ đó mình đã suggest cho các bạn Series này và phần 2 dùng Dynamic import với router tỏ ra rất mạnh mẽ. Nhưng hãy chú ý, là nếu module hay Router cha quá to thì có phải là khi mà User tải xuống cũng sẽ chậm có đúng không nào.

Vậy có cách nào không, có cách nào làm giảm thời gian tải xuống???

Câu trả lời là không, thời gian tải file xuống nó sẽ vẫn vậy 10s download file 10MB thì trả làm bên FE kiểu gì mà làm nó downloaded trong 5s cả (Mình giả dụ 1MB/1s thôi nhé). Nhưng chúng ta có thể ngầm download nó xuống (^^) hay chưa nào, chi tiết như thế nào bạn hãy xem tiếp phần dưới nhé.

2. Chi tiết

Đầu tiên hãy vào GIT và xóa file vue.config.js đi nhé, cì mình sẽ giải thích một khái niệm liên quan đến nó.

Ở phần này chúng ta sẽ chú ý vào một từ khóa đó chính là Prefetch, hãy cùng đọc định nghĩa của nó một chút nhé. Đây là một khái niệm trong Webpack, còn webpack là gì thì mình sẽ nói rõ ở bài sau nhé.

Prefetching in simple words is just downloading certain resources that may be needed in the future before they are requested by the browser. It’s important to note that the prefetching will only start after the browser has finished the initial load and becomes idle. Prefetching does not affect your page load or how fast your app becomes interactive (TTI).

Dịch ra các bạn có thể hiểu là Prefetch là download những thứ cần cho các tính năng sau của một app, có điểm chú ý là nó chỉ download file sau khi mà browser đã download các file current xong và Prefetch sẽ không làm ảnh hưởng đến quá trình download app này.

Đó là hiểu theo ý mình nhé, còn không thì mình sẽ cắt nghĩa ra như thế này: Đó là khi app của các bạn tải xong, nếu muốn tải thêm một số file khác nữa thì các bạn có thể cho nó vào quá trình Prefetch. Khi đó thì các phần trong Prefetch sẽ được tải ngầm đằng sau trong khi UI của các bạn đã hiện ra rồi. User có thể dùng UI đó và nếu có dùng đến các file Prefetched thì cũng không cần download lại. Đấy amazing chuwaaaaaaaa………………. 😀

Để làm được Prefetch thực sự rất đơn giản, trong Project của mình các bạn chỉ cần thay phần import component trong router thông thường thành Dynamic import là được nhé. Cụ thể như sau:

import CategoryContainerComponent from './components/category';
import HomeComponent from './components/home.vue';

import CategoryRoute from './components/category/router';

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeComponent
    },
    {
        path: '/category',
        name: 'category',
        component: CategoryContainerComponent,
        children: CategoryRoute
    }
];

export default routes;

Sau đó chỉnh thành:

import CategoryRoute from './components/category/router';

const routes = [{
        path: '/',
        name: 'home',
        component: () =>
            import (
                /* webpackChunkName: "home" */
                './components/home.vue')
    },
    {
        path: '/category',
        name: 'category',
        component: () =>
            import (
                /* webpackChunkName: "category_parent" */
                './components/category'),
        children: CategoryRoute
    }
];

export default routes;

Sau đó hãy chú ý đoạn code bên dưới sau khi mình đã compile nó ra nhé, hãy chú ý đến là ngay cả khi mình tắt mạng thì vẫn vào được các phần khác bình thường và hãy chú ý thêm là mình đang chạy Browser ở chế độ Enable cache nhé (Để cho phép user cache lại data được).

Có bạn sẽ hỏi, ấy ấy, thế nó có khác gì phần 2 với phần 1 đâu. ? :33333

Câu trả lời là đúng là hiện tại nó đang không khác gì, vì đơn giản là khi mình dùng CLI của vue nó tự apply Prefetch vào cho mình rồi HTML and Static Assets . Nó có cái hay là đó là tool này đang tự động hỗ trợ các bạn rồi, nhưng có cái dở là nếu User của chúng ta lại dùng 3G hoặc 4G, 5G, …. ^^ thì có phải mỗi lần User tải website xuống sẽ cũng đang tải cả mấy phần mà chúng ta Import dynamic hãy bây giờ sẽ là Prefetch mà có thể ở đây User không câng dùng tới. Tốn băng thông mà không giải quyết được cái gì, chắc gì User đã vào nào.

Đấy, các bạn thấy tác dụng phụ kinh khủng chưa nào.

Để giải quyết vấn đề này thì chúng ta cần Disabled default Prefeching này bằng cách thêm file vào root app.

module.exports = {
    chainWebpack: config => {
        config.plugins.delete('prefetch')
        config.plugins.delete('preload')
    }
}

Sau đó khởi động lại app, :D, bây giờ bạn hãy mở network ở Chrome ra nào, load xong app hãy disabled connect đi. Bạn sẽ thấy:

Okay disable ngon rồi :33333. Và bây giờ tiếp tục chúng ta hãy cùng chỉ định thằng nào được Prefeching bằng cách thêm comment này vào trước phần import nhé.

webpackPrefetch: true

Nếu bạn thắc mắc tại sao chỉ cần thêm như vậy là nó chạy, thì mình xin giải thích như sau, đó là khi mình dùng Vue CLI, tự động nó đã dùng webpack trong này rồi và khi mà mình comment vậy thì nghĩa là mình đang nói với Webpack: “EEIIII cu, chỗ này a muốn Prefetch nó, M giúp a nhé :D”.

OK, hãy cùng thêm vào và xem hiệu quả của nó thôi nào.

Đó là những gì mình muốn trình bày với các bạn nhé, hãy chú ý phần này không chỉ là UX mà hãy nghĩ đến cả bằng thông người dùng nữa nhé. Hãy yêu quý họ, họ sẽ yêu lại chúng ta. (ahahahaha xạo lol quá).

Thêm một điểm nữa các bạn cũng có thể mở head element ra và thấy phần mình Apply prefetch nhé. (Cho bạn nào muốn biết là thằng nào đang apply prefetch nhiều).

<link rel="prefetch" as="script" href="/js/category_parent.js">

3. Kết luận

Sau tất cả thì đây là nhánh mà mình đã làm trong GIT.

Mình tin chắc rằng đến đây, các bạn đã có rất nhiều thu hoạch cho riêng mình rồi, bản thân mình khi làm dự án cũng may mắn hay phải ngồi Optimize code nên cũng nắm được sơ qua cơ chế hoạt động.

Mới đầu mình nghĩ là nó khó, nhưng nếu chịu khó tìm tòi một chút thì nó không hề khó chút nào nhé, đừng để nỗi sợ không có thật cản trở bạn. ^^

Thời gian tới mình sẽ còn có nhiều bài viết liên quan đến VueJS, mong các bạn theo dõi nhé.

SEE YOU SOON!!!

4. Tham khảo

# Lazy loading and code splitting in Vue.js
# Lazy load in Vue components
# Dynamic Imports in Vue.js for better performance
# HTML and Static Assets

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments