docs: add docs for splitChunks.usedExports

website/docs/en/plugins/webpack/split-chunks-plugin.mdx

@@ -227,6 +227,56 @@ If the `splitChunks.name` matches an [entry point](/config/entry) name, the entr
 
 :::
 
+### splitChunks.usedExports
+
+<ApiMeta addedVersion="1.0.0" />
+
+- **Type:** `boolean`
+- **Default:** Value of [optimization.usedExports](/config/optimization#optimizationusedexports)
+
+Enabling this configuration, the splitting of chunks will be grouped based on the usage of modules exports in different runtimes, ensuring the optimal loading size in each runtime.
+
+For example, if there are three entry points named `foo`, `bar`, and `baz`, they all depend on the same module called `shared`. However, `foo` and `bar` depend on the export `value1` from `shared`, while `baz` depends on the export `value2` from `shared`.
+
+```js title=foo.js
+import { value1 } from 'shared';
+value1;
+```
+
+```js title=bar.js
+import { value1 } from 'shared';
+value1;
+```
+
+```js title=baz.js
+import { value2 } from 'shared';
+value2;
+```
+
+In the default strategy, the `shared` module appears in 3 chunks. If it meets the [minSize for splitting](plugins/webpack/split-chunks-plugin#splitchunksminsize), then the `shared` module should be extracted into a separate chunk.
+
+```
+chunk foo, chunk bar
+      \
+      chunk shared (exports value1 and value2)
+      /
+chunk baz
+```
+
+However, this would result in none of the three entry points having the optimal loaded size. Loading the `shared` module from the `foo` and `bar` entries would unnecessarily load the export `value2`, while loading from the `baz` entry would unnecessarily load the export `value1`.
+
+When the `splitChunks.usedExports` optimization is enabled, it analyzes which exports of the `shared` module are used in different entries. It finds that the exports used in `foo` and `bar` are different from those in `baz`, resulting in the creation of two distinct chunks, one corresponding to the entries `foo` and `bar`, and the other corresponding to the entry `baz`.
+
+```
+chunk foo, chunk bar
+        \
+      chunk shared-1 (exports only value1)
+
+chunk baz
+        \
+      chunk shared-2 (exports only value2)
+```
+
 ### splitChunks.cacheGroups
 
 Cache groups can inherit and/or override any options from `splitChunks.*`; but `test`, `priority` and `reuseExistingChunk` can only be configured on cache group level. To disable any of the default cache groups, set them to `false`.

website/docs/zh/plugins/webpack/split-chunks-plugin.mdx

@@ -217,6 +217,56 @@ module.exports = {
 
 :::
 
+### splitChunks.usedExports
+
+<ApiMeta addedVersion="1.0.0" />
+
+- **类型：** `boolean`
+- **默认值：** 默认值为 [optimization.usedExports](/config/optimization#optimizationusedexports)
+
+开启该配置后，在拆分 chunk 将根据 module 在不同 runtime 中导出的使用情况进行分组，保持在不同 runtime 中都是最优的加载体积。
+
+举个例子，如果一次构建中有 3 个入口分别名为 foo, bar 和 baz，他们都依赖了一个相同的模块 shared，但 foo 和 bar 依赖 shared 中的导出 value1，而 baz 依赖了 shared 中的导出 value2。
+
+```js title=foo.js
+import { value1 } from 'shared';
+value1;
+```
+
+```js title=bar.js
+import { value1 } from 'shared';
+value1;
+```
+
+```js title=baz.js
+import { value2 } from 'shared';
+value2;
+```
+
+默认的策略中 shared 模块由于同时出现在 3 个 chunk 中，如果它满足了[最小拆分体积](plugins/webpack/split-chunks-plugin#splitchunksminsize)，那么 shared 本该被抽离到一个单独 chunk 中。
+
+```
+chunk foo, chunk bar
+      \
+      chunk shared (exports value1 and value2)
+      /
+chunk baz
+```
+
+但这样会导致 3 个入口都不满足最佳的加载体积，从 foo 和 bar 入口加载 shared 会多加载并不需要的导出 value2，而从 baz 入口加载 shared 会多加载并不需要的导出 value1。
+
+当开启 `splitChunks.usedExports` 优化后，会分析 shared 模块分别在不同入口中用到的导出，发现在 foo 和 bar 中用到的导出和 baz 中不一样，会产生 2 个不同的 chunk，其中一个对应入口 foo 和 bar，另一个对应入口 baz。
+
+```
+chunk foo, chunk bar
+        \
+      chunk shared-1 (exports only value1)
+
+chunk baz
+        \
+      chunk shared-2 (exports only value2)
+```
+
 ### splitChunks.cacheGroups
 
 缓存组可以继承和/或覆盖来自 `splitChunks.*` 的任何选项。但是 `test`、`priority` 和 `reuseExistingChunk` 只能在缓存组级别上进行配置。将它们设置为 `false` 以禁用任何默认缓存组。