bundle size significantly larger for experimental vs legacy components

[jponeill]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I know this is work in progress, but when I compare the bundle size of the legacy components vs the experimental ones, the experimental ones are significantly larger (50% larger, in my project). I've attached source-map-explorer that shows the difference for form-field, button, dialog, expansion & icon.

Reproduction

StackBlitz link: Steps to reproduce:

1. Build project w/ material legacy components 2.Build project w/ material experimental components
2. Compare bundle size using source-map-explorer ... experimental bundle size is much larger.

Expected Behavior

I expect legacy and experimental bundle sizes to be close in size

Actual Behavior

Experimental bundle sizes are much larger.

Environment

• Angular: 16.2.0-next.0
• CDK/Material: 16.2.0-next.1
• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[crisbeto]

It's worth noting that some of the styles moved from the theme to the component styles which can explain some of the difference since the visualization doesn't show the theme.

[jponeill]

You're right, @crisbeto , the CSS bundle size is ~9K smaller. Accounting for that, it looks like there's ~40% increase for these components.

[jponeill]

@crisbeto I see that the legacy components have been removed in v17. I'm looking forward to switching over, but am a little worried about the increase in bundle size based on my quick tests.