Brogrammist
Material UI Performace
Ba'zi frontenchiladan Material UI da perfromance yomon, og'ir ishlaydi, bundle size katta degan gaplarni eshitganman.
Ha, MUI shunday. Lekin ishonch bilan ayta olamanki, dasturning sekin ishlashi bu kabi "battle-tested" kutubxonalardan kelmaydi. Balki uni noto'gri ishlatish yoki uning ustida "musor" kod yozishdan keladi.
Shunday ekan aybni oldin o'zingizdan qidiring!
Shu paytgacha men ustida ishlagan dasturlar ichida hech qachon MUI bottleneck bo'lmagan.
P.S.
BILLZ da ham MUI v5 ishlatib kelinadi. MUI ni upgrade qilish, shu bilan birga balki undan voz kechish masalasini tezt tez yuzaga chiqib turardi. Anchadan beri MUI dan voz kechmaslik kerakligini, shunchaki undan togri foydalanib, "normalniy" dizayn sistema qurishni aytib kelardim. Bu safar aniq sonlar bilan bu mavzuni yopdim.
Erinmasdan Chrome Dev tools da bir necha marta turli case'larda performace test qildim. Eng og'ir ishlaydigan modullarni analiz qilib chiqdim. Dastur sekin ishlashiga asosiy sabab baribir MUI bo'lib chiqmadi.
Natijalari:
Page 1:
- long task ~158ms
- JSS + plugins ~12ms
- больше времени уходит в native DOM/layout, React, react-input-autosize, Emotion, AG Grid
Page 2:
- long task ~141ms
- JSS + plugins ~9ms
- больше времени уходит в native DOM, react-input-autosize, React, AG Grid, Emotion/MUI system
Page 3:
- long task ~93ms
- JSS + plugins ~12ms
- основной cost снова в native DOM/layout + распределен между React/app/MUI/Emotion
Page 4:
- long tasks ~94ms и ~66ms
- JSS от <1ms до ~7ms
- заметно больше AG Grid, native DOM/layout, React
2 · 1.2K ·