[docs] Clarify when bundle size optimization is needed #36823
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
oliviertassinari
added
docs
oliviertassinari
force-pushed
the
bundle-size-improve-docs
branch
from
d09019a
to
e2d5cbd
Compare
oliviertassinari
commented
Apr 9, 2023
| @@ -4,23 +4,25 @@ | |||
|
|
|||
| ## Bundle size matters | |||
|
|
|||
| The bundle size of MUI is taken very seriously. Size snapshots are taken | |||
| MUI takes the bundle size very seriously. Size snapshots are taken | |||
There was a problem hiding this comment.
MUI isn't a product
| MUI exposes its full API on the top-level `@mui` imports. | ||
| If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically: | ||
| If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically in **production**: |
There was a problem hiding this comment.
This is so often overlooked.
|
|
||
| ```js | ||
| import { Button, TextField } from '@mui/material'; | ||
| ``` | ||
|
|
||
| ⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler |
There was a problem hiding this comment.
Use the convention for warnings.
Comment on lines
+192
to
194
| + "start": "react-app-rewired start", | ||
| + "build": "react-app-rewired build", | ||
| + "test": "react-app-rewired test", |
There was a problem hiding this comment.
This is the correct git diff output.
| @@ -210,10 +212,20 @@ It will perform the following diffs: | |||
| ## Available bundles | |||
There was a problem hiding this comment.
I got so confused about this section, it should be clearer now.
Netlify deploy previewBundle size report |
oliviertassinari
force-pushed
the
bundle-size-improve-docs
branch
from
e2d5cbd
to
6753134
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Clarify this confusion https://mui-org.slack.com/archives/C041SDSF32L/p1680655322928259
Preview: https://deploy-preview-36823--material-ui.netlify.app/material-ui/guides/minimizing-bundle-size/