Skip to content

Commit d6757e3

Browse files
kazazoroliviertassinari
authored andcommitted
[docs] Update minimizing-bundle-size.md (#7169)
* Update minimizing-bundle-size.md * Update minimizing-bundle-size.md * Update minimizing-bundle-size.md
1 parent 169f1b3 commit d6757e3

File tree

1 file changed

+13
-1
lines changed

1 file changed

+13
-1
lines changed

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
# Minimizing Bundle Size
22

33
For convenience, Material-UI exposes its full API on the top-level `material-ui` import.
4-
However, this causes the entire library and its dependencies to be included in client bundles that include code that imports from the top-level bundle.
4+
This will work fine if you have tree shaking working.
5+
6+
However, **in case tree shaking is not supported**, this causes the entire library and its dependencies to be included in client bundles that include code that imports from the top-level bundle.
7+
8+
You have couple of options to overcome this situation:
9+
10+
##### Option #1
511

612
You can import directly from `material-ui/` to avoid pulling in unused modules. For instance, instead of:
713

@@ -17,3 +23,9 @@ import TextField from 'material-ui/TextField'
1723
```
1824

1925
The public API available in this manner is defined as the set of imports available from the top-level `material-ui` module. Anything not available through the top-level `material-ui` module is a **private API**, and is subject to change without notice.
26+
27+
##### Option #2
28+
29+
Another option to keep using the shorten import and still have the size of the bundle optimized would be to use [babel-plugin-material-ui](https://github.com/umidbekkarimov/babel-plugin-material-ui).
30+
31+
**Important note**: Both of the options **should be temporary** until you'll add tree shaking capabilities to your project.

0 commit comments

Comments
 (0)