@rsdoctor/docs 0.0.1

package/docs/en/_meta.json

@@ -0,0 +1,17 @@
+[
+  {
+    "text": "Guide",
+    "link": "/guide/start/intro",
+    "activeMatch": "/guide/"
+  },
+  {
+    "text": "Config",
+    "link": "/config/options/options",
+    "activeMatch": "/config/"
+  },
+  {
+    "text": "Blog",
+    "link": "/blog/release/release-note-1",
+    "activeMatch": "/blog/"
+  }
+]

package/docs/en/blog/_meta.json

@@ -0,0 +1,12 @@
+[
+  {
+    "type": "dir",
+    "name": "release",
+    "label": "Release Note"
+  },
+  {
+    "type": "dir",
+    "name": "topic",
+    "label": "Topic"
+  }
+]

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

@@ -0,0 +1 @@
+["release-note-1"]

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

@@ -0,0 +1,129 @@
+# Rsdoctor v0.1 Release Note
+
+<picture>
+  <img
+    alt="Rsdoctor Banner"
+    src="https://github.com/web-infra-dev/rsdoctor/assets/7237365/0f9d2e86-d919-451a-befa-fa84603a87cf"
+    style={{ margin: 'auto' }}
+  />
+</picture>
+
+We are excited to announce the release of [Rsdoctor](https://rsdoctor.dev/) v0.1!
+
+Rsdoctor is a one-stop build analysis tool for Rspack and Webpack. It allows for detailed analysis of the build process and bundles, making the build process more visual and transparent.
+
+## 📌 Position
+
+**Rsdoctor** is a build analysis tool for analyzing projects built with [Rspack](https://www.rspack.dev/) and [Webpack](https://webpack.js.org/). It supports analysis of projects such as [Rsbuild](https://rsbuild.dev/), [Create React App](https://create-react-app.dev/), [Modern.js](https://modernjs.dev/), and more.
+
+![Position](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/rsdoctor-position.png)
+
+## 🔥 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 or 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>
+
+## 📚 Quick Start
+
+You can refer to the [Quick Start](https://rsdoctor.dev/guide/start/quick-start) to get started with **Rsdoctor**.
+
+## 💡 Next Steps
+
+**Improve Rsdoctor build analysis efficiency**: Currently, enabling Rsdoctor plugin increases project build time. In the next step, we will extract and convert some of Rsdoctor's build analysis logic into a rust plugin, built-in to [Rspack](https://www.rspack.dev/), in order to improve Rsdoctor's build analysis efficiency.
+
+## Acknowledgements
+
+**Rsdoctor** has been inspired by outstanding projects in the community, and we would like to express our gratitude to them:
+
+- Refer to the analysis logic of artifact relationships from [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme).
+- Refer to the module breakdown and analysis logic from [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).
+- [Statoscope](https://github.com/statoscope/statoscope/blob/master/README.md) is an excellent tool for analyzing build artifacts, and Rsdoctor is inspired by it in terms of build analysis.
+- [Webpack team and community](https://github.com/webpack/webpack/blob/main/README.md) have created an excellent bundling tool and a rich ecosystem.
+- [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) has inspired Rsdoctor's exploration of build process analysis.

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

@@ -0,0 +1 @@
+["loader-optimization", "duplicate-pkg-problem"]

package/docs/en/blog/topic/duplicate-pkg-problem.mdx

@@ -0,0 +1,141 @@
+# Duplicate Dependency Problem
+
+Rsdoctor will report cases where multiple duplicate dependencies exist in the same builder's artifact.
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alerts.png" />
+
+## Hazards of Duplicate Packages
+
+- **Security**
+  - Many packages adopt singleton mode and are only loaded once by default. Examples include core-js, react, and some component libraries. Having multiple versions coexist can cause runtime errors.
+- **Runtime Perßformance**
+  - Increases artifact size, slowing down network transmission
+  - Same code for the same functionality runs multiple times
+
+## How to Solve Duplicate Package Problems?
+
+To solve the issue of multiple versions of dependencies, you can address it from both the dependency and build aspects.
+
+### Dependency Aspect
+
+#### 1. Use the npm dedupe command
+
+Generally, package managers try to install the same version of a package based on the semver range. However, long-term projects may have some duplicate dependencies due to the existence of lock files.
+
+Package managers provide the `dedupe` command, such as `npm/yarn/pnpm dedupe`, to optimize duplicate dependencies within the correct semver range.
+
+#### 2. Use resolutions
+
+Under the constraints of semver, the effectiveness of the dedupe command may not be ideal. For example, if the artifact contains dependencies `debug@4.3.4` and `debug@3.0.0`, where they are respectively depended on by `"debug": "^4"` and another package's `"debug": "^3"`.
+
+In this case, you can try using the `resolutions` feature of the package manager, such as pnpm's [**pnpm.overrides**](https://pnpm.io/package_json#pnpmoverrides), [**.pnpmfile.cjs**](https://pnpm.io/pnpmfile#hooksreadpackagepkg-context-pkg--promisepkg), or **yarn's resolutions**.
+
+The advantage of these features is that they can break free from the constraints of semver and change the version declared in `package.json` during installation to precisely control the installed version.
+
+However, before using them, it is important to consider the compatibility between package versions and evaluate whether optimization is necessary. For example, whether the logic changes between different versions of the same package will affect the functionality of the project.
+
+### Build Aspect
+
+#### Use [resolve.alias](https://www.rspack.dev/config/resolve.html#resolvealias)
+
+Almost all builders support modifying the paths for resolving npm packages. Therefore, we can eliminate duplicate dependencies by manually specifying the resolve paths for packages during compilation. For example, using **Rspack** or **Webpack**, if `lodash` is duplicated in the build, we can configure it as follows to specify the resolve paths for all `lodash` packages to the `node_modules` directory in the current directory.
+
+```js
+// webpack.config.js/rspack.config.js
+const path = require('path');
+
+module.exports = {
+  //...
+  resolve: {
+    alias: {
+      lodash: path.resolve(__dirname, 'node_modules/lodash'),
+    },
+  },
+};
+```
+
+This method also requires attention to the compatibility between package versions.
+
+## Cases of Handling Duplicate Packages
+
+### Duplicate Packages in pnpm-workspace
+
+In this project, the `web` app depends on `react@18.2.0` and imports `component` using `"component": "workspace:*"`. The `component` package, in turn, depends on `react@18.1.0`. The project structure is as follows:
+
+```txt
+├── node_modules
+├── apps
+│   └── web
+│       ├── node_modules
+│       │   ├── component  -> ../../packages/component
+│       │   └── react      -> ../../../node_modules/.pnpm/react@18.2.0
+│       ├── src
+│       │   └── index.js
+│       ├── webpack.config.js
+│       └── package.json
+└── packages
+    └── component
+        ├── node_modules
+        │   └── react      -> ../../../node_modules/.pnpm/react@18.1.0
+        ├── src
+        │   └── index.js
+        └── package.json
+```
+
+When executing `webpack build` under `apps/web`, the code in the `web` directory will be resolved to `react@18.2.0`, and then the code in the `component` directory will be resolved to `react@18.1.0`. This results in the output of the web project containing two versions of `React`.
+
+#### Solution
+
+This issue can be resolved using the `resolve.alias` configuration in the builder, such as `Rspack` or `Webpack`. By specifying the resolve path for `React` to only resolve to `apps/web/node_modules/react`, you can ensure that only one version of `React` is included in the output. Here is an example code:
+
+```javascript
+// apps/web/webpack.config.js
+const path = require('path');
+
+module.exports = {
+  //...
+  resolve: {
+    alias: {
+      react: path.dirname(require.resolve('react/package.json')),
+    },
+  },
+};
+```
+
+#### Duplicate Packages Caused by Peer Dependency
+
+This handling method also applies to projects with duplicate packages caused by multiple instances of **[peerDependencies](https://pnpm.io/how-peers-are-resolved)** in `pnpm workspace`. The project directory structure is as follows:
+
+```txt
+├── node_modules
+├── apps
+│   └── web
+│       ├── node_modules
+│       │   ├── component  ->  ../../packages/component
+│       │   ├── axios      ->  ../../../node_modules/.pnpm/axios@0.27.2_debug@4.3.4
+│       │   └── debug      ->  ../../../node_modules/.pnpm/debug@4.3.4
+│       ├── src
+│       │   └── index.js
+│       ├── webpack.config.js
+│       └── package.json
+└── packages
+    └── component
+        ├── node_modules
+        │   └── axios      ->  ../../../node_modules/.pnpm/axios@0.27.2
+        ├── src
+        │   └── index.js
+        └── package.json
+```
+
+In this project, when executing `webpack build` under `apps/web`, the code in the `web` directory will be resolved to `axios@0.27.2_debug@4.3.4`, and then the code in the `packages/component` directory will be resolved to `axios@0.27.2`.
+
+Although they are the same version, they have different paths, resulting in two copies of `axios` in the output.
+
+The solution is to configure the `web` project to only resolve the `axios` package under the `web` directory's `node_modules`.
+
+```javascript
+// apps/web/webpack.config.js
+alias: {
+  'axios': path.resolve(__dirname, 'node_modules/axios')
+}
+```

package/docs/en/blog/topic/loader-optimization.mdx

@@ -0,0 +1,80 @@
+# Loader Analysis and Optimization
+
+import NextSteps from '@components/NextSteps';
+import Step from '@components/Step';
+
+Optimizing loaders is a common way to improve the performance of Rspack or Webpack compilation. In most cases, besides replacing the loader with a faster one, we can also reduce execution by setting [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for the loader.
+
+Rsdoctor provides two core modules, [Loader Overall](/guide/usage/loaders-timeline) and [Loader Analysis](/guide/usage/loaders-analysis), to help you optimize based on the loader's invocation information.
+
+## How to analyze?
+
+Regardless of the optimization method used for loaders, we need to obtain data information about the loaders, such as **which files a loader compiles** and **time-consuming information for compiling certain files**, in order to optimize more accurately.
+
+### File Tree Structure
+
+With the Loader Analysis module provided by Rsdoctor, we can see **a tree structure composed of all files that pass through the loaders during the entire compilation process**, as shown in the following figure:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-all.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+### Analyzing Directories
+
+By **clicking on a directory**, you can see the **time-consuming statistics of all loaders** under the currently **selected directory** on the right side of the file tree, such as the number of files processed by a loader and **the estimated time** consumption. The content of the "Statistics of xxx" card is shown in the following figure:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-table.png"
+  width="300px"
+  height="400px"
+  style={{ margin: 'auto' }}
+/>
+
+We can intuitively know **the time-consuming data of this folder**, such as the number of files processed by a certain loader and the estimated time consumption, as well as the sum of all data, which further helps us make decisions on how to optimize the loader.
+
+:::tip Optimization Tips
+Usually, in the directories of third-party libraries inside **`node_modules`**, we can easily determine whether it is necessary to set [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for this directory based on the time-consuming information of the loader, in order to reduce the execution of loaders with long execution time, such as the common `babel-loader`.
+:::
+
+### Analyzing Files
+
+By **clicking on a file**, a mask layer will pop up, showing a list of all loaders that have been executed on the currently clicked file. By **clicking on a loader**, you can see the **input**, **output**, and **parameter data information of the target loader** when it is called.
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-analysis-code-change.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>{' '}
+
+- Parameter Data Information: Click on "**show more**" or the expand button in the upper left corner to view the corresponding parameter information.
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-analysis-options.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>{' '}
+
+We can use the loader information of individual files here to troubleshoot issues and decide whether to add them to [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude).
+
+:::tip Optimization Tips
+Usually, for internal packages inside the project (i.e., outside the cwd, usually the workspace), we can determine whether it is necessary to set [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for this directory based on **the loader time-consuming information** of the directory and **the input-output information** of individual files (because these internal packages may already have good compatibility with ES syntax).
+:::
+
+## Learn More
+
+You may want to learn more about the usage of the Loader Analysis module:
+
+<NextSteps>
+  <Step
+    href="/guide/usage/loaders-timeline"
+    title="Loader Timeline Usage"
+    description="Learn how to use the Loader Timeline in Rsdoctor"
+  />
+  <Step
+    href="/guide/usage/loaders-analysis"
+    title="Loader Analysis Usage"
+    description="Learn how to operate and use the Loader Analysis in Rsdoctor"
+  />
+</NextSteps>

package/docs/en/config/_meta.json

@@ -0,0 +1,7 @@
+[
+  {
+    "type": "dir",
+    "name": "options",
+    "label": "Config Instruction"
+  }
+]

package/docs/en/config/options/_meta.json

@@ -0,0 +1 @@
+["options", "term"]

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

@@ -0,0 +1,135 @@
+# Options
+
+## RsdoctorRspackPlugin
+
+`RsdoctorRspackPlugin` class are exported by `@rsdoctor/rspack-plugin`, and the option is [RsdoctorRspackPluginOptions](#options-1).
+
+<Tabs>
+
+<Tab label="cjs">
+
+```js
+const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+
+new RsdoctorRspackPlugin({
+  /** RsdoctorRspackPluginOptions */
+});
+```
+
+</Tab>
+
+<Tab label="esm">
+
+```ts
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+new RsdoctorRspackPlugin({
+  /** RsdoctorRspackPluginOptions */
+});
+```
+
+</Tab>
+
+</Tabs>
+
+## RsdoctorWebpackPlugin
+
+`RsdoctorWebpackPlugin` class are exported by `@rsdoctor/webpack-plugin`, and the option is [RsdoctorWebpackPluginOptions](#options-1).
+
+import { Tab, Tabs } from '@theme';
+
+<Tabs>
+
+<Tab label="cjs">
+
+```js
+const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
+
+new RsdoctorWebpackPlugin({
+  /** RsdoctorWebpackPluginOptions */
+});
+```
+
+</Tab>
+
+<Tab label="esm">
+
+```ts
+import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';
+
+new RsdoctorWebpackPlugin({
+  /** RsdoctorWebpackPluginOptions */
+});
+```
+
+</Tab>
+
+</Tabs>
+
+## Options
+
+**Type:** `Object`
+
+This is the options for the [RsdoctorWebpackPlugin](#rsdoctorwebpackplugin) and [RsdoctorRspackPlugin](#rsdoctorrspackplugin). It contains these properties:
+
+- [disableClientServer](#disableclientserver)
+- [features](#features)
+
+### disableClientServer
+
+- **Type:** `boolean`
+- **Optional:** `true`
+- **Default:** `false`
+
+Whether to automatically open the Rsdoctor report page. If you do not need to view the analysis report provided by Rsdoctor in the browser, you can enable this configuration item.
+
+### features
+
+- **Type:** [RsdoctorWebpackPluginFeatures](#rsdoctorwebpackpluginfeatures) | [Array\<keyof RsdoctorWebpackPluginFeatures\>](#rsdoctorwebpackpluginfeatures) | [RsdoctorRspackPluginFeatures](#rsdoctorrspackpluginfeatures) | [Array\<keyof RsdoctorRspackPluginFeatures\>](#rsdoctorrspackpluginfeatures)
+- **Optional:** `true`
+- **Default:** `['loader', 'plugins', 'bundle']`
+
+#### features values
+
+:::tip
+
+**If an "out of memory" error occurs, you can try the following:**
+
+1. Open the **lite** mode。
+2. Increase the node memory limit, for example: NODE_OPTIONS=--max-old-space-size=8096.
+
+- Reason: During the build process, source code information is cached, which exceeds memory. Therefore, enabling the **"lite" mode** can help alleviate the problem.
+- Difference: The difference between the "lite" mode and the normal mode is that source code information is no longer cached, only packaged code information is cached. Thus, the code analyzed on the page will also only be packaged.
+
+:::
+
+The `features` attribute is used to analyze the function switches, and the specific functional items are as follows:
+
+- **loader**: Analysis of Loader time consumption and code compilation changes, enabled by default.
+- **plugins**: Analysis of Plugins calls and time consumption, enabled by default.
+- **bundle**: Analysis of build artifacts, enabled by default.
+- **resolver**: resolver analysis, disabled by default.
+- **lite**: lite mode. The difference between lite mode and normal mode is that source code information is no longer cached, only packaged code information is cached, so the code analyzed on the page will also be packaged. The default is normal mode.
+
+Therefore, **the default configuration enables bundle analysis capabilities and Loader and Plugin build-time analysis**. The Resolver analysis capability is not enabled, and Rspack does not currently support Resolver analysis capabilities.
+
+#### features types
+
+- if the `features` is set as an `Array`, it will **open** the features which you define in this array **only**.
+- if the `features` is set as an `Object`, it will **close** the features which you set the value is `false`.
+
+#### RsdoctorWebpackPluginFeatures
+
+The types of `features` are as follows：
+
+import Features from '@zh/shared/features.md';
+
+<Features />
+
+#### RsdoctorRspackPluginFeatures
+
+The types of `features` are as follows：
+
+import FeaturesRspack from '@zh/shared/features-rspack.md';
+
+<FeaturesRspack />

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

@@ -0,0 +1,10 @@
+# Terminology
+
+## Common Terminology
+
+### manifest.json
+
+When your project integrates with plugins provided by **Rsdoctor** (such as `@rsdoctor/webpack-plugin`, etc.), Rsdoctor will write **build-related data information** into a local JSON file:
+
+- The **filename is `manifest.json`**
+- The output path of this file is `output directory of the project/.rsdoctor/manifest.json`

package/docs/en/guide/_meta.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "dir",
+    "name": "start",
+    "label": "Getting Started"
+  },
+  {
+    "type": "dir",
+    "name": "usage",
+    "label": "Usage"
+  },
+  {
+    "type": "dir",
+    "name": "more",
+    "label": "More"
+  }
+]

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

@@ -0,0 +1 @@
+["faq", "rules"]