[core] Ship modern bundle #22814

eps1lon · 2020-09-29T21:05:35Z

The targets of the default bundle are not final. They will be locked on release of @material-ui/core@5.0.0 from npx browserslist --mobile-to-desktop "> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11, maintained node versions"

new Supported Platforms documentation
new "minimizing bundle size" guide

We now ship 4 bundles:

stable (default, formerly esm) which targets a snapshot (on release) of > 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"
modern (formerly es) which targets the last 1 version of evergreen browsers and active node (currently that is 14. We can't use current node since that would include odd-numbered version which is not intended for production code)
node (formerly default) which targets a snapshot (on release) of maintained node versions
legacy which is stable + IE11

/icons only ships node and stable since the other two bundles don't do anything for size but would double the install size which can be problematic (though I haven't been able to reproduce these issues).

I'm not implementing exports and ES modules for node yet. That would require considerably more effort (since we need to import with file extensions) and ES modules are still considered experimental on node (though I think they're planned to be stable in a couple of weeks I seem to recall).

Closes #15496
Closes #18447

/cc @mui-org/core-team For input on the targets (see .browserslistrc).

Future work:

Remove internal polyfills required for IE 11 and document it

mui-pr-bot · 2020-09-29T21:16:32Z

@material-ui/core: parsed: -4.81% 😍, gzip: -5.94% 😍
@material-ui/lab: parsed: -5.25% 😍, gzip: -3.91% 😍
@material-ui/styles: parsed: -1.89% 😍, gzip: -2.18% 😍
@material-ui/system: parsed: -16.16% 😍, gzip: -16.15% 😍
@material-ui/utils: parsed: +8.90% , gzip: +3.46%

Details of bundle changes

Generated by 🚫 dangerJS against d565045

eps1lon · 2020-09-30T09:38:03Z

.browserslistrc

+last 1 safari version
+node 14
+
+# snapshot of "> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11" when the last major is released.


Widening to 0.2% (which is what create-react-app is using; 0.5 is browserslist default) would include:

chrome 49

edge 18

ios_safari 9.3

Chrome and edge are evergreen so I think we can ignore these versions. Older Chrome versions used to be relevant since it was what google used to crawl sites but they since upgraded and are doing so more often.

Note that safari prior to 12 would need prefixing of gap and column-gap in ImageList. Prior to 10.3 these properties aren't supported at all.

ios_safari cannot be considered evergreen because it's tied to the OS and therefore the device. The devices that support iOS 9 but not iOS 12 are:

iPod Touch (5th generation)

iPhone 4S

iPhone 5

iPhone 5C

iPad Mini (1st generation)

iPad 2

iPad (3rd generation)

iPad (4th generation)

iPad Air

iPad Pro (12.9-inch 1st generation)

Using https://en.wikipedia.org/wiki/IOS_9#Supported_devices and https://en.wikipedia.org/wiki/IOS_12#Supported_devices

eps1lon · 2020-10-05T10:48:38Z

@material-ui/utils: parsed: +11.22% , gzip: +7.54%

Only due to missing module concatenation (which depends on the app bundle not library code). Stat size is now at 14.58 kB (down from 15.94 kB)

mbrookes · 2020-10-12T19:44:46Z

I'm not so sure about the [...] and ios_safari change

Me neither. Breaking imagelist on iOS < 12 was unintentional...

oliviertassinari · 2020-10-12T21:47:37Z

@mbrookes What do you mean? Only supporting iOS >=13 was intentional.

I have seen the following error in development mode coming from the changes (none of the docs pages are working in dev)

I haven't figured out why yet.

eps1lon · 2020-10-12T21:53:31Z

@mbrookes What do you mean? Only supporting iOS >=13 was intentional.

Sure but it's not clear whether this is viable. The benefit of dropping iOS < 13 is that we can use PointerEvent as well.

mui#22814 (comment)

Jack-Works · 2020-10-18T03:02:33Z

Does it going to ship ES6+ syntax or later? Want to see that happen

eps1lon · 2020-10-18T09:28:19Z

