Skip to content

Commit aaebeaa

Browse files
authored
[docs] Improve wording of bundle size guide (#19768)
1 parent cd8a636 commit aaebeaa

File tree

1 file changed

+13
-8
lines changed

1 file changed

+13
-8
lines changed

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,25 @@ on every commit for every package and critical parts of those packages ([view th
99
Combined with [dangerJS](https://danger.systems/js/) we can inspect
1010
[detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
1111

12-
## How to reduce the bundle size?
12+
## When and how to use tree-shaking?
1313

14-
For convenience, Material-UI exposes its full API on the top-level `material-ui` import.
15-
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
16-
use named imports and expect only a minimal set of Material-UI components in your bundle:
14+
Tree-shaking of Material UI works out of the box in modern frameworks. Material UI exposes its full API on the top-level
15+
`material-ui` import. If you're using ES6 modules and a bundler that supports tree-shaking
16+
([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/),
17+
[`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely
18+
use named imports and still get an optimised bundle size automatically:
1719

1820
```js
1921
import { Button, TextField } from '@material-ui/core';
2022
```
2123

22-
⚠️ Be aware that tree-shaking is an optimization that is usually only applied to production
23-
bundles. Development bundles will contain the full library which can lead to **slower
24-
startup times**. This is especially noticeable if you import from `@material-ui/icons`.
25-
Startup times can be approximately 6x slower than without named imports from the top-level API.
24+
⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler
25+
that doesn't support tree-shaking.
26+
27+
## Development environment
28+
29+
Development bundles can contain the full library which can lead to **slower startup times**. This is especially noticeable if you
30+
import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
2631

2732
If this is an issue for you, you have various options:
2833

0 commit comments

Comments
 (0)