[docs] Clarify when bundle size optimization is needed

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -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
 on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot/)).
 Combined with [dangerJS](https://danger.systems/js/) we can inspect
-[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every pull request.
 
 ## When and how to use tree-shaking?
 
-Tree-shaking of MUI works out of the box in modern frameworks.
+Tree-shaking of MUI's open source projects, e.g. Material UI works out of the box in modern frameworks.
 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:
 
 ```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
+:::warning
+The following instructions are only needed if you need to optimize the development startup times (e.g. needed for icons) or if you are using an older bundler
 that doesn't support tree-shaking.
+:::
 
 ## Development environment
 
@@ -185,10 +187,10 @@ Modify your `package.json` commands:
 ```diff
    "scripts": {
 -    "start": "react-scripts start",
-+    "start": "react-app-rewired start",
 -    "build": "react-scripts build",
-+    "build": "react-app-rewired build",
 -    "test": "react-scripts test",
++    "start": "react-app-rewired start",
++    "build": "react-app-rewired build",
 +    "test": "react-app-rewired test",
      "eject": "react-scripts eject"
   }
@@ -210,10 +212,20 @@ It will perform the following diffs:
 ## Available bundles
 
 The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/).
+In addition, to the default bundle, you can opt-in:
+
+- **Modern bundle**. The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/).
+It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
+This can be used to make separate bundles targeting different browsers.
+
+- **Legacy bundle**. If you need to support IE 11 you cannot use the default or modern bundle without transpilation.
+However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/).
+You don't need any additional polyfills.
 
-⚠️ Developers are **strongly discouraged** to import from any of the other bundles directly.
-Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles.
-Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+
+### How to use
+
+You can use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```js
 {
@@ -230,14 +242,7 @@ Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.ali
 }
 ```
 
-### Modern bundle
-
-The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/).
-It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
-This can be used to make separate bundles targeting different browsers.
-
-### Legacy bundle
-
-If you need to support IE 11 you cannot use the default or modern bundle without transpilation.
-However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/).
-You don't need any additional polyfills.
+:::error
+Developers are **strongly discouraged** to import from these bundles directly in the code because a third-party dependency might import a different bundle.
+So unless you can guarantee that all your dependencies use the same bundle, don't do it.
+:::