Mengecek Bundle Size pada VueJS


Perlukah kita mengatur atau mengontrol bundle size pada project vuejs ?, Tentunya perlu sekali. bukan hanya vuejs mungkin di project framework lainnya seperti react JS atau angular juga harus diatur tentang masalah bundle size ini, karena mereka di build dengan npm/node pastinya ada bundle.

Saat kita menginstall sebuah library pada project node kita, biasanya mengetik perintah "npm install nama_package". kita tidak tahu berapa size library yang kita install pada saat itu karena lebih memikirkan fungsi dari library tersebut. dan lebih mementingkan kemudahan penggunaan pada library tersebut.

Oke jadi bagaimana caranya mengecek bundle size pada library yang sudah terpasang ?. yaitu dengan mengetik perintah "npm run build --report" nanti akan otomatis membuka browser dan menampilkan size masing-masing library yang digunakan.



Nah jika ada library memiliki size yang besar hingga 1mb. perlu di uninstall dari project dengan membuat package.json nah hapus nama library yang sekiranya mau diganti.

Agar tidak salah dalam memilih library, kita bisa menggunakan https://bundlephobia.com/  yaiut tempat pengecekan bundle size semua library yang terdaftar npm. berikut ini contoh kasusnya:


Moment VS DayJS

Waktu itu diproject saya hanya ingin mengubah data timestamp menjadi tanggal. saya hanya butuh satu fungsi dari library tersebut yaitu konversi saja.


Size yang menimpa project saya sampai 231 kb. sedangkan jika menggunakan dayJS tidak sampai 231kb. Lagian saya hanya menggunakan 1 fungsi kok tidak terlalu banyak heheh.


Memang penggunaan saya lebih enak baca yang moment ketimbang dayJS. Ya tapi agar project kita ramping harus menggunakan yang ringan.

Mengecek bundle ini adalah opsional untuk setiap project karena tidak semua library mempunyai kesamaan seperti moment dan dayjs. Ini juga bisa mengacu kepada UI library seperti bulma, vuetify, bootstrap, materialize, semantic.

Oke itu saja yang bisa saya sampaikan jika ada pertanyaan terkait postingan ini. bisa cantumkan di komentar terima kasih.
Kategori :
Facebook twitter Google

Related Post

Berlangganan update artikel terbaru via email:

0 Komentar