@rsdoctor/docs 0.0.1

package/docs/en/guide/more/faq.mdx

@@ -0,0 +1,104 @@
+# FAQ
+
+## How to use only a specific feature of Rsdoctor?
+
+When we **only need** the [bundle size analysis](../usage/bundle-size) feature of Rsdoctor, we can configure the corresponding [Features](/config/options/options) option when integrating the Rsdoctor plugin. Refer to the code snippet below:
+
+```ts
+import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';
+
+new RsdoctorWebpackPlugin({
+  features: ['bundle'], // Represents enabling only the bundle size analysis feature
+});
+```
+
+## Loader time-consuming data is inaccurate?
+
+The time-consuming data provided by Rsdoctor for loaders is an **estimated time**. Why can't it accurately measure the timing? It's because we know that loader execution can be both **asynchronous** and **synchronous**.
+Additionally, the builder will **parallelize the execution** of multiple non-conflicting loader functions. Since JavaScript is single-threaded, multiple loader functions can **compete for the current task queue**.
+Furthermore, the asynchronous logic within loader functions cannot be recognized, causing a single loader function to potentially span across the execution of multiple other loaders. As a result, there are three possible cases, as shown in the following diagram:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-cases.jpeg"
+  style={{ width: '250px' }}
+/>
+
+Therefore, the loader timing provided by Rsdoctor is an **estimate**. The timing data we provide is adapted to handle Case 1 and Case 2 from the diagram. As for Case 3, we are still exploring solutions.
+
+## `out of memory` error when using `Rsdoctor` for building
+
+If you encounter an `out of memory` error, you can try the following two methods, with the first one being recommended:
+
+### Method 1
+
+Increase the memory limit of Node, for example: NODE_OPTIONS=--max-old-space-size=8096.
+
+### Method 2
+
+You can add the `lite` field to the `features` array to use the lite mode. Additionally, since the `features` array overrides the default configuration when it is an array, you should:
+
+- Add `loader` and `plugins` to the `features` array if you need build-time analysis to enable the analysis of loader and plugin timings.
+
+- Add `bundle` to the `features` array if you need bundle analysis to enable the analysis of build artifacts.
+
+The following example enables the lite mode, build-time analysis, and bundle analysis:
+
+```js
+const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
+
+// adding the plugin to your configuration
+module.exports = {
+  // ...
+  plugins: [
+    new RsdoctorWebpackPlugin({
+      disableClientServer: false,
+      features: ['lite', 'loader', 'plugins', 'bundle'],
+    }),
+  ].filter(Boolean),
+};
+```
+
+- Cause: During the build process, the source code information is stored, which exceeds the memory limit. Enabling the `lite` mode can alleviate this issue.
+- Difference: The difference between the **lite mode** and the **normal mode** is that the **lite mode** no longer stores the **source code information**, only the **bundled code** is stored. Additionally, the code displayed in the analysis report will only consist of the **bundled code**.
+
+## Next.js
+
+### Issue with Next.js project report page
+
+Initialize the RsdoctorWebpackPlugin plugin in the [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) of `next.config.js`.
+
+However, in Next.js, when Rsdoctor is enabled and the **build command** is executed, the report server started by Rsdoctor will be disconnected. Therefore, if you need to reopen the report, you can use **[@rsdoctor/cli](../start/cli.mdx)** without performing the build operation.
+
+For example, if the build artifact of Rsdoctor is located at the path `.next/.rsdoctor/manifest.json`, you can open the report page by executing the following command:
+
+```bash
+npx @rsdoctor/cli analyze --profile .next/.rsdoctor/manifest.json
+
+```
+
+### Loader analysis with rule override is not supported in Next.js
+
+- Rsdoctor Loader logic: Since Rsdoctor modifies the Loader Rules, Rsdoctor wraps the Module in a Proxy to support Loader logic with rule override.
+
+- Next.js specific logic: In Next.js, the LoaderContext adds the currentTraceSpan property, which is obtained from the value retrieved using the Module as the key. However, since Rsdoctor wraps the Module in a Proxy (referred to as ProxyModule), retrieving the value using ProxyModule as the key will result in no value being obtained.
+
+Based on the above reason, Rsdoctor does not wrap the Module in a Proxy in Next.js projects, which means it does not support Loader analysis with rule override. If you encounter Loader errors, you need to configure the **[features](../../config/options/options#features)** parameter to disable **Loader** analysis. You can use the following configuration:
+
+```js title="next.config.js"
+const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
+
+module.exports = {
+  // ...
+  webpack: (config, { isServer }) => {
+    config.plugins.push(
+      new RsdoctorWebpackPlugin({
+        // 插件选项
+        features: ['bundle', 'plugins'],
+      }),
+    );
+    return config;
+  },
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).

package/docs/en/guide/more/rules.mdx

@@ -0,0 +1,5 @@
+# Rule Index
+
+import RuleIndex from '@src/components/RuleIndex';
+
+<RuleIndex />

package/docs/en/guide/start/_meta.json

@@ -0,0 +1 @@
+["intro", "quick-start", "features", "cli"]

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

@@ -0,0 +1,94 @@
+# CLI Tutorial
+
+We provide `@rsdoctor/cli` for you to use Rsdoctor's features locally through the CLI program.
+
+:::tip
+`@rsdoctor/webpack-plugin`, `@rsdoctor/rspack-plugin`, and `@rsdoctor/cli` should have the same major and minor versions.
+:::
+
+## Install @rsdoctor/cli
+
+:::tip
+
+- @rsdoctor/cli & @rsdoctor/webpack-plugin & @rsdoctor/rspack-plugin >= 0.1.3.
+- You can also use the non-installation method by using the `npx @rsdoctor/cli <command> [options]` command.
+
+:::
+
+import { PackageManagerTabs } from '@theme';
+
+import { Tab, Tabs } from 'rspress/theme';
+
+<PackageManagerTabs command="add @rsdoctor/cli -D" />
+
+## Command Usage
+
+```linux
+
+rsdoctor <command> [options]
+
+```
+
+`@rsdoctor/cli` currently provides the following commands for different functionalities:
+
+### analyze Command
+
+The `analyze` command is mainly used to load the [manifest.json](../../config/options/term.mdx) file locally and start Rsdoctor's analysis report page without the need to rebuild.
+
+```linux
+rsdoctor analyze --profile <manifestFile>
+```
+
+**Parameter Definition**
+
+- `manifestFile` is the path to the [manifest.json](../../config/options/term.mdx) file (supports local path)
+
+**Usage Example**
+
+```bash
+rsdoctor analyze --profile "./dist/.rsdoctor/manifest.json"
+```
+
+## Node API
+
+We provide a Node.js API in `@rsdoctor/cli` that allows you to make calls during runtime in Node.js.
+
+**Importing the Module**
+
+<Tabs>
+
+<Tab label="cjs">
+
+```js
+const { execute } = require('@rsdoctor/cli');
+```
+
+</Tab>
+
+<Tab label="esm">
+
+```js
+import { execute } from '@rsdoctor/cli';
+```
+
+</Tab>
+
+</Tabs>
+
+**execute()**
+
+The `execute` asynchronous function is the execution function of Rsdoctor CLI. By calling the `execute` function, it will automatically parse [process.argv](https://nodejs.org/dist/latest-v18.x/docs/api/process.html#processargv) and invoke different commands.
+
+**execute('analyze', \{...\})**
+
+If you need to directly execute the [analyze command](#analyze-command) through the Node.js API, you can call it as follows:
+
+```ts
+execute('analyze', {
+  profile: 'input the manifest.json path or url',
+}).then((sdk) => {
+  console.log('execute "anaylze" command success');
+  // you can stop the Rsdoctor's dev-server by calling the sdk'api below:
+  // sdk.dispose();
+});
+```

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

@@ -0,0 +1,36 @@
+# Features
+
+Here you can learn about the main features supported by Rsdoctor.
+
+## Build Overview
+
+| Feature              | Description                                                            | Related Links                                |
+| -------------------- | ---------------------------------------------------------------------- | -------------------------------------------- |
+| Project Overview     | View information such as the current project configuration and version | [Project Overall](../usage/project-overall)  |
+| Bundle Overview      | View information about the artifacts built for the current project     | [Bundle Overall](../usage/bundle-overall)    |
+| Compilation Overview | View data information about the current project's compilation process  | [Compile Overall](../usage/compile-overall)  |
+| Bundle Alert         | The ability to perform detection based on build artifact data          | [Bundle Alert](../usage/bundle-alerts)       |
+| Compilation Alert    | The ability to perform detection based on compilation data             | [Compilation Alert](../usage/compile-alerts) |
+
+## Compilation Analysis
+
+| Feature                                           | Description                                                                                                                  | Related Links                                                            |
+| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| Compilation Overview                              | View data information about the current project's compilation process                                                        | [Compile Overall](../usage/compile-overall)                              |
+| Compilation Alert                                 | The ability to perform detection based on compilation data                                                                   | [Compilation Alert](../usage/compile-alerts)                             |
+| Loader Compilation Behavior Analysis              | Loader analysis data in directory and file dimensions, displaying the compilation behavior of a single file at the same time | [Loaders Analysis](../usage/loaders-analysis)                            |
+| Loader Time Consumption Analysis                  | Execution sequence diagram of all Loaders in the current project                                                             | [Loaders Timeline](../usage/loaders-timeline)                            |
+| Plugins Analysis                                  | Data analysis of the plugins used in the project                                                                             | [Plugins Analysis](../usage/plugins-analysis)                            |
+| Resolver Analysis                                 | Analysis data on Resolver parsing capabilities                                                                               | [Resolver Analysis](../usage/resolver)                                   |
+| Loader Time Consumption Analysis and Optimization | This document describes how to use Rsdoctor to analyze and optimize build time consumption                                   | [Loader Analysis and Optimization](../../blog/topic/loader-optimization) |
+
+## Bundle Analysis
+
+| Feature                         | Description                                                                                                                                            | Related Links                                                             |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| Bundle Overview                 | View information about the artifacts built for the current project                                                                                     | [Bundle Overall](../usage/bundle-overall)                                 |
+| Bundle Alert                    | The ability to perform detection based on build artifact data                                                                                          | [Bundle Alert](../usage/bundle-alerts)                                    |
+| Bundle Analysis                 | Analysis of the relationships between assets, chunks, and modules in the artifact, as well as the packaged code and size analysis of each module, etc. | [Bundle Analysis](../usage/bundle-size)                                   |
+| Module Analysis                 | Analysis of module dependencies                                                                                                                        | [Modules Dependency Analysis](../usage/module-analysis)                   |
+| Duplicate Packages Optimization | Inspection of duplicate dependencies used in the project                                                                                               | [Duplicate Packages Optimization](../../blog/topic/duplicate-pkg-problem) |
+| Bundle Diff                     | Comparative analysis of two artifacts                                                                                                                  | Planned support                                                           |

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

@@ -0,0 +1,115 @@
+# Introduction
+
+## 💡 What is Rsdoctor?
+
+- Rsdoctor is a one-stop tool for diagnosing and analyzing the build process and build artifacts.
+- Rsdoctor is a tool that supports Webpack and Rspack build analysis.
+- Rsdoctor is an analysis tool that can display the time-consuming and behavioral details of the compilation.
+- Rsdoctor is a tool that provides bundle Diff and other anti-degradation capabilities simultaneously.
+
+## 🔥 Features
+
+- **Compilation Visualization**: Rsdoctor visualizes the compilation behavior and time consumption, making it easy to view build issues.
+- **Multiple Analysis Capabilities**: Rsdoctor supports build artifact, build-time analysis, and anti-degradation capabilities:
+  - Build artifact support for resource lists and module dependencies, etc.
+  - Build-time analysis supports Loader, Plugin, and Resolver building process analysis, including: Rspack's builtin:swc-loader.
+  - Build rules support duplicate package detection and ES Version Check, etc.
+  - Currently, bundle Diff capabilities are also available.
+- **Support Custom Rules**: In addition to built-in build scan rules, Rsdoctor also supports users adding custom component scan rules based on the build data of Rsdoctor.
+- **Framework-Independent**: Rsdoctor support all projects built on Webpack or Rspack.
+
+## 🛠️ Introduction
+
+### ⭐️ Overview
+
+- The overview page (i.e. the home page) can know **project configuration, diagnostic information, compilation information, and product status**.
+
+![Overall](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/overall.jpg)
+
+- In addition to the project overview, we also provide diagnostic functions, including compilation diagnostics and duplicate packages diagnostics. If your compilation and products hit the diagnostic rules we defined,
+  the corresponding warning alerts will appear on the tool's home page. **where you can see the detailed reference path of duplicate packages**:
+
+![Overall-Alerts](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/overall-alerts.jpg)
+
+### ⭐️ Compilation Analysis
+
+Provides corresponding data and analysis functions for **Loaders, Plugins, and Module Resolve** to help you analyze problems in the compilation process.
+
+#### Loader Analysis
+
+- This module mainly provides the function of data analysis such as input and output, estimated time consumption, and parameters within Rspack / Webpack Loaders.
+
+<div style={{ display: 'flex' }}>
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-overall.png"
+    width="55%"
+    style={{ margin: 'auto' }}
+  />
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-all.png"
+    width="45%"
+    style={{ margin: 'auto' }}
+  />
+</div>
+
+#### Plugin Analysis
+
+- This module mainly intercepts and collects data information such as the number of calls and estimated time consumption of Plugins.
+
+<p>
+  <img
+    alt="bundle"
+    src={
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/compile-plugin.jpg'
+    }
+    width="600px"
+    style={{ margin: 'auto' }}
+  />
+</p>
+
+#### Resolve Analysis
+
+- This module mainly provides path data and estimated time consumption for module resolution in a single file within the project. Rspack does not currently support this module.
+
+<p>
+  <img
+    alt="bundle"
+    src={
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/resolver.jpeg'
+    }
+    width="700px"
+    style={{ margin: 'auto' }}
+  />
+</p>
+
+### ⭐️ Product Analysis
+
+- In the **Bundle Size** page, we can see an overview of the product data information of the current project, as well as analyze the size and reasons for duplicate package imports.
+
+- In addition, we can also use the **Bundle Analysis** page to further analyze the relationship between the product and module in the current product, size data and other information, as well as the reasons for module introduction.
+
+<p>
+  <img
+    alt="bundle"
+    src={
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/bundle-size.jpg'
+    }
+    width="700px"
+    style={{ margin: 'auto' }}
+  />
+</p>
+
+### ⭐️ Bundle Diff
+
+::: tip
+Support in progress...
+:::
+
+Using the bundle diff function provided by Rsdoctor, you can see the changes in **the size of resources, duplicate packages, Packages and other data in the product**, as well as **the size of module files and code changes in each resource**.
+
+| ![bundle-diff-1](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/bundle-diff-2.png) | ![bundle-diff-2](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/bundle-diff-1.png) |
+| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+
+## 🧑‍💻 Community
+
+Come and chat with us on [Discord](https://discord.gg/wrBPBT6rkM)! The Rsdoctor team and users are active there, and we're always looking for contributions.

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

@@ -0,0 +1,210 @@
+# Quick Start
+
+This document will explain how to access the Rsdoctor ability.
+
+## Step 1: Install dependencies
+
+import { PackageManagerTabs } from '@theme';
+
+### Rspack Projects
+
+For projects based on Rspack or Rsbuild, install the following dependencies:
+
+<PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />
+
+### Webpack Projects
+
+:::tip
+Not supported in Webpack 4.
+:::
+
+For projects based on Webpack, install the following dependencies:
+
+<PackageManagerTabs command="add @rsdoctor/webpack-plugin -D" />
+
+---
+
+## Step 2: Register Plugin
+
+After the dependency installation, you need to integrate the Rsdoctor plugin into your project. Below are some examples of common tools and frameworks:
+
+### Rspack
+
+Initialize the RsdoctorRspackPlugin in the [plugins](https://www.rspack.dev/config/plugins.html#plugins) of `rspack.config.js`:
+
+```js title="rspack.config.js"
+const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+    process.env.RSDOCTOR &&
+      new RsdoctorRspackPlugin({
+        // plugin options
+      }),
+  ].filter(Boolean),
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+### Rsbuild
+
+Initialize the RsdoctorRspackPlugin in the [tools.rspack](https://rsbuild.dev/config/tools/rspack) of `rsbuild.config.ts`:
+
+```js title="rsbuild.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // plugin options
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+### Webpack
+
+Initialize the RsdoctorWebpackPlugin in the [plugins](https://webpack.js.org/configuration/plugins/#plugins) of `webpack.config.js`:
+
+```js title="webpack.config.js"
+const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+    process.env.RSDOCTOR &&
+      new RsdoctorWebpackPlugin({
+        // plugin options
+      }),
+  ].filter(Boolean),
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+### Modern.js Framework
+
+Initialize the plugin in the [tools.rspack](https://modernjs.dev/configure/app/tools/rspack) of `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // plugin options
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+:::tip
+For projects using Modern.js Webpack mode, please register the `RsdoctorWebpackPlugin` plugin through [tools.webpack](https://modernjs.dev/configure/app/tools/webpack).
+:::
+
+### Next.js Framework
+
+Initialize the RsdoctorWebpackPlugin plugin in the [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) of `next.config.mjs`.
+
+```ts title="next.config.mjs"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  webpack: (config, { isServer }) => {
+    config.plugins.push(
+      new RsdoctorWebpackPlugin({
+        // plugin options
+      }),
+    );
+
+    return config;
+  },
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+#### 📢 Next.js Project Notice
+
+1. Next.js Project Reporting Page Issues
+
+For more details, see: [FAQ](../more/faq#nextjs)
+
+2. Loader Analysis with Rules Overriding Not Supported in Next.js
+
+For more details, see: [FAQ](../more/faq#nextjs)
+
+### Vue Framework
+
+Initialize the `@rsdoctor/webpack-plugin` or `@rsdoctor/rspack-plugin` plugin in the configuration file. Here is an example using `rsbuild`:
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+  performance: {
+    buildCache: false,
+  },
+  tools: {
+    bundlerChain: (chain, { CHAIN_ID }) => {
+      chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
+        {
+          // plugin options
+        },
+      ]);
+    },
+  },
+});
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+#### 📢 Vue Project Notice
+
+Because `vue-loader` analysis is not supported at the moment, loader analysis is disabled by default for Vue projects. However, plugin and build artifact analysis can still be performed.
+
+---
+
+## Step 3: Run Build
+
+Now, you can run the **build** command in the project. After the build is complete, Rsdoctor will automatically open the analysis page of this build.
+
+```bash
+# Enable Rsdoctor
+RSDOCTOR=true npm run build
+
+# Disable Rsdoctor
+npm run build
+```
+
+:::tip
+The Rsdoctor plugin provides some configurations, please refer to [Options](../../config/options/options).
+:::

package/docs/en/guide/usage/_meta.json

@@ -0,0 +1,13 @@
+[
+  "project-overall",
+  "bundle-overall",
+  "compile-overall",
+  "compile-alerts",
+  "bundle-alerts",
+  "loaders-timeline",
+  "loaders-analysis",
+  "plugins-analysis",
+  "bundle-size",
+  "module-analysis",
+  "resolver"
+]

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

@@ -0,0 +1,47 @@
+# Bundle Alerts
+
+## Introduction
+
+### Duplicate Third-party Packages
+
+- The `Duplicate Packages` card displays the number of duplicate third-party packages in the project. Click on the image to view the specific details of the duplicate packages. Note: The third-party packages mentioned here are the ones that have been bundled.
+
+<div style={{ display: 'flex' }}>
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-1.png"
+    width="360px"
+    style={{ margin: 'auto' }}
+  />
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-2.png"
+    width="360px"
+    style={{ margin: 'auto' }}
+  />
+</div>
+
+- Duplicate Package Alerts Card
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alerts.png" />
+
+- Click on the icon to expand the details of the duplicate packages, where you can see the package name, version, size, and reference files.
+
+  - Click on the rightmost **"Show Relations"** to view the specific reference chain and corresponding reference file code location for this third-party package.
+
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-relations.png" />
+
+  - Click on the rightmost **"!"** icon to view the specific explanation of the rule for the duplicate third-party package.
+
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-rule.png" />
+
+### Duplicate Package Optimization
+
+Please check [Duplicate Package Optimization](../../blog/topic/duplicate-pkg-problem).
+
+### ECMA Version Check
+
+In the bundle alerts, the ECMA version of the bundle is checked, as shown in the following image:
+
+{' '}
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alerts-ecma.png" />
+
+Click on "**More**" to view the corresponding rule explanation.