docs: LimitChunkCountPlugin (#6270)

* docs: LimitChunkCountPlugin docs * docs: nav for LimitChunkCountPlugin * fix: format * docs: remove unused component * docs: add WebpackLicense in SourceMapDevToolPlugin docs * docs: better tip for Node.js API
web-infra-dev · Apr 17, 2024 · 55ca885 · 55ca885
1 parent 7685739
commit 55ca885
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 8 deletions.
diff --git a/website/docs/en/api/node-api.mdx b/website/docs/en/api/node-api.mdx
@@ -5,12 +5,14 @@ import { ApiMeta, Stability } from '../../../components/ApiMeta.tsx';
 
 # Node.js API
 
-> `@rspack/core` is designed based on Webpack's Node.js API to ensure functional consistency and a similar user experience.
-
 Rspack provides a Node.js API which can be used directly in Node.js runtime.
 
 The Node.js API is useful in scenarios in which you need to customize the build or development process since all the reporting and error handling must be done manually and webpack only does the compiling part. For this reason the [`stats`](/config/stats) configuration options will not have any effect in the `rspack()` call.
 
+:::tip
+`@rspack/core` is designed based on Webpack's Node.js API to ensure functional consistency and a similar user experience.
+:::
+
 ## Installation
 
 To start using the Rspack Node.js API, first install `@rspack/core` if you haven’t yet:

diff --git a/website/docs/en/plugins/webpack/limit-chunk-count-plugin.mdx b/website/docs/en/plugins/webpack/limit-chunk-count-plugin.mdx
@@ -0,0 +1,30 @@
+import { ApiMeta } from '../../../../components/ApiMeta.tsx';
+import WebpackLicense from '../../../../components/webpack-license';
+
+<WebpackLicense from="https://webpack.js.org/plugins/limit-chunk-count-plugin/" />
+
+# LimitChunkCountPlugin
+
+<ApiMeta addedVersion={'0.3.10'} />
+
+While writing your code, you may have already added many code split points to load stuff on demand. After compiling you might notice that some chunks are too small - creating larger HTTP overhead. `LimitChunkCountPlugin` can post-process your chunks by merging them.
+
+```js
+new rspack.optimize.LimitChunkCountPlugin({
+  // Options...
+});
+```
+
+## Options
+
+### maxChunks
+
+- **Type:** `number`
+
+Limit the maximum number of chunks using a value greater than or equal to `1`. Using `1` will prevent any additional chunks from being added as the entry/main chunk is also included in the count.
+
+```js
+new rspack.optimize.LimitChunkCountPlugin({
+  maxChunks: 5,
+});
+```
diff --git a/website/docs/en/plugins/webpack/source-map-dev-tool-plugin.mdx b/website/docs/en/plugins/webpack/source-map-dev-tool-plugin.mdx
@@ -1,5 +1,8 @@
+import WebpackLicense from '../../../../components/webpack-license';
 import { ApiMeta } from '../../../../components/ApiMeta.tsx';
 
+<WebpackLicense from="https://webpack.js.org/plugins/source-map-dev-tool-plugin/" />
+
 # SourceMapDevToolPlugin
 
 <ApiMeta addedVersion={'0.5.2'} />

diff --git a/website/docs/en/plugins/webpack/split-chunks-plugin.mdx b/website/docs/en/plugins/webpack/split-chunks-plugin.mdx
@@ -1,5 +1,3 @@
-import PropertyType from '../../../../components/property-type.tsx';
-
 import WebpackLicense from '../../../../components/webpack-license';
 import { ApiMeta } from '../../../../components/ApiMeta';
 

diff --git a/website/docs/zh/api/node-api.mdx b/website/docs/zh/api/node-api.mdx
@@ -5,12 +5,14 @@ import { ApiMeta, Stability } from '../../../components/ApiMeta.tsx';
 
 # Node.js API
 
-> `@rspack/core`是基于 Webpack Node.js API 设计的，旨在提供一致的功能和相似的使用体验。
-
 Rspack 提供了 Node.js API，可以在 Node.js 运行时下直接使用。
 
 当你需要自定义构建或开发流程时，Node.js API 非常有用，因为此时所有的报告和错误处理都必须自行实现，Rspack 仅仅负责编译的部分。所以 [`stats`](/config/stats) 配置选项不会在 `rspack()` 调用中生效。
 
+:::tip 提示
+`@rspack/core` 是基于 Webpack Node.js API 设计的，旨在提供一致的功能和相似的使用体验。
+:::
+
 ## 安装
 
 开始使用 Rspack 的 Node.js API 之前，首先你需要安装 `@rspack/core`：

diff --git a/website/docs/zh/plugins/webpack/limit-chunk-count-plugin.mdx b/website/docs/zh/plugins/webpack/limit-chunk-count-plugin.mdx
@@ -0,0 +1,30 @@
+import { ApiMeta } from '../../../../components/ApiMeta.tsx';
+import WebpackLicense from '../../../../components/webpack-license';
+
+<WebpackLicense from="https://webpack.js.org/plugins/limit-chunk-count-plugin/" />
+
+# LimitChunkCountPlugin
+
+<ApiMeta addedVersion={'0.3.10'} />
+
+在编写代码时，你可能已经添加了许多代码分割点以按需加载内容。在编译后，你可能会注意到有些 chunk 太小——造成了较大的 HTTP 开销。`LimitChunkCountPlugin` 可以在处理完毕后通过合并它们来优化你的 chunk。
+
+```js
+new rspack.optimize.LimitChunkCountPlugin({
+  // 选项...
+});
+```
+
+## 选项
+
+### maxChunks
+
+- **类型：** `number`
+
+通过使用大于或等于`1`的值来限制最大代码块数量。使用`1`将阻止添加任何额外的代码块，因为入口/主代码 chunk 也包含在计数中。
+
+```js
+new rspack.optimize.LimitChunkCountPlugin({
+  maxChunks: 5,
+});
+```
diff --git a/website/docs/zh/plugins/webpack/source-map-dev-tool-plugin.mdx b/website/docs/zh/plugins/webpack/source-map-dev-tool-plugin.mdx
@@ -1,5 +1,8 @@
+import WebpackLicense from '../../../../components/webpack-license';
 import { ApiMeta } from '../../../../components/ApiMeta.tsx';
 
+<WebpackLicense from="https://webpack.docschina.org/plugins/source-map-dev-tool-plugin/" />
+
 # SourceMapDevToolPlugin
 
 <ApiMeta addedVersion={'0.5.2'} />

diff --git a/website/docs/zh/plugins/webpack/split-chunks-plugin.mdx b/website/docs/zh/plugins/webpack/split-chunks-plugin.mdx
@@ -1,5 +1,3 @@
-import PropertyType from '../../../../components/property-type.tsx';
-
 import WebpackLicense from '../../../../components/webpack-license';
 import { ApiMeta } from '../../../../components/ApiMeta';
 

diff --git a/website/rspress.config.ts b/website/rspress.config.ts
@@ -398,6 +398,10 @@ function getSidebarConfig(lang: 'zh' | 'en'): Sidebar {
             text: 'EnvironmentPlugin',
             link: getLink('/plugins/webpack/environment-plugin'),
           },
+          {
+            text: 'LimitChunkCountPlugin',
+            link: getLink('/plugins/webpack/limit-chunk-count-plugin'),
+          },
         ],
       },
       {