@rsdoctor/docs 1.1.4 → 1.1.6

package/docs/en/config/options/options.mdx

@@ -295,18 +295,11 @@ type ISupport = {
 
 If `supports.banner` is enabled, Rsdoctor will enable compatibility logic for BannerPlugin. For more details, please refer to: [Supports BannerPlugin](../../guide/usage/bundle-size#supports-bannerplugin)
 
-#### generateTileGraph
+#### ~~generateTileGraph [**Deprecated**]~~
 
-- default: true. The default value in rspack is false.
-- type: boolean.
-
-Whether to enable the ability to generate tile graphs, which affects whether the Bundle Size page has a tile graph from `webpack-bundle-analyzer`.
+<Badge text="Deprecated" type="warning" />
 
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tile-graph.png"
-  width="500px"
-  style={{ margin: 'auto' }}
-/>
+Rsdoctor supports generating Tree Map graphs by default, so this option does not need to be configured.
 
 #### parseBundle
 

package/docs/en/guide/start/mcp.mdx

@@ -9,7 +9,7 @@
 **@rsdoctor/mcp-server** provides four core analysis capabilities:
 
 - **Bundle Analysis**: Analyzes bundle size, composition and other information
-- **Dependency Analysis**: Analyzes project dependencies and duplicate dependency issues
+- **Dependency Analysis**: Analyzes project dependency relationships, duplicate dependencies, and Tree Shaking issues.
 - **Bundle Optimization Suggestions**: Provides suggestions for bundle size optimization and code splitting
 - **Compilation Optimization Suggestions**: Analyzes compilation time and provides compilation performance optimization suggestions
 
@@ -81,6 +81,17 @@ Example video:
   playsInline
 />
 
+### 4. Tree Shaking Issues
+
+By asking "Please help me to check why react-dom/client.js can not be tree-shaken?", the tool will help analyze why this module cannot be tree-shaken.
+
+> Note: Please use Rsdoctor plugin version 1.1.5 or above.
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
+  alt="tree-shaking"
+/>
+
 ## Quick start
 
 ### 💡 Version requirements

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

@@ -128,12 +128,32 @@ The **Modules** tag is shown in the right image, from left to right representing
 - **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).
 
-## Bundle overview tile graph
+### Module details
 
-Click the **"Bundle Analyzer Graph"** button on the **"Bundle Size"** page to view the classic tile graph.
+Click the module tag to view module details, as shown below:
+
+<img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
+
+- **Reasons**: This refers to the reason why a Module exists, i.e., which Modules import this Module. The entire Reasons Tree shows the upstream reference chain of this Module, including both direct and indirect parents. This corresponds to Rspack's `stats.reasons`.
+- **Dependencies**: The Modules that this Module depends on.
+- **Bailout Reason**: The reason why this Module failed Tree Shaking during the build process.
+
+> For more details, see: [Module details](/guide/usage/module-analysis)
+
+## Bundle tile 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:
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+You can also click the 🔍 button on the card title to search for Module resources, click the Module resource, and zoom in to the Module area, as shown in the following image:
 
 <img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tile-graph.png"
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
   width="500px"
   style={{ margin: 'auto' }}
 />

package/docs/en/guide/usage/module-analysis.mdx

@@ -27,6 +27,7 @@ Clicking on an **Assets** in the **[Bundle Size](./bundle-size)** page will disp
 
 - **`Reasons`**: As the name suggests, it means the reasons why a `Module` exists. Reasons indicate which other `Module`s import this `Module`, and the entire `Reasons Tree` represents the upstream reference chain of this `Module`, including both direct and indirect parent `Module`s. [Similar to Webpack's stats.reasons.](https://webpack.js.org/configuration/stats/#statsreasons)
 - **`Dependencies`**: The `Module`s that this `Module` depends on.
+- **`Bailout Reason`** : The reason why this `Module` failed Tree Shaking.
 
 ## Reasons dependency tree
 
@@ -56,3 +57,24 @@ The `Reasons Tree` displays the dependency chain of this `Module`, showing which
   width="600px"
   style={{ margin: 'auto' }}
 />
+
+## Bailout Reason
+
+### Usage
+
+`Bailout Reason` shows the reason why this `Module` failed Tree Shaking.
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+You can also use MCP for analysis. By asking "Please help me to check why react-dom/client.js can not be tree-shaken?", the tool will help analyze why this module cannot be tree-shaken.
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
+  alt="tree-shaking"
+/>
+
+> For MCP analysis, see [MCP Analysis](/guide/start/mcp)

package/docs/zh/config/options/options.mdx

@@ -294,18 +294,12 @@ type ISupport = {
 
 如果开启 `supports.banner` 则会开启 Rsdoctor 对 BannerPlugin 的兼容逻辑。详细请看：[支持 BannerPlugin](../../guide/usage/bundle-size#%E6%94%AF%E6%8C%81-bannerplugin)
 
-#### generateTileGraph
+#### ~~generateTileGraph [**Deprecated**]~~
 
-- **默认值：** 使用 Rspack 时默认值是 `false`，否则为 `true`
-- **类型：** `boolean`
+<Badge text="Deprecated" type="warning" />
 
-是否开启生成瓦片图的能力，影响是 Bundle Size 页面中是否有 `webpack-bundle-analyzer` 的瓦片图。
+Rsdoctor 默认支持生成 Tree Map 图，所以不需要配置此选项。
 
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tile-graph.png"
-  width="500px"
-  style={{ margin: 'auto' }}
-/>
 #### parseBundle
 
 - **类型：** `boolean`

package/docs/zh/guide/start/mcp.mdx

@@ -9,7 +9,7 @@
 **@rsdoctor/mcp-server** 提供四大类核心分析能力：
 
 - **产物信息分析**: 分析构建产物的体积、组成等信息
-- **依赖问题分析**: 分析项目依赖关系、重复依赖等问题
+- **依赖问题分析**: 分析项目依赖关系、重复依赖、Tree Shaking 等问题
 - **产物优化建议**: 提供产物体积优化、代码分割等建议
 - **编译优化建议**: 分析编译耗时，提供编译性能优化建议
 
@@ -81,6 +81,17 @@
   playsInline
 />
 
+### 4. Tree shaking 问题
+
+通过提问 "Please help me to check why react-dom/client.js can not be tree-shaken?"，工具会帮忙分析该模块没有被 Tree shaking 的原因。
+
+> 注意：请使用 1.1.5 及以上版本的 Rsdoctor 插件。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
+  alt="tree-shaking"
+/>
+
 ## 快速开始
 
 ### 💡 版本要求

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

@@ -119,12 +119,32 @@
 - **Module Explorer** 标签：点击可打开 `Module` 之间的依赖关系分析页面。
 - **代码查看** 标签，点击可展开代码段，包括 `Source`（源码）、`Transformed`（编译后代码）和 `Bundled`（打包后代码）。
 
+### Module 详情
+
+点击模块标签，可以查看模块详情，如下图所示：
+
+<img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
+
+- Reasons : 顾名思义是 [原因] 的意思，即某个 Module 存在的原因。Reasons 就是该 Module 被哪些 Module 们引入，而整个 Reasons Tree 就是这个 Module 的整个上游引用链，包括了直接父级和间接父级们。即 Rspack 的 stats.reasons。
+- Dependencies : 是该 Module 依赖了哪些 Module。
+- Bailout Reason : Tree shaking 时，该 Module Tree shaking 失败的原因。
+
+> 更多可查看详情：[Module 详情](/guide/usage/module-analysis)
+
 ## 产物总览瓦片图
 
-点击 **「Bundle Size」** 页面的 **「Bundle Analyzer Graph」** 按钮，可以查看经典的瓦片图。
+点击 **「Bundle Size」** 页面的 **「Tile Graph」** 标签，可以查看瓦片图。通过瓦片图可以清晰的看到各个资源和模块之间的占比和关系，如下图所示：
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+同时可以点击卡片标题侧的 🔍 按钮，搜索 Module 资源，点击 Module 资源，可以放大到该 Module 区域，如下图所示：
 
 <img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tile-graph.png"
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
   width="500px"
   style={{ margin: 'auto' }}
 />

package/docs/zh/guide/usage/module-analysis.mdx

@@ -29,6 +29,7 @@
 
 - **`Reasons`** : 顾名思义是 `[原因]` 的意思，即某个 `Module` 存在的原因。Reasons 就是该 `Module` 被哪些 `Module` 们引入，而整个 `Reasons Tree` 就是这个 `Module` 的整个上游引用链，包括了直接父级和间接父级们。[即 Rspack 的 stats.reasons。](https://webpack.js.org/configuration/stats/#statsreasons)
 - **`Dependencies`** : 是该 `Module` 依赖了哪些 `Module`。
+- **`Bailout Reason`** : Tree shaking 时，该 `Module` Tree shaking 失败的原因。
 
 ## Reasons 依赖树
 
@@ -58,3 +59,24 @@
   width="600px"
   style={{ margin: 'auto' }}
 />
+
+## Bailout Reason
+
+### 使用介绍
+
+`Bailout Reason` 展示了该 `Module` 在 Tree shaking 时失败的原因。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+还可以使用 MCP 进行分析，通过提问 "Please help me to check why react-dom/client.js can not be tree-shaken?"，工具会帮忙分析该模块没有被 Tree shaking 的原因。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
+  alt="tree-shaking"
+/>
+
+> MCP 分析请查看 [MCP 分析](/guide/start/mcp)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/docs",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/rsdoctor",
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@rspress/plugin-rss": "2.0.0-beta.6",
-    "@rspress/plugin-llms": "2.0.0-beta.14",
-    "@rspress/plugin-algolia": "2.0.0-beta.14",
+    "@rspress/plugin-llms": "2.0.0-beta.18",
+    "@rspress/plugin-algolia": "2.0.0-beta.18",
     "@types/node": "^22.8.1",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
@@ -32,7 +32,7 @@
     "rspress-plugin-font-open-sans": "^1.0.0",
     "rspress-plugin-sitemap": "^1.1.4",
     "typescript": "^5.2.2",
-    "@rsdoctor/types": "1.1.4"
+    "@rsdoctor/types": "1.1.6"
   },
   "dependencies": {
     "@rstack-dev/doc-ui": "1.10.6",