VueJS

Performance in VueJS #2 – Router performance

Performance in VueJS #2 - Router performance

1. Mở đầu

Như phần trước mình đã giới thiệu với các bạn các khái niệm về bundle hay lazy load đó là những kiến thức core rất quan trọng mà nếu như chưa đọc các bạn lên xem lại nhé Performance in VueJS #1 – Dynamic import – Lazy loading Vue components.

Và trong phần tiếp theo này mình sẽ giới thiệu đến các bạn một cách Lazy load nữa mà được rất nhiều Developer dùng. Đó chính là Lazy load bằng Router nhé, đây cũng là phần kiến thức rất quan trọng và nó cũng đặc biệt dễ để implement vào bất kì dự án nào dùng Vue-router nhé.

Mặc dù dễ áp dụng và nhìn thì có vẻ khá đơn giản, nhưng mình tin chắc là nó sẽ mang lại hiểu quả bất ngờ cho App của bạn đó.

2. Chi tiết

Setup

Trước khi vào phần thực hành, các bạn có thể lấy code mình đã base sẵn nhé. Ở đây mình đã chia các phần module và config router rồi đó và ở các phần dưới mình sẽ làm theo code base này nhé.

Hãy làm theo hướng dẫn để code thể start code lên nhé. ^^

Lazy load với router là như thế nào?

Như các bạn có thể thấy, nếu như chạy code bên trên mà chưa Optimize gì thì chắc chắc các bạn sẽ thấy app sẽ được tự động download hết về và không phân tách chút nào ra. Như vậy, nếu trong trường hợp app của chúng ta to lên thì sẽ rất mất time để download, điều này sẽ làm cho End user cảm thấy sốt ruột :D, và trong time chờ họ sẽ sang một số trang khác để dạo một chút xem có cái vẹo gì hay không như là: Phây búc, UI tút, ….. Và sẽ có ấn tượng không tốt lắm với hệ thống của chúng ta, như vậy là phải làm sao cho nó nhanh hơn, với cách 1 các bạn sẽ apply vào component. Nhưng vẫn là chưa đủ vì nếu vậy thì đã quên đi một cách rất hay khác đó chính là dùng Router để lazy load.

Cũng giống như Dynamic import thì ở đây các bạn hãy cũng dynamic import các Module hay các Component với router. Như vậy khi vào app thì user sẽ không cần load nhưng Module hay các component không cần thiết đến nó nữa. Time load sẽ giảm xuống rất nhiều nếu như app của chúng ta to lên, hay cũng như khi mà mạng của khách hàng có ping cao (độ trễ cao).

Cụ thể như thế nào thì các bạn hãy xem tiếp nhé.

Cách triển khai và kết quả thu được

Đầu tiên các bạn hãy chạy app và xem kết quả sẽ như thế nào ở phần network nhé.

Như các bạn có thể thấy, app đang được bundle thành các file khác nhau và đang được tải về trong 1 lần. @@ Như vậy sẽ thật là mất time nếu như app của chúng là to, hay là có dùng nhiều viện.

Để giảm thiếu các Route không dùng đến, hãy dynamic khi mà import các component hay các module ở phần router. Các bạn sẽ thấy tác dụng rất khủng khiếp ( :3 )

Các bạn hãy chỉnh lại tất cả các phần router.js trong app thành như sau nhé:

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

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

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

export default routes;
// import ProductCreateAndUpdateComponent from './product-create-and-update.vue';
// import ViewProductsComponent from './view-products-detail.vue';

const routes = [{
        path: '',
        name: 'products',
        component: () =>
            import ('./view-products-detail.vue')
    },
    {
        path: ':productId',
        name: 'updateAndViewProduct',
        component: () =>
            import ('./product-create-and-update.vue')
    }
];

export default routes;
// import CategoryCreateAndUpdateComponent from './category-create-and-update';
// import CategoriesComponent from './categories.vue';
// import ProductComponent from './../product';
import ProductRoute from './../product/router';

const routes = [{
        path: '',
        name: 'categories',
        component: () =>
            import ('./categories.vue')
    },
    {
        path: ':id',
        name: 'createAndUpdateCategory',
        component: () =>
            import ('./category-create-and-update.vue')
    },
    {
        path: ':id/view-products',
        name: 'viewProducts',
        component: () =>
            import ('./../product'),
        children: ProductRoute
    }
];

export default routes;

Sau đó hãy chạy lại app xem điều gì sẽ xảy ra nhé, hãy bật network lên để kiểm tra nhé ^^.

Và như vậy chúng ta đã apply phần này thành công rồi đó, hay đúng không nào các bạn ^^.

Phần cuối cùng này mình sẽ cho các bạn xem sau khi build chúng ta được cái gì nhé, đây là ảnh trước và sau khi apply nhé.

3. Kết luận

Mình tin chắc với cách này, app của các bạn sẽ download nhanh hơn rất nhiều đó nhé. Nếu có cơ hội hãy cứ apply vào project của bạn vì nó rất dễ mà lại manh lại hiểu quả rất cao.

Đây là code cuối cùng của phần trên nhé (Các bạn hãy chú ý đến nhánh mình checkout nhé): Git của mình

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

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