Does it going to ship ES6+ syntax or later? Want to see that happen

The /modern bundle targets the latest 1 versions of major browsers so this should have the least amount of transpilation.

The default bundle should have a lot less transpilation as well.

What is so specific about ES6 syntax that you'd want to see?

Jack-Works · 2020-10-18T10:00:37Z

Cool, thanks

NMinhNguyen · 2020-12-11T17:58:22Z

docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size.md

-A second version of the components is also published, which
-you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/).
-All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more.
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** to import from any of the other bundles.


Sorry for commenting on a closed PR, but is this recommendation saying for libraries to only import either /modern or /legacy? Or is it saying to keep imports as they were before, e.g. @material-ui/core/Button (which would later be used alongside a Babel transform that repoints at either /legacy or /modern, when you build an actual app)?

Libraries should not deal with from where they import. This should all be up to the bundler. So yes, import only from @materialui/*/* in your library.

Izhaki · 2021-06-14T23:32:17Z

@oliviertassinari

I repent for using this PR to ask a question, but it's a small one:

Why does MUI distribution includes CommonJS? Won't all React components be bundled anyhow by a bundler that support esm?

What's the use case for a cjs build where a React component will be imported using require?

Jack-Works · 2021-06-15T01:11:54Z

What's the use case for a cjs build where a React component will be imported using require?

SSR maybe

eps1lon · 2021-06-15T03:53:42Z

The ecosystem isn't ready for ES modules. For example, next.js requires CommonJS.

Izhaki · 2021-06-15T08:38:52Z

For example, next.js requires CommonJS.

Is it? NextJS is using webpack, which will prioritise module over main.

I've got a library of React components and I'm transpiling it with esm only and NextJS is reading it no problem.

I'm asking this question because to the best of my knowledge pretty much all React components are bundled using webpack (for the consuming app at least, not libraries) and webpack has been supporting esm for quite some time.

eps1lon · 2021-06-15T08:43:41Z

Is it?

Yes: vercel/next.js#23725

NextJS is using webpack, which will prioritise module over main.

module and main are only part of native ES modules.

I've got a library of React components and I'm transpiling it with esm only and NextJS is reading it no problem.

Are you sure you're using native ES modules and not some loose interpretation that bundlers used to use? For example, relative file imports do need a file extension. Once you have e.g. import Component from './Component' you no longer have native ES modules.

Izhaki · 2021-06-15T08:50:21Z

Are you sure you're using native ES modules

OK, probably my wrong (am I confusing between esm and es?) I'm not talking about native ES modules (the mjs stuff).

But, if I'm not wrong, the babel config I'm using is borrowed from how MUI used to build the esm folder a year or so ago:

  env: {
    esm: {
      presets: [
        [
          '@babel/preset-env',
          {
            // Do not transform modules - keep as esm
            modules: false,
            targets: {
              node: '6.10',
            },
          },
        ],
      ],
      plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]],
    },
  },

eps1lon · 2021-06-15T09:00:44Z

You're probably shipping something that is only understood by bundlers. With commonJS at least node understands it. With proper ES modules node, browsers and bundlers will understand the code.

eps1lon · 2021-06-15T09:42:15Z

You never execute these on node, or import them without some bundler being involved?

You do when doing server-side rendering.

Izhaki · 2021-06-15T09:56:39Z

You do when doing server-side rendering.

But this is done via webpack, which goes to the "module" field in package.json and reads files distributed per the 4.1.2 config above alright.

NextJS uses webpack.
createReactApp uses webpack.
Is anybody out there builds React apps not via webpack or some other bundler that understand that sort of esm export like in 4.1.2?

Izhaki · 2021-06-15T10:03:05Z

OK. I think I see what I'm missing. I've been with NextJS for too long probably...

Some people (as in some React examples) do SSR where the server simply requires the React Component (no webpack involved). These people are unlikely to write cjs style - most likely they write es6 and have some transpiler for the code, but not for node_modules.

So I guess the answer is - for people who do SSR without a bundler.

Jack-Works · 2021-06-15T16:29:39Z

Yes, the most simple SSR is to use react-dom/server package to render the JSX directly. That requires the code to be able to run in NodeJS directly.

patrickmcdougle-okta · 2021-09-02T00:13:40Z

babel.config.js

-  presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
-  plugins: [
+module.exports = function getBabelConfig(api) {
+  const useESModules = api.env(['legacy', 'modern', 'stable']);


Am I reading this right that legacy SHOULD use ESModules? This is almost certainly a mistake, right?

I believe this stands for legacy ESM.

From microbundle readme:

"module": "./dist/foo.module.js", // legacy ES Modules output (for bundlers) "exports": "./dist/foo.modern.js", // modern ES2017 output

Am I reading this right that legacy SHOULD use ESModules? This is almost certainly a mistake, right?

Could you open an issue and fill out the template to describe the mistake? Discussions on merged PRs are oftentimes forgotten.

I guess I thought legacy was for ancient browsers like ie11, it seems that I might be incorrect about that. Thanks for the explanation, sorry for the mis-informed question. Have a nice day.

legacy is for IE11. But IE11 does not understand ES modules nor CommonJS modules i.e. the code always needs a bundler anyway at which point we might as well ship ES modules to help tree-shaking.

eps1lon added performance breaking change labels Sep 29, 2020

github-actions bot mentioned this pull request Sep 29, 2020

Update snapshots for pr/22814 eps1lon/mui-scripts-incubator#1015

Closed

eps1lon commented Sep 30, 2020

View reviewed changes

eps1lon referenced this pull request Sep 30, 2020

[core] Move utils package to TypeScript (#22367)

6445fb2

eps1lon force-pushed the feat/new-bundling branch 3 times, most recently from 8f3144e to 9d539bc Compare October 1, 2020 14:48

oliviertassinari mentioned this pull request Oct 3, 2020

Bump autoprefixer from 9.8.6 to 10.0.0 #22759

Closed

eps1lon added 15 commits October 5, 2020 11:30

[core] Ship modern bundle

6b587b7

Fix yarn extract-error-codes

0e11b39

Update engines

8a75f9c

Use esm babel helpers when using ES6 modules

acfead4

Forgot op_mini

8994e78

Use stable bundle as default

da4cd9b

Fix issues related to assumed transpilation

eae0e0a

Fix stable bundle targets

14bf563

Fix failing initMatchers test

1e7339d

Fix grid related issues in safari

a242deb

Proper snapshot with mobileToDesktop

b592197

Reduce noise from chunks

c544f29

Update caniuse

426ad90

Use new bundle in UMD build

a5193c9

Improved docs :)

2ae909a

eps1lon force-pushed the feat/new-bundling branch 2 times, most recently from 99b022e to 9ed4ecb Compare October 5, 2020 10:22

Remove unused polyfills

4a1eef2

eps1lon force-pushed the feat/new-bundling branch from 9ed4ecb to 4a1eef2 Compare October 5, 2020 11:12

This was referenced Oct 12, 2020

[docs] Fix docs:dev #23023

Merged

[core] Add support for iOS Safari 12 #23068

Merged

oliviertassinari mentioned this pull request Oct 17, 2020

[core] Sync supported browser with v5 mui/mui-x#453

Merged

oliviertassinari added a commit to oliviertassinari/material-ui that referenced this pull request Oct 17, 2020

[docs] Apply Josh's code review

74584be

mui#22814 (comment)

oliviertassinari mentioned this pull request Oct 17, 2020

[core] Batch small changes #23116

Merged

oliviertassinari added a commit to oliviertassinari/material-ui that referenced this pull request Oct 17, 2020

[docs] Apply Josh's code review

9b39ae2

mui#22814 (comment)

This was referenced Nov 24, 2020

[test] Misc improvements to experimental and browser test runner #23699

Merged

[test] Cleanup skipped tests #23732

Merged

NMinhNguyen reviewed Dec 11, 2020

View reviewed changes

oliviertassinari mentioned this pull request Jan 12, 2021

Optimize bundle size (now 317KB with v4) #24381

Closed

This comment has been minimized.

Sign in to view

patrickmcdougle-okta reviewed Sep 2, 2021

View reviewed changes

mnajdova mentioned this pull request Oct 5, 2021

[codemod] Fix optimal-imports to support v4 and v5-alpha, beta #28812

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Ship modern bundle #22814

[core] Ship modern bundle #22814

eps1lon commented Sep 29, 2020 •

edited by oliviertassinari

Loading

mui-pr-bot commented Sep 29, 2020 •

edited

Loading

eps1lon Sep 30, 2020 •

edited

Loading

eps1lon commented Oct 5, 2020 •

edited

Loading

mbrookes commented Oct 12, 2020 •

edited

Loading

oliviertassinari commented Oct 12, 2020 •

edited

Loading

eps1lon commented Oct 12, 2020

Jack-Works commented Oct 18, 2020

eps1lon commented Oct 18, 2020

Jack-Works commented Oct 18, 2020

NMinhNguyen Dec 11, 2020

eps1lon Dec 11, 2020

Izhaki commented Jun 14, 2021

Jack-Works commented Jun 15, 2021

eps1lon commented Jun 15, 2021

Izhaki commented Jun 15, 2021

eps1lon commented Jun 15, 2021 •

edited

Loading

Izhaki commented Jun 15, 2021

eps1lon commented Jun 15, 2021

This comment has been minimized.

eps1lon commented Jun 15, 2021

Izhaki commented Jun 15, 2021

Izhaki commented Jun 15, 2021

Jack-Works commented Jun 15, 2021

patrickmcdougle-okta Sep 2, 2021

Izhaki Sep 2, 2021

eps1lon Sep 2, 2021

patrickmcdougle-okta Sep 2, 2021

eps1lon Sep 3, 2021

[core] Ship modern bundle #22814

[core] Ship modern bundle #22814

Conversation

eps1lon commented Sep 29, 2020 • edited by oliviertassinari Loading

mui-pr-bot commented Sep 29, 2020 • edited Loading

eps1lon Sep 30, 2020 • edited Loading

Choose a reason for hiding this comment

eps1lon commented Oct 5, 2020 • edited Loading

mbrookes commented Oct 12, 2020 • edited Loading

oliviertassinari commented Oct 12, 2020 • edited Loading

eps1lon commented Oct 12, 2020

Jack-Works commented Oct 18, 2020

eps1lon commented Oct 18, 2020

Jack-Works commented Oct 18, 2020

NMinhNguyen Dec 11, 2020

Choose a reason for hiding this comment

eps1lon Dec 11, 2020

Choose a reason for hiding this comment

Izhaki commented Jun 14, 2021

Jack-Works commented Jun 15, 2021

eps1lon commented Jun 15, 2021

Izhaki commented Jun 15, 2021

eps1lon commented Jun 15, 2021 • edited Loading

Izhaki commented Jun 15, 2021

eps1lon commented Jun 15, 2021

This comment has been minimized.

eps1lon commented Jun 15, 2021

Izhaki commented Jun 15, 2021

Izhaki commented Jun 15, 2021

Jack-Works commented Jun 15, 2021

patrickmcdougle-okta Sep 2, 2021

Choose a reason for hiding this comment

Izhaki Sep 2, 2021

Choose a reason for hiding this comment

eps1lon Sep 2, 2021

Choose a reason for hiding this comment

patrickmcdougle-okta Sep 2, 2021

Choose a reason for hiding this comment

eps1lon Sep 3, 2021

Choose a reason for hiding this comment

eps1lon commented Sep 29, 2020 •

edited by oliviertassinari

Loading

mui-pr-bot commented Sep 29, 2020 •

edited

Loading

eps1lon Sep 30, 2020 •

edited

Loading

eps1lon commented Oct 5, 2020 •

edited

Loading

mbrookes commented Oct 12, 2020 •

edited

Loading

oliviertassinari commented Oct 12, 2020 •

edited

Loading

eps1lon commented Jun 15, 2021 •

edited

Loading