VueJS

Performance in VueJS #4 – Optimizing third-party libraries

Performance in VueJS #4 - Optimizing third-party libraries

1. Mở đầu

Như ở phần đầu mình cũng đã giới thiệu là khi các bạn muốn làm tăng Performance của Project thì sẽ cần trả một số cái giá. Cụ thể ở đây sẽ là thời gian phát triển app sẽ tăng lên tùy vào độ Optimize bạn làm là như thế nào, cái giá cũng có thể là một cái tính năng nào đó làm ảnh hưởng quá nghiêm trọng đến Performance dự án – ta thấy nó không thực sự quá quan trọng nhưng lại làm ảnh hưởng nghiêm trọng đến thời gian load của app. Có lẽ đó là hai cái giá mà mình đã thấy, nếu bạn có thêm ý kiến nào thì đừng ngần ngại comment xuống bên dưới nhé.

Ở phần chi tiết mình sẽ nói rõ hơn nhé, nhưng theo ý kiến của mình thì cái gì cũng có cái giá của nó. Hãy suy nghĩ thật kĩ trước khi hành động (Nghe nguy hiểm ghê – @@)

2. Chi tiết

Đầu tiên hãy tự hỏi phần Module này có cần bạn Optimize, nó quá nặng do thư viện dùng nó, hay nó quá lặng khi phải tải nhiều component. Nếu nó có thể làm nhanh như những phần import mình đã trình bày ở trên thì mình nghĩ là lên Optimize lại. Nhưng nếu bạn cần dùng thư viện ở phần này, mà không thể bỏ nó đi được do viết lại hàm bạn cần dùng quá mất time, thì mình nghĩ là bạn không lên Optimize ở phần này.

Ở phần này mình sẽ giới thiệu đến các bạn một trang rất hay để đo kích thước gói NPM mà bạn muốn install vào App, từ đó có lẽ bạn sẽ có được sự lựa chọn tốt hơn.

Trang mình muốn giới thiệu đó chính là https://bundlephobia.com, ở đây bạn có thể nhìn thấy kích thước gói NPM cũng như nhìn thấy time download xuống của gói. (Các bạn có thấy ngạc nhiên với React không nào. Nhưng đừng quên nó chỉ là một thư viện thôi nhé, khi kết hợp với một số thằng khác nó mới là Framework được).


Trong Webpack có một module rất hay, đó chính là webpack-bundle-analyzer, bạn cũng có thể dùng nó để nhận định xem phần nào là lên Optimize, phần nào nó đang phình to ra mà bạn cần để ý đến.

Đầu tiên bao giờ cũng vậy, bạn lên cài thêm gói NPM:

yarn add webpack-bundle-analyzer -D
// OR
npm install --save-dev webpack-bundle-analyzer

Sau đó update file vue.config.js, để Plugin này có thể chạy được khi chúng ta dùng lệnh nhé ^^.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    chainWebpack: config => {
        config.plugins.delete('prefetch')
        config.plugins.delete('preload')
    },
    configureWebpack: {
        plugins: [new BundleAnalyzerPlugin()]
    }
}

Khi mà bạn chạy lệnh yarn build xong, Browser sẽ tự mở cho bạn một tab, từ đó bạn có thể nhìn xem phần nào là to hay nhỏ, hay phần nào bạn thấy nó đang phìm to ra sau mỗi một tính năng. Từ đó có thể nhận định đưa ra phương án hữu hiệu hơn.

Ở phần trên mình thấy thư viện Lodash đang chứa quá nhiều trong Project của mình, câu hỏi là có cách nào làm cho nó bé đi một cách đơn giản, tốn ít effor của dự án nhất có thể không nhỉ???? Câu trả lời là có đó các bạn, mình sẽ làm cho các bạn bất ngờ đó, nhưng cách này không phải khi nào cũng dùng được nhé, nó còn tùy vào thư viện bạn dùng có tính năng này hay không nữa.

