docs(guides): mention webpackExports in tree shaking and code splitting (#8067)

Author: rolandixor

src/content/guides/code-splitting.mdx

@@ -376,6 +376,17 @@ cacheable modules 530 KiB
 webpack 5.4.0 compiled successfully in 268 ms
 ```
 
+T> You can also use magic comment `webpackExports` with `import()` to expose specific exports from a dynamically imported module:
+
+```js
+import(
+  /* webpackExports: ["default", "namedExport"] */
+  "./module"
+);
+```
+
+This can help webpack tree shake other unused exports. See [Magic Comments](/api/module-methods/#magic-comments) for details.
+
 As `import()` returns a promise, it can be used with [`async` functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Here's how it would simplify the code:
 
 **src/index.js**

src/content/guides/tree-shaking.mdx

@@ -187,6 +187,8 @@ The [`sideEffects`](/configuration/optimization/#optimizationsideeffects) and [`
 
 `usedExports` relies on [terser](https://github.com/terser-js/terser) to detect side effects in statements. It is a difficult task in JavaScript and not as effective as straightforward `sideEffects` flag. It also can't skip subtree/dependencies since the spec says that side effects need to be evaluated. While exporting function works fine, React's Higher Order Components (HOC) are problematic in this regard.
 
+If you're using dynamic `import()`, you can also use the `webpackExports` magic comment to specify the exports that should be exposed, allowing webpack to tree shake the others. See [Magic Comments](/api/module-methods/#magic-comments).
+
 Let's make an example:
 
 ```js