Tips Mengurangi Bundle Size Material UI React Js Di Vite 2023

Material Ui adalah framework Ui di react yang banyak di gunakan oleh kebanyakan developer Frontend. Material Ui menawarkan kemudahan seperti kecepatan dalam pengembangan Frontend dan kebersihan dalam kode.

Material-UI adalah sebuah library atau framework UI (User Interface) yang populer dan sering digunakan dalam pengembangan aplikasi web dengan menggunakan teknologi React. Material-UI didesain dengan mengadopsi konsep desain Material Design yang dikembangkan oleh Google.

Kekurangan dari Material Ui adalah memiliki bundle size yang besar dan menurut pengalaman saya, minimal bundle yang di hasilkan oleh Material Ui adalah 900kb. Kalau menurut saya, ukuran 900kb itu sangatlah besar untuk Frontend. Terus bagaimana cara mengurangai bundle size yang di hasilkan oleh Material Ui? mari kita bahas.

Sebelum ke inti artikel ini, saya juga akan menjelaskan apa itu Vite.

Vite adalah sebuah build tool (alat pembangunan) yang dirancang untuk pengembangan aplikasi web modern. Dikembangkan oleh Evan You, pencipta Vue.js, Vite dirancang untuk meningkatkan kecepatan pengembangan dengan menghilangkan waktu yang dibutuhkan untuk proses build (membangun) saat pengembangan.

Berikut tips untuk mengurangi bundle size Material Ui di Vite React Js.

Selain cara yang akan saya jelaskan di bawah, ada teknik lain untuk mengurangi bundle size seperti Lazy Load di React. Tapi saya tidak akan membahas itu di sini.

Menerapkan Tree Shaking

Tree Shaking adalah teknik dalam pembangunan Javascript yang memungkinkan penghapusan kode yang tidak di gunakan. Dengan teknik Tree Shaking akan mengurangai bundle size Material Ui. Terus bagaimana cara menerapkan Tree Shaking di Material Ui ? berikut contohnya:

import Button from '@mui/material/Button';

Contoh kode di atas bermaksud agar kita hanya mengambil module button saja tanpa ada module lain yang terambil. Dengan menerapkan tree shaking, akan mengurangi bundle size di Material Ui. Untuk lebih lengkapnya bisa kunjungi docs dari Material Ui di sini.

Dengan menerapkan tree shaking, saya bisa mengurangi bundle size lebih dari 50%.

Menggunakan sideEffects

Apa itu sideEffects ? sideEffects adalah properti yang digunakan untuk memberikan informasi kepada bundler tentang modul mana yang memiliki efek samping yang harus di jaga dan tidak dihapus oleh optimasi tree shaking.

Bagaimana menerapkannya di React Vite? buka package.json dan tuliskan seperti dibawah.

{
  "name": "project_name",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "sideEffects": false, <<< 
....

kenapa sideEffects bernilai false? karena semua modul dalam paket tersebut dianggap tidak memiliki “side effect” dan dapat dihapuskan jika tidak digunakan. Dengan mengatur properti sideEffects ke false, alat bundling dapat secara lebih agresif melakukan penghapusan kode yang tidak digunakan melalui tree shaking. Ini membantu mengurangi ukuran bundel akhir dan meningkatkan performa aplikasi.

Dengan ini saya dapat mengurangi bundle size sebesar 10–20%.

Mungkin itu saja yang bisa saya tuliskan, jika ada tambahan cara mengurangi bundle size Material UI React Js Vite bisa komen di bawah.