Okkkkk, trước khi mình Optimize, hãy cùng chạy lệnh yarn build và xem Lodash nó đang lấy của chúng ta đi bao nhiêu dung lượng nhé.

Nó chưa 71.09KB, không hề nhỏ đối với một thư viện mà trong Project mình đang demo có dùng đúng 2 hàm đó là isEqualisEmpty, và nếu bạn muốn cứu vãn một số KB thừa thãi, nhưng phần mà bạn không dùng thì chỉ cần thay nhưng hàm bạn dùng bằng cách gọi trực tiếp từ Lodash. Cụ thể hãy chỉnh:

import _ from 'lodash';

Thành import thẳng vào bạn sẽ thấy bất ngờ khi build lại nhé ^^. Nó sẽ chỉ dùng những phần nào mà bạn import thôi.

import isEqual from 'lodash/isEqual';
import isEmpty from 'lodash/isEmpty';

Nhớ là hãy chỉnh lại ở tất cả các phần trong dự án nhỏ của mình trên Git ở nhánh Master nhé.

Và như vậy sau khi mình Optimize với Lodash các bạn có thấy nó giảm ghê chưa??? nó đã giảm 55.68KB. Đối với code Fe ngần đó dung lượng không phải ít đâu nhé.

Thế có bạn đặt câu hỏi: Thế có phải dependency nào mình cũng làm được như thế này có đúng không? Câu trả lờikhông, nó còn tùy dependency đó có cho bạn dùng cách trên hay không, suggestion là search trước khi dùng nhé (Hoặc mẹo là bạn cứ dùng cách trên đi rồi xem code có báo lỗi không, nếu không lỗi thì build ra xem nó giảm kích thước so với ban đầu không ^^ Mẹo thôi nhé).

Tiếp theo, chắc hẳn cũng thấy là Moment library sau khi mà build ra thì có kích thước rất to đúng không nào, Hmmmm, nào sao cho nó bé đi nhỉ ??? Search tiếp thôi…. như mình search ra thì các bạn lên chuyển từ cách import:

import moment from 'moment';

Sang:

import moment from 'moment/moment';

Và sau đó config tiếp phần vue.config.js rồi build lại nhé, bạn sẽ thấy một phép màu nữa đó: ^^

Từ trước khi mình config nó có kích thước saukhi build rất lớn là 234.79kb:

Và sau khi mà mình config thì nó có kích thước là:

Các bạn thấy nó giảm nhiều chưa nào, thật là khủng khiếp. Các bạn có thể áp dụng thử vào dự án của mình luôn xem sao nhé, như mình thấy thì trước và sau khi Optimize dung lượng giảm đi cả một nửa nhé.

Code phần này mình có để ở đây nhé, bạn chú ý tên nhánh giúp mình nhé. Và hãy thử nghĩ xem nếu áp dụng cả 4 phần Optimize của mình vào dự án của các bạn sẽ nhanh hơn như thế nào nhé, mình cá là bạn sẽ không thất vọng được đâu.

3. Kết luận

Bên trên là một số kinh nghiệm nhỏ của mình trong việc Optimize code VueJS, chỉ là một ít kinh nghiệm cá nhân thôi, nên nếu các bạn thấy sai làm ơn hãy chỉ cho mình biết với nhé.

Hoặc nếu như bạn thấy khi app dụng vào dự án của bạn có vấn đề gì thì cũng đừng ngần ngại mà comment cho mình biết với nhé. Những cách mình trình bày đều có thể áp dụng cho Angular và React nhé, nên mình nghĩ các bạn hãy thử nếu có cơ hội, đừng sợ sai. Nếu chưa làm mà đã sợ thì mãi không lớn lên được đâu ^^. (Theo mình thì là vậy 😀 )

4. Tham khảo

# Optimizing third-party libraries
# How to Reduce Your Vue.JS Bundle Size With Webpack

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