Skip to content

[code-infra] Build size snapshots from installed packages#43452

Merged
Janpot merged 11 commits intomui:masterfrom
Janpot:update-size-snapshot
Sep 6, 2024
Merged

[code-infra] Build size snapshots from installed packages#43452
Janpot merged 11 commits intomui:masterfrom
Janpot:update-size-snapshot

Conversation

@Janpot
Copy link
Member

@Janpot Janpot commented Aug 26, 2024

Mimic closer how the bundling process would happen at the end-user by creating a "virtual" entrypoint that imports from installed modules. This should result in a more predictable resolution behavior that's closer to what the end-user would experience.

The idea is to:

  • use a virtual module that wildcard imports the module and logs it to avoid tree shaking (this will increase the numbers by a few bytes, but that's fine, it is not part of what we want to measure)
    import * as foo from '<MODULE>'
    console.log('foo')
  • let webpack rely on pnpm workspace resolution to resolve imports

Will take care of #43441 in a separate effort, we would actually want to be able to see the diff for this PR.

This should help with the snapshot issues I'm seeing in #43264 which is the initial reason for this refactor.

@Janpot Janpot added the scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd). label Aug 26, 2024
@mui-bot
Copy link

mui-bot commented Aug 26, 2024

Netlify deploy preview

https://deploy-preview-43452--material-ui.netlify.app/

@material-ui/core/styles/createTheme: parsed: -1.00% 😍, gzip: -0.83% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 7f16724

},
{
id: '@material-ui/core/styles/createTheme',
path: 'packages/mui-material/build/styles/createTheme.js',
Copy link
Member Author

@Janpot Janpot Aug 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This import will be disallowed in ESM so I'm adding the possibility to import a specific export createTheme from @mui/material/styles instead.

It resulted in a slight decrease, but I'd consider it to be more accurate

entry: { [entry.id]: path.join(workspaceRoot, entry.path) },
context: __dirname,
entry: {
[entry.id]: `./index.js!=!data:text/javascript,import ${importNames} from '${entry.import}';console.log(foo);`,
Copy link
Member Author

@Janpot Janpot Aug 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the magic sauce:

  • context to current dir, this is where modules are resolved form. Now that it's a workspace, it has a node_modules folder.
  • data url, virtual file ./index.js which just imports the measured module. and logs to circumvent tree shaking

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO this deserves a comment in code. I don't think this syntax is widely known (I just learned about this and it's pretty hard to search for it).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right, I've added some links in a comment

@Janpot Janpot changed the title [code-infra] Build size snapshots from installed packages (experiment) [code-infra] Build size snapshots from installed packages Aug 26, 2024
@Janpot Janpot marked this pull request as ready for review August 26, 2024 17:47
@Janpot Janpot requested a review from a team August 26, 2024 17:47
@Janpot Janpot requested review from a team and removed request for a team September 4, 2024 09:49
Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left one comment, but it does look good. The next step could be making it more generic and configurable and publishing to npm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd).

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants