From 25b9b00253c7f6c6f187264dd22710abb6a40955 Mon Sep 17 00:00:00 2001 From: Or Kazaz Date: Sun, 18 Jun 2017 01:39:06 +0300 Subject: [PATCH 1/3] Update minimizing-bundle-size.md --- docs/src/pages/guides/minimizing-bundle-size.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/pages/guides/minimizing-bundle-size.md b/docs/src/pages/guides/minimizing-bundle-size.md index 725b8e05f3836a..29d1b540ea2f8c 100644 --- a/docs/src/pages/guides/minimizing-bundle-size.md +++ b/docs/src/pages/guides/minimizing-bundle-size.md @@ -17,3 +17,5 @@ import TextField from 'material-ui/TextField' ``` 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. + +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). From dcc6b4e87ddbb600cba0c87d1be45138598964f1 Mon Sep 17 00:00:00 2001 From: Or Kazaz Date: Sun, 18 Jun 2017 11:57:28 +0300 Subject: [PATCH 2/3] Update minimizing-bundle-size.md --- docs/src/pages/guides/minimizing-bundle-size.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/guides/minimizing-bundle-size.md b/docs/src/pages/guides/minimizing-bundle-size.md index 29d1b540ea2f8c..bbea4ceff296c1 100644 --- a/docs/src/pages/guides/minimizing-bundle-size.md +++ b/docs/src/pages/guides/minimizing-bundle-size.md @@ -1,7 +1,12 @@ # Minimizing Bundle Size For convenience, Material-UI exposes its full API on the top-level `material-ui` import. -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. +This will work fine if you have tree shaking working. + +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. +You have couple of options to overcome this situation: + +##### Option #1 You can import directly from `material-ui/` to avoid pulling in unused modules. For instance, instead of: @@ -18,4 +23,6 @@ import TextField from 'material-ui/TextField' 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. +##### Option #2 + 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). From 97054e7150ffa5db049233b2fe9766fc90d1e452 Mon Sep 17 00:00:00 2001 From: Or Kazaz Date: Sun, 18 Jun 2017 12:00:38 +0300 Subject: [PATCH 3/3] Update minimizing-bundle-size.md --- docs/src/pages/guides/minimizing-bundle-size.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/src/pages/guides/minimizing-bundle-size.md b/docs/src/pages/guides/minimizing-bundle-size.md index bbea4ceff296c1..fee61c7545413a 100644 --- a/docs/src/pages/guides/minimizing-bundle-size.md +++ b/docs/src/pages/guides/minimizing-bundle-size.md @@ -4,6 +4,7 @@ For convenience, Material-UI exposes its full API on the top-level `material-ui` This will work fine if you have tree shaking working. 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. + You have couple of options to overcome this situation: ##### Option #1 @@ -26,3 +27,5 @@ The public API available in this manner is defined as the set of imports availab ##### Option #2 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). + +**Important note**: Both of the options **should be temporary** until you'll add tree shaking capabilities to your project.