@rsdoctor/docs 1.2.2-beta.3 → 1.2.3

package/docs/en/_meta.json

@@ -11,7 +11,7 @@
   },
   {
     "text": "Blog",
-    "link": "/blog/release/release-note-1_0",
+    "link": "/blog/release/release-note-1_2",
     "activeMatch": "/blog/"
   }
 ]

package/docs/en/blog/release/_meta.json

@@ -1 +1,7 @@
-["release-note-1_0", "release-note-0_4", "release-note-0_3", "release-note-0_1"]
+[
+  "release-note-1_2",
+  "release-note-1_0",
+  "release-note-0_4",
+  "release-note-0_3",
+  "release-note-0_1"
+]

package/docs/en/blog/release/release-note-1_2.mdx

@@ -0,0 +1,96 @@
+---
+published_at: 2025-08
+---
+
+_August 2025_
+
+# Announcing Rsdoctor 1.2
+
+Rsdoctor 1.2 has been released! 🎉
+
+- **Deep concatenated module analysis**: Added the ability to analyze the size of concatenated modules, helping developers more accurately identify the actual build size after Tree Shaking.
+- **Bundle Size Analysis with Gzip Support**: Bundle size analysis now displays the size after gzip compression, making it easier for developers to understand the real size of production assets.
+- **Enhanced Treemap Visualization**: Introduced and improved the Treemap (rectangle tree map) feature, allowing developers to gain more intuitive insights into bundle composition and resource distribution.
+- **Rsdoctor MCP**: Rsdoctor MCP is an LLM-powered build analysis tool that helps developers quickly obtain build analysis results through Q&A interactions.
+
+## Deep concatenated module analysis
+
+During the Rspack build process, certain modules are hoisted or aggregated into a single closure, forming a concatenated module to improve browser execution efficiency and reduce artifact size. Previously, Rsdoctor could not further decompose and analyze the internal structure of these concatenated modules, as they cannot be further split through AST parsing.
+
+**Rsdoctor 1.2** supports the ability to analyze concatenated module sizes, helping developers accurately understand the actual build size of sub-modules (aggregated modules) after **tree shaking and compression**, facilitating analysis of how concatenated modules affect final bundle size and optimization of code splitting strategies.
+
+Additionally, **the Rsdoctor plugin built into Rspack (>=1.4.11)** has enhanced source map capabilities, allowing seamless analysis of concatenated modules **without enabling source maps**. **However, Webpack projects still require source maps to be enabled.**
+
+> [View usage details](/guide/usage/bundle-size#support-for-concatenated-module-analysis)
+
+<video
+  src="https://assets.rspack.rs/others/assets/rsdoctor/concatenate.mp4"
+  style={{
+    width: '100%',
+    height: 'auto',
+    maxHeight: '50vh',
+    objectFit: 'cover',
+    display: 'block',
+  }}
+  autoPlay={true}
+  muted={true}
+  controls={true}
+  loop={true}
+  playsInline
+/>
+
+## Enhanced treemap visualization
+
+Previously, Rsdoctor's Treemap view was implemented based on webpack-bundle-analyzer, which required Rsdoctor to go through webpack-bundle-analyzer's processing pipeline again after completing its analysis, reducing overall analysis efficiency. Additionally, Treemap page loading was slow, while Treemap is precisely the most commonly used visualization view for developers when analyzing bundles.
+
+**Rsdoctor 1.2** introduces a new classic Treemap artifact analysis view, helping developers more intuitively visualize and analyze bundle composition, Assets, and Modules proportions. You can also search for module resources, click on the module resource, and zoom in to the module area.
+
+> [View usage details](/guide/usage/bundle-size#bundle-treemap-graph)
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+## Support gzip size
+
+To more accurately reflect production environment size performance, Rsdoctor has added support for analyzing gzip compressed sizes, which can be viewed on the Bundle Size page and TreeMap page, as shown below:
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-gzip.png"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+This shows a comparison between original size and gzip compressed size, providing more accurate reference data for production environment optimization.
+
+## Rsdoctor MCP
+
+Rsdoctor provides rich build analysis data, but developers need to spend time on page interactions and learning costs to perform build analysis and optimization. Therefore, we hope to leverage LLM for more intelligent build analysis to help users obtain analysis results more quickly.
+
+Rsdoctor v1.1 introduced MCP support, which is based on **Model Context Protocol (MCP)** protocol, combining Rsdoctor's analysis capabilities with LLM's intelligent understanding abilities. Through natural language Q&A interactions, developers can quickly obtain build analysis results without needing to deeply understand complex analysis interfaces and data structures. Its main features include obtaining artifact information, dependency analysis, optimization suggestions, compilation performance, and tree shaking analysis among other core analytical capabilities.
+
+Rsdoctor MCP supports natural language Q&A - you can directly ask questions like "Which packages have the largest volume?" or "Why wasn't this module tree-shaken?" The system will intelligently analyze and provide optimization suggestions, helping you quickly identify and resolve build issues.
+
+> [View usage details](/guide/start/mcp)
+
+<video
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/mcp-bundle-optimize-2.mp4"
+  style={{
+    width: '100%',
+    height: 'auto',
+    maxHeight: '50vh',
+    objectFit: 'cover',
+    display: 'block',
+  }}
+  autoPlay={true}
+  muted={true}
+  controls={true}
+  loop={true}
+  playsInline
+/>
+
+---
+
+In addition, the 1.1-1.2 versions also included other capability changes. For complete update details, please refer to: [Release page](https://github.com/web-infra-dev/rsdoctor/releases)

package/docs/en/guide/start/quick-start.mdx

@@ -8,7 +8,7 @@ import { PackageManagerTabs } from '@theme';
 
 ### Rspack projects
 
-For projects based on Rspack or Rsbuild, install the following dependencies:
+For projects based on Rspack, such as Rsbuild or Rslib, install the following dependencies:
 
 <PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />
 

package/docs/en/guide/usage/bundle-size.mdx

@@ -25,7 +25,7 @@ Click on the **"Bundle Size"** option in the navigation bar to view the Bundle a
 - **`Initial Chunk`**: The **initial** chunk is the main chunk of the entry point. This chunk contains all the modules specified by the entry point and their dependencies, unlike the **chunks** for "on-demand loading".
   - For more information about Initial Chunk, please refer to [Initial Chunk Introduction](https://webpack.js.org/concepts/under-the-hood/#chunks).
 - **`Duplicate Packages`**: Duplicate third-party packages bundled into the project. Excludes third-party packages that are not bundled into the artifact. Please refer to [Duplicate Packages](/guide/usage/bundle-alerts).
-- **`Concatenated Module`**: A concatenated module is a technique that combines multiple modules into one closure during packaging. In the past, Rspack would package each module into a separate closure, and this encapsulation function would cause slower execution of JavaScript in the browser. Optimization can be achieved by enabling the [`optimization.concatenateModules`](https://webpack.js.org/plugins/module-concatenation-plugin/#root) parameter.
+- **`Concatenated Module`**: A concatenated module is a technique that combines multiple modules into one closure during packaging. In the past, Rspack would package each module into a separate closure, and this encapsulation function would cause slower execution of JavaScript in the browser. Optimization can be achieved by enabling the [`optimization.concatenateModules`](https://rspack.rs/misc/glossary#scope-hoisting) parameter.
 
 ## Bundle overview
 
@@ -122,12 +122,55 @@ The **Modules** tag is shown in the right image, from left to right representing
 
 - **Bundled Size**
   - The final size of the module bundled into the artifact. Some modules labeled as `concatenated` are concatenated modules, which have a certain impact on this value. Please refer to the explanation of `concatenated module` below.
-- **[Concatenated Module](https://webpack.js.org/plugins/module-concatenation-plugin/#root)**: Concatenated modules are modules that are optimized or concatenated into one closure during bundling. There are two types:
+- **[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)**: Concatenated modules are modules that are optimized or concatenated into one closure during bundling. There are two types:
   - One is the concatenated main module, indicating how many `Modules` are concatenated.
   - The other is the concatenated sub-module, indicating which `Module` it is aggregated into. This sub-module cannot be further unpacked after bundling, so the specific `Bundled Size` cannot be determined. Only the size of the entire concatenated module is known, which is marked at the end of the main module.
 - **Module Explorer** tag: Click to open the dependency analysis page between `Modules`.
 - **Code View** tag: Click to expand code segments, including `Source` (source code), `Transformed` (compiled code), and `Bundled` (bundled code).
 
+### Support for concatenated module analysis
+
+First, **[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)** refers to multiple modules that are merged into a single closure, which cannot be analyzed through AST syntax analysis. However, concatenated modules may contain code from different packages, making the analysis of sub-modules within concatenated modules a key focus, especially for projects using the ["all-in-one"](https://rsbuild.rs/guide/optimization/code-splitting#all-in-one) bundling approach.
+
+Rsdoctor supports the analyze of **[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)** and accurately calculates the real bundled size of sub-modules within concatenated modules, helping developers accurately identify the actual build size after Tree Shaking, analyze the impact of merged modules on final bundle size, and optimize code splitting strategies.
+
+- **For Rspack projects**, the Rsdoctor native plugin built into Rspack (>=1.4.11) has enhanced sourcemap capabilities, allowing seamless analysis of concatenated modules without enabling source maps.
+
+> As shown in the figure below, this is the analysis of 'all-in-one' bundling. The first image shows the previous inability to analyze, while the second image shows the analyzable situation.
+
+- Not support concatenated module
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-before.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+- Support concatenated module
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-after.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+- **For webpack projects**, source maps must be enabled to accurately decompose and analyze concatenated modules, as shown in the following configuration.
+
+```js
+export default {
+  // ...
+  devtool: 'cheap-source-map', // or other devtool configuration
+};
+```
+
+- Rsdoctor supports the following sourcemap configurations for Concatenated Module analysis:
+  - source-map
+  - hidden-source-map
+  - inline-source-map
+  - cheap-source-map
+  - cheap-module-source-map
+  - nosources-source-map
+
 ### Module details
 
 Click the module tag to view module details, as shown below:
@@ -140,9 +183,9 @@ Click the module tag to view module details, as shown below:
 
 > For more details, see: [Module details](/guide/usage/module-analysis)
 
-## Bundle tile graph
+## Bundle treemap graph
 
-Click the **"Tile Graph"** label on the **"Bundle Size"** page to view the tile graph. The tile graph clearly shows the proportion and relationship between resources and modules, as shown in the following image:
+Click the **"Treemap Graph"** label on the **"Bundle Size"** page to view the treemap. The treemap clearly shows the proportion and relationship between resources and modules, as shown in the following image:
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"

package/docs/zh/_meta.json

@@ -11,7 +11,7 @@
   },
   {
     "text": "博客",
-    "link": "/blog/release/release-note-1_0",
+    "link": "/blog/release/release-note-1_2",
     "activeMatch": "/blog/"
   }
 ]

package/docs/zh/blog/release/_meta.json

@@ -1 +1,7 @@
-["release-note-1_0", "release-note-0_4", "release-note-0_3", "release-note-0_1"]
+[
+  "release-note-1_2",
+  "release-note-1_0",
+  "release-note-0_4",
+  "release-note-0_3",
+  "release-note-0_1"
+]

package/docs/zh/blog/release/release-note-1_2.mdx

@@ -0,0 +1,96 @@
+---
+published_at: 2025-08
+---
+
+_August 2025_
+
+# Rsdoctor 1.2 发布公告
+
+Rsdoctor 1.2 版本已经发布啦 🎉
+
+- **深入 concatenate module 分析**：新增对 concatenate module（聚合模块）体积的分析能力，帮助开发者更精确地识别 Tree Shaking 后的实际打包体积。
+- **Bundle 体积分析支持 Gzip**：Bundle 体积分析新增对 gzip 压缩体积的展示，让开发者能方便了解产物上线后的真实体积表现。
+- **Treemap 可视化增强**：新增并优化了 Treemap（矩形树图）功能，帮助开发者以更直观方式洞察 bundle 组成和资源分布。
+- **Rsdoctor MCP** Rsdoctor MCP 是一个借助 LLM 的构建分析工具，通过问答形式帮助开发者快速获取构建分析结果。
+
+## 深入 concatenate module 分析
+
+在 Rspack 构建过程中，某些 Modules 会被提升或聚合到一个闭包中，从而合成一个 concatenated module，用来提升浏览器中的执行效率以及减少产物体积。此前，Rsdoctor 无法进一步分解和分析这些 Concatenated Module 的内部结构，因为它们无法通过 AST 继续拆解。
+
+**Rsdoctor 1.2 版本**新增了对 concatenated module 的分析能力，帮助开发者准确获知 Tree Shaking 及压缩后的子 Modules（被聚合的 Modules）的实际构建体积，便于分析 Concatenated Module 对最终 bundle 大小的影响以及优化分包策略。
+
+此外，**Rspack（>=1.4.11）** 内部的 Rsdoctor 插件也增强了 source map 相关能力，可以在**不开启 source map** 的情况下，可无痛分析 concatenate module。**然而，Webpack 项目中则要开启 source map。**
+
+> [查看使用详情](/guide/usage/bundle-size#%E6%94%AF%E6%8C%81-concatenated-module-%E5%88%86%E6%9E%90)
+
+<video
+  src="https://assets.rspack.rs/others/assets/rsdoctor/concatenate.mp4"
+  style={{
+    width: '100%',
+    height: 'auto',
+    maxHeight: '50vh',
+    objectFit: 'cover',
+    display: 'block',
+  }}
+  autoPlay={true}
+  muted={true}
+  controls={true}
+  loop={true}
+  playsInline
+/>
+
+## Treemap 可视化增强
+
+此前，Rsdoctor 的 Treemap 视图基于 webpack-bundle-analyzer 实现，这导致 Rsdoctor 完成分析后还需要再次经过 webpack-bundle-analyzer 的处理流程，降低了整体分析效率。同时，Treemap 页面加载速度较慢，而 Treemap 恰恰是开发者进行包分析时最常用的可视化视图。
+
+**Rsdoctor 1.2 版本**新增了 Treemap 视图，是一种经典的构建产物分析视图，能帮助开发者更直观地可视化并分析 bundle 的构成，以及资源（Assets）和模块（Modules）的占比。同时也可以搜索模块资源，点击模块资源，可以放大到该模块区域。
+
+> [查看使用详情](/guide/usage/bundle-size#%E4%BA%A7%E7%89%A9%E6%80%BB%E8%A7%88%E7%93%A6%E7%89%87%E5%9B%BE)
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+## 支持 Gzip Size
+
+为了更真实地反映生产环境的体积表现，Rsdoctor 新增了对 gzip 压缩体积的分析支持，可在 Bundle Size 页面和 TreeMap 页面查看到，如下图：
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-gzip.png"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+可以看到原始体积和 gzip 压缩后的体积对比，同时为生产环境优化提供更准确的参考数据。
+
+## Rsdoctor MCP
+
+Rsdoctor 分析数据非常丰富，但开发者需要花费时间进行页面交互和学习成本进行构建分析及优化，所以希望能够借助 LLM 来做更智能的构建分析。帮助用户更快速地获取分析结果。
+
+Rsdoctor v1.1 引入了 MCP 支持，它基于 **Model Context Protocol (MCP)** 协议，将 Rsdoctor 的分析能力与 LLM 的智能理解能力相结合。通过自然语言问答的形式，开发者可以快速获取构建分析结果，无需深入理解复杂的分析界面和数据结构。
+
+Rsdoctor MCP 支持自然语言问答，你可以直接问"哪些包体积最大？"、"为什么这个模块没有被 Tree Shaking？"等问题，系统会智能分析并给出优化建议，帮助你快速定位和解决构建问题。主要功能包括获取产物信息、依赖分析、优化建议、编译性能及 tree shaking 分析等核心分析能力。
+
+> [查看使用详情](/guide/start/mcp)
+
+<video
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/mcp-bundle-optimize-2.mp4"
+  style={{
+    width: '100%',
+    height: 'auto',
+    maxHeight: '50vh',
+    objectFit: 'cover',
+    display: 'block',
+  }}
+  autoPlay={true}
+  muted={true}
+  controls={true}
+  loop={true}
+  playsInline
+/>
+
+---
+
+除此之外，1.1-1.2 期间还包括其他能力变动。完整更新内容请参考：[Release 页面](https://github.com/web-infra-dev/rsdoctor/releases)

package/docs/zh/guide/start/quick-start.mdx

@@ -8,7 +8,7 @@ import { PackageManagerTabs } from '@theme';
 
 ### Rspack 项目
 
-基于 Rspack 或 Rsbuild 的项目，安装以下依赖：
+基于 Rspack 的项目（比如 Rsbuild 或 Rslib），安装以下依赖：
 
 <PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />
 

package/docs/zh/guide/usage/bundle-size.mdx

@@ -25,7 +25,7 @@
 - **`Initial Chunk`**: **initial(初始化)** 是入口起点的主 Chunk，该 chunk 包含入口起点指定的所有模块及其依赖项，与「**按需加载**」的 **Chunk** 资源不同。
   - 有关 Initial Chunk 的详细信息，请参阅 [Initial Chunk 介绍](https://webpack.js.org/concepts/under-the-hood/#chunks)。
 - **`Duplicate Packages`**: 打包到项目中的重复的第三方包。不包括未打包进产物的第三方包，请参阅[重复第三方包](/guide/usage/bundle-alerts)。
-- **`Concatenated Module`**: 串联模块是将多个模块在打包时提升或串联到一个闭包中。在过去，Webpack 在打包时会将每个模块都打包到单独的闭包中，这种封装函数会导致 JavaScript 在浏览器中执行时较慢。可以通过打开 [`optimization.concatenateModules`](https://webpack.js.org/plugins/module-concatenation-plugin/#root) 参数来进行优化。
+- **`Concatenated Module`**: 串联模块是将多个模块在打包时提升或串联到一个闭包中。在过去，Webpack 在打包时会将每个模块都打包到单独的闭包中，这种封装函数会导致 JavaScript 在浏览器中执行时较慢。可以通过打开 [`optimization.concatenateModules`](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6) 参数来进行优化。
 
 ## 产物概览
 
@@ -113,12 +113,55 @@
 
 - **Bundled Size**
   - 模块打包进产物的最终大小。一些标有 `concatenated` 的模块是串联模块，对此值有一定影响，请参阅下方的 `concatenated module` 解释。
-- **[Concatenated Module](https://webpack.js.org/plugins/module-concatenation-plugin/#root)** 串联模块，串联模块是将多个模块在打包时提升或串联到一个闭包中。有两种类型：
+- **[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 串联模块，串联模块是将多个模块在打包时提升或串联到一个闭包中。有两种类型：
   - 一种是串联主模块，标明串联了多少个 `Modules`；
   - 另一种是被串联的子模块，标明被聚合到了哪个 `Module` 内。这种子模块无法继续拆解打包后的代码，因此无法得知具体的 `Bundled Size`，只能得知整个串联模块的大小，该大小标注在主模块尾部。
 - **Module Explorer** 标签：点击可打开 `Module` 之间的依赖关系分析页面。
 - **代码查看** 标签，点击可展开代码段，包括 `Source`（源码）、`Transformed`（编译后代码）和 `Bundled`（打包后代码）。
 
+### 支持 concatenated module 分析
+
+首先，**[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 是多个 Modules 被合并在了一个闭包中，无法通过 AST 语法分析拆解，但 concatenated module 中可能包含不同 Package 的代码，分析 concatenated module 内部子 Modules 也成为了重点，尤其是采用 ["all-in-one"](https://rsbuild.rs/guide/optimization/code-splitting#all-in-one) 方式打包的项目。
+
+Rsdoctor 支持了对 **[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 的拆解并精确计算 concatenated module 中子 modules 的真实的打包后的体积，帮助开发者准确识别 Tree Shaking 后的实际构建体积，分析合并模块对最终 bundle 大小的影响以及优化分包策略。
+
+- **Rspack 项目**，Rspack（>=1.4.11）内部的 Rsdoctor native 插件也增强了 sourcemap 相关能力，可以在不开启 source map 的情况下，无痛分析 concatenate module。
+
+> 可以看到下图，是 'all-in-one' 的打包分析，上图为之前无法分析的情况，下图为可分析情况
+
+- 不支持分析
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-before.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+- 支持分析
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-after.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+- **webpack 项目**，则需要开启 sourcemap，才可以准确拆解并分析 concatenated module，如下配置。
+
+```js
+export default {
+  // ...
+  devtool: 'cheap-source-map', // 或其他 devtool 配置
+};
+```
+
+- Rsdoctor 对 Concatenated Module 分析支持如下 Sourcemap 配置：
+  - source-map
+  - hidden-source-map
+  - inline-source-map
+  - cheap-source-map
+  - cheap-module-source-map
+  - nosources-source-map
+
 ### Module 详情
 
 点击模块标签，可以查看模块详情，如下图所示：
@@ -133,7 +176,7 @@
 
 ## 产物总览瓦片图
 
-点击 **「Bundle Size」** 页面的 **「Tile Graph」** 标签，可以查看瓦片图。通过瓦片图可以清晰的看到各个资源和模块之间的占比和关系，如下图所示：
+点击 **「Bundle Size」** 页面的 **「Treemap Graph」** 标签，可以查看瓦片图。通过瓦片图可以清晰的看到各个资源和模块之间的占比和关系，如下图所示：
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/docs",
-  "version": "1.2.2-beta.3",
+  "version": "1.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/rsdoctor",
@@ -31,7 +31,7 @@
     "rspress-plugin-font-open-sans": "^1.0.0",
     "rspress-plugin-sitemap": "^1.1.4",
     "typescript": "^5.2.2",
-    "@rsdoctor/types": "1.2.2-beta.3"
+    "@rsdoctor/types": "1.2.3"
   },
   "dependencies": {
     "@rstack-dev/doc-ui": "1.10.8",