@rsdoctor/docs 0.3.5-beta.0 → 0.3.6

package/docs/en/_meta.json

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

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

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

package/docs/en/blog/release/release-note-0_3.mdx

@@ -0,0 +1,138 @@
+# Rsdoctor v0.2-0.3 Release Note
+
+Rsdoctor v0.3 has been released!
+
+The new features of Rsdoctor v0.3 include:
+
+- Custom Extension Rules: Users can customize their own rule checks through the interface.
+- Support for Banner Plugin: Added support for the Banner Plugin, which adds template wrapping to the bundled code, allowing analysis of code changes.
+- Support for ESM Loader Analysis: Added support for analyzing ESM Loaders in the compilation analysis in Rspack.
+
+## Custom Extension Rules
+
+Considering that users may have their own specific rule definition requirements, Rsdoctor provides an external interface for users to customize their own rule checks in addition to the internal rules already available.
+External extension interfaces need to be configured on the Rsdoctor plugin through the `extends` field, and their configurations are also placed in the `rules` field.
+
+For more details, please refer to: [Custom Extension Rules](/guide/custom/rule-custom)
+
+Additionally, the use of custom rules can also be applied for user data collection and reporting. [Data Reporting](/guide/custom/upload-data)
+
+- Example:
+
+```ts
+// src/rules/assets-count-limit.ts
+import { defineRule } from '@rsdoctor/core/rules';
+
+export const AssetsCountLimit = defineRule(() => ({
+  meta: {
+    category: 'bundle',
+    severity: 'Warn',
+    title: 'assets-count-limit',
+    defaultConfig: {
+      limit: 10,
+    },
+  },
+  check({ chunkGraph, report, ruleConfig }) {
+    const assets = chunkGraph.getAssets();
+
+    if (assets.length > ruleConfig.limit) {
+      report({
+        message: 'The count of assets is bigger than limit',
+        detail: {
+          type: 'link',
+          link: 'https://rsdoctor.dev/zh/guide/start/quick-start', // This link just for show case.
+        },
+      });
+    }
+  },
+}));
+```
+
+```ts
+// rsbuild.config.ts
+import { AssetsCountLimit } from './rules/assets-count-limit';
+
+export default {
+  tools: {
+    bundlerChain: (chain) => {
+      chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
+        {
+          linter: {
+            level: 'Error',
+            extends: [AssetsCountLimit],
+            rules: {
+              'assets-count-limit': [
+                'on',
+                {
+                  limit: 1, // rule custom configs
+                },
+              ],
+            },
+          },
+        },
+      ]);
+    },
+  },
+};
+```
+
+## Support for Banner Plugin
+
+Both Rspack and Webpack support the BannerPlugin, which is an built-in plugin that allows you to add specific content at the top or bottom of the generated chunks. The added code will affect the parsing capability of the bundle.
+Therefore, Rsdoctor has added support for the Banner Plugin.
+
+Please refer to [Support for BannerPlugin](/guide/usage/bundle-size#support-for-bannerplugin)
+
+## Support for ESM Loader
+
+Starting from Rspack@0.7.3, support for ESM Loader execution with `.js` extension and `type: module` configuration in `package.json` is added ([related issue](https://github.com/web-infra-dev/rspack/issues/5735)). Therefore, Rsdoctor also supports the analysis of ESM Loader, mainly supporting the following two types:
+
+1. ESM Loader with `.mjs` extension.
+2. ESM Loader with `.js` extension and `type: module` configuration in `package.json`.
+
+### Support for defining port
+
+Support for [defining the port of Rsdoctor service](/config/options/options#port) has been added.
+
+- Example:
+
+```ts
+chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
+  {
+    port: 8888, // port
+  },
+]);
+```
+
+## Support for Parse Bundle Configuration
+
+In some large repositories, the execution time for parsing bundles is significant. This is because the Parse Bundle analysis relies on AST parsing and processing, which can be time-consuming when there are a large number of files.
+If this capability is not necessary, it can be selectively disabled using the `supports.parseBundle` configuration. Here is an example:
+
+```ts
+chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
+  {
+    supports: {
+      parseBundle: false,
+    },
+  },
+]);
+```
+
+Disabling the Parse Bundle capability only affects the ability to view the final bundled size and code of modules in the bundle (Bundled Code).
+
+<div style={{ display: 'flex' }}>
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundled-size.jpeg"
+    height="300px"
+    width="400px"
+    style={{ margin: 'auto' }}
+  />
+
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundled-code.png"
+    height="300px"
+    width="500px"
+    style={{ margin: 'auto' }}
+  />
+</div>

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

@@ -174,7 +174,9 @@ This option is used to configure whether Rsdoctor enables support for certain de
 
 ```ts
 type ISupport = {
-  banner: boolean;
+  banner?: boolean;
+  parseBundle?: boolean;
+  generateTileGraph?: boolean;
 };
 ```
 
@@ -184,8 +186,59 @@ type ISupport = {
 When enabling the analysis of BannerPlugin, Rsdoctor should not be used in production versions.
 :::
 
+- default: false.
+- type: boolean.
+
 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)
 
+#### parseBundle
+
+- default: true.
+- type: boolean.
+
+In some large repositories, the execution time of parsing the bundle is too long. Since the Parse Bundle analysis utilizes AST parsing and processing, it can be time-consuming when there are a large number of output files.
+If this capability is not necessary, it can be selectively disabled using the supports.parseBundle configuration. An example is shown below:
+
+```ts
+chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
+  {
+    supports: {
+      parseBundle: false,
+    },
+  },
+]);
+```
+
+Disabling the Parse Bundle capability will only affect the visibility of the Bundled Size and Bundled Code of the modules in the bundle:
+
+<div style={{ display: 'flex' }}>
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundled-size.jpeg"
+    height="300px"
+    width="400px"
+    style={{ margin: 'auto' }}
+  />
+
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundled-code.png"
+    height="300px"
+    width="500px"
+    style={{ margin: 'auto' }}
+  />
+</div>
+#### generateTileGraph
+
+- 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`.
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-tile-graph.png"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
 ### port
 
 - **Type:** `number`

package/docs/en/guide/_meta.json

@@ -9,6 +9,11 @@
     "name": "usage",
     "label": "Usage"
   },
+  {
+    "type": "dir",
+    "name": "custom",
+    "label": "User Custom"
+  },
   {
     "type": "dir",
     "name": "more",

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

@@ -0,0 +1 @@
+["rule-custom", "upload-data"]