search

johannesjo / angular-material-css-vars

Little library to use css variables with @angular/material
https://johannesjo.github.io/angular-material-css-vars/
MIT License
194 stars 32 forks source link

Bundle size gets ridiculously large #168

Closed maziluradu closed 5 months ago

maziluradu commented 6 months ago

:frowning: Problem Statement

This library is incredibly helpful, however using it in my project increases the styles chunk size by about 200kb. As a reference, the original size of the "styles" chunk is ~90kb. Using this increases the size of the chunk to ~300kb. I would love to know whether there's any ongoing effort on reducing the size of the library.

:grey_question: Possible Solution

Optimize the amount of SCSS code included into the bundle

:arrow_heading_up: Describe alternatives you've considered

N/A

:heavy_plus_sign: Additional context

N/A

json-derulo commented 6 months ago

Hi! Thanks for opening the issue. You are comparing a bit apples with oranges. With a prebuilt theme, the CSS bundle will have roughly 90kB. However, a custom theme with both dark and light mode in plain Angular Material has 150kB, this is the size which we need to compare with.

Also in a fresh project using CSS vars I can't reproduce such high increases in bundle sizes. With the base setup, I'm getting a bundle size of 190kB (increase by 40kB). With disabled dark mode, the bundle size is 115kB (increase by 25kB). It would be helpful to share what exactly you are doing to see such high bundle sizes. Maybe you are including the Material Styles twice? (Note that you need to remove prebuilt themes and usages of mat.core())

json-derulo commented 5 months ago

Friendly reminder to provide the requested information, otherwise I will have to close this issue.