Consider optimizing SCSS structure to reduce overall file size #7062
Description
Feature request type
Performance improvement
Component name
No response
Is your feature request related to a problem?
The compiled, minified CSS for the whole MudBlazor library in version 6.4.1 is 493KB in size. Although this is not unheard of in magnitude (Bootstrap 5.3.0's CSS for example is 228KB), it is overdue for an optimization. Webpack reports a warning if you compile it yourself, because the overall bundle file size is over than the recommended size limit, which is 244KiB.
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Describe the solution you'd like
I think the solution should be of two parts: 1) reducing/optimizing bad selectors and 2) allowing for higher level of customization.
Taking a look at the compiled CSS, there are some easy optimizations that would dramatically reduce the overall file size. This is a fragment found in the compiled CSS:
.mud-timeline-modifiers.mud-timeline-horizontal.mud-timeline-position-alternate.mud-timeline-reverse .mud-timeline-item:nth-child(odd):not(.mud-timeline-item-start) .mud-timeline-item-content .mud-card::before, .mud-timeline-modifiers.mud-timeline-horizontal.mud-timeline-position-alternate.mud-timeline-reverse .mud-timeline-item:nth-child(odd):not(.mud-timeline-item-start) .mud-timeline-item-content .mud-card::after, .mud-timeline-modifiers.mud-timeline-horizontal.mud-timeline-position-alternate.mud-timeline-reverse .mud-timeline-item.mud-timeline-item-end .mud-timeline-item-content .mud-card::before, .mud-timeline-modifiers.mud-timeline-horizontal.mud-timeline-position-alternate.mud-timeline-reverse .mud-timeline-item.mud-timeline-item-end .mud-timeline-item-content .mud-card::after {
transform: rotate(270deg);
bottom: -24px;
top: auto;
left: calc(50% - 8px);
}This comes from the following SCSS fragment in _timeline.scss:
.mud-timeline-modifiers {
&.mud-timeline-horizontal {
&.mud-timeline-position-bottom {
.mud-timeline-item-content {
.mud-card {
&::before, &::after {
transform: rotate(270deg);
bottom: -24px;
top: auto;
left: calc(50% - 8px);
}
}
}
}
}
}The level of depth is not only redundant, it has multiple drawbacks:
- The compiled selector is so large, it results in 795 characters. This is just one selector among many.
- The depth of the selectors is 6, and it includes combining with both a before and an after.
- All of the classes mean matching the CSS at runtime in the browser will be slower than matching fewer of them. This is not a huge problem, but having many of these selectors will show a difference in the long run.
- It is VERY hard to override such a behavior without workarounds. Simply specifying a custom class on say, level 2, I would have to either use
!important(where it's even possible), or make a more specific selector by using an ID or even more classes.
Modifying these would unfortunately be a breaking change each time. If you would say, remove the third level, anyone might have a conflicting selector in user code. It most probably won't break end users' applications, however, because their overrides will be more specific.
The solution would be to review the compiled CSS, find the hugely redundant selectors AND the utilities that take up very much space, and optimize these selectors. Some of these are easy to work around, some are tougher. A good target would be to get under the recommended 244KB limit.
Have you seen this feature anywhere else?
It would be also good if it was supported to customize the SCSS out of the box. Obviously, the most straightforward way to include the library is to include the compiled content from the staticwebassets from the NuGet package. That CSS should be smaller. However, including the MudBlazor SCSS in a custom build pipeline is a bit harder as one would need to essentially fork and modify the MudBlazor.scss entry point. It would be great if it was easier to import and maybe there was a documentation page on how to include the base library and then import each component as needed manually.
Describe alternatives you've considered
No response
Pull Request
- I would like to do a Pull Request
Code of Conduct
- I agree to follow this project's Code of Conduct