[core] Prevent unstable chunks in size snapshot

[eps1lon]

stable chunks

Previously we ran webpack once with each package being an entry. This means that webpack creates chunks that are shared by different packages. For example, @material-ui/core and @material-ui/lab could share some part of @material-ui/styles. This results in the reported size of @material-ui/core
being affected by changes in @material-ui/lab.

We're now running separate webpack compiler instances for each package to prevent shared chunks. We didn't do this previously because of perf considerations. However, perf shouldn't affect results. Caching the terser results improves perf while not changing results. Runs with cache hits are as fast as previously versions of this scripts but cache misses result in considerably slower runs in CI (local should be fine unless you have a single core machine) but are still faster then the full pipeline (argos completes). The slowness isn't as big of a problem for the initial run anymore since the time until the comment is reserved stays the same.

The reported sizes should be a lot more stable and accurate. We should get this in before #21761 since the reported size in that PR is weird.

size:snapshot --analyze

For easier debugging of the bundle size you can now run yarn size:snapshot --analyze which creates static reports for each bundle that can be inspected. We're not using the server since that would open >100 ports.

[mui-pr-bot]

@material-ui/core: parsed: -11.45% 😍, gzip: -8.01% 😍
@material-ui/lab: parsed: -9.82% 😍, gzip: -5.60% 😍
@material-ui/styles: parsed: -9.16% 😍, gzip: -5.23% 😍
@material-ui/system: parsed: -27.76% 😍, gzip: -10.72% 😍
@material-ui/utils: parsed: -23.35% 😍, gzip: -15.74% 😍

Details of bundle changes

Generated by 🚫 dangerJS against d4d70e1

[oliviertassinari]

For easier debugging of the bundle size you can now run yarn size:snapshot --analyze which creates static reports for each bundle that can be inspected. We're not using the server since that would open >100 ports.

Nice, I have tried it, I wanted to understand why the createMuiTheme() is large:

I wonder if there is a way to have more granular information than the "concatenated" rectangle.

[eps1lon]

I wonder if there is a way to have more granular information than the "concatenated" rectangle.

@oliviertassinari In the left side bar enable Show content of concatenated modules (inaccurate):

I also added a yarn size:snapshot --analyze --accurateBundles which disables module concatenation for accurate bundles but inaccurate size

$ node scripts/sizeSnapshot/create --help
create

Saves a size snapshot in size-snapshot.json

Options:
  --help             Show help                                  [boolean]
  --analyze          Creates a webpack-bundle-analyzer report for each
                     bundle.                   [boolean] [default: false]
  --accurateBundles  Displays used bundles accurately at the cost of
                     accurate bundle size.     [boolean] [default: false]