0

Giảm 35KB bundle size khi thay thế Axios bằng Fetch

đăng cách đây 1 năm

Mình sử dụng axios khá lâu, hầu như tất cả các project của mình trước kia. Gần đây mình bắt đầu optimize project của mình, sử dụng webpack-bundle-analyze để check tất cả các package trong node_modules để optimize, mình phát hiện axios chiếm gần 35KB.

axios bundle sizeaxios bundle size

Chậc, vừa mất thời gian install package trong lúc build lại tăng thêm 35KB bundle size chỉ cho một lib handle XMLHttpRequest thôi á. Ngoài việc sử dụng axios và gọi những method Get/Post/Push/Update/Delete ra thì mình cũng không sử dụng thêm những tính năng nào của axios hết.

Thế là mình bắt đầu thay thế axios bằng fetch API. fetch được support native  trên hầu hết những browser (trừ IE ra nha), có nghĩa là bạn không cần phải cài đặt thêm package nào vào để sử dụng được fetch, giảm thời gian build + loadtime của ứng dụng.

Tuy nhiên với những browser cổ xưa như IE thì không được support (ngay đến Microsoft còn quay lưng với IE nói gì các nhà phát triển)

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

✧ ✧ ✧

Chia tay axios......

axios em rất tốt.... nhưng anh rất tiếc....

BÙM... axios đi rồi ông Giáo ạBÙM... axios đi rồi ông Giáo ạ

Nước mắt của axios anh lau bằng fetch

Chúng ta sử dụng duy nhất một function fetch(url,options), việc thay đổi các method,payload,header...  của fetch là do chúng ta thay đổi input của tham số thứ options 

fetch API:

Vậy những biến như method, header, body là những giá trị mình cần tham số hoá, mình bắt đầu tách function fetch này ra như sau.

Tham số hoá fetch()

 Fetch Response

Khi thực  hiện một XMLHttpRequest , nếu httpStatus >= 400 thì mặc định axios sẽ reject => bạn sẽ handle error trong phần catch

Nhưng với fetch thì khác, khi thực hiện một request, fetch sẽ trả về Response object là một promise và luôn luôn resolve về kết quả khi Promise này được xử lý, bất kể httpStatus code là gì.  Thay vì reject thì status code >=400 thì fetch vẫn resolve Response nhưng lúc này field ok sẽ bằng false.

Success Response:

fetch resolve success responsefetch resolve success response

Error response

fetch resovle error response fetch resovle error response 

Xử lý fetch response 

Tại vì fetch() return về một Promise Respone object, nên trước tiên mình phải resolve cái promise này trước đã

Khi migrate từ axios qua fetch, mình muốn giữ lại function handle logic trước kia nên mình return về kết quả giống như axios trả về để code của mình không phải sửa nhiều

Code gần hoàn chỉnh sẽ như sau:

Implement function request

Tới đây bạn có thể dùng hàm request được rồi, nhưng mình muốn tiện hơn trong quá trình code cũng như truyền một số biến đặc biệt cho mỗi method sau này nên mình sẽ viết thành các hàm Get/Post/Put/Delete implement từ hàm request như sau:

Implement methods

Get:

Post:

Put:

✧ ✧ ✧

Cũng khá đơn giản phải không nào. Kết quả là bạn sẽ giảm được 30KB bundle size.

caller size khi chưa minify caller size khi chưa minify

Kết bài

Mình và các bạn trong team đang có kế hoạch organic hoá project, giúp giảm bundle size và cải thiện thời gian build + tải trang.

Những thư viện sử dụng ở ngoài viết ra để cover cho hầu hết các trường hợp, cho cả một cộng đồng xài, việc bạn chỉ xài 1,2 function mà bundle cả một lib nặng mấy chục kb, thậm chí lên tới MB như lodash, moment thì quả là lãng thí.

0
0
...