diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 80145794..df814a23 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,6 +1,6 @@ -# Contributor Covenant Code of Conduct +# Contributor covenant code of conduct -## Our Pledge +## Our pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body @@ -12,7 +12,7 @@ and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. -## Our Standards +## Our standards Examples of behavior that contributes to a positive environment for our community include: @@ -36,7 +36,7 @@ Examples of unacceptable behavior include: - Other conduct which could reasonably be considered inappropriate in a professional setting -## Enforcement Responsibilities +## Enforcement responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in @@ -65,7 +65,7 @@ All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. -## Enforcement Guidelines +## Enforcement guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: @@ -91,7 +91,7 @@ includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. -### 3. Temporary Ban +### 3. Temporary ban **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. @@ -102,7 +102,7 @@ private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. -### 4. Permanent Ban +### 4. Permanent ban **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5e40ae66..eb68b100 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,12 +1,12 @@ -# Rsdoctor Contribution Guide +# Rsdoctor contribution guide Thanks for that you are interested in contributing to Rsdoctor. Before starting your contribution, please take a moment to read the following guidelines. --- -## Setup the Environment +## Setup the environment -### Fork the Repo +### Fork the repo [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local. @@ -54,7 +54,7 @@ What this will do: - Create symlinks between packages in the monorepo. - Run the `prepare` script to build all packages, powered by [nx](https://nx.dev/). -### Set Git Email +### Set git email Please make sure you have your email set up in ``. This will be needed later when you want to submit a pull request. @@ -78,11 +78,11 @@ git config user.email "SOME_EMAIL@example.com" --- -## Making Changes and Building +## Making changes and building Once you have set up the local development environment in your forked repo, we can start development. -### Checkout A New Branch +### Checkout a new branch It is recommended to develop on a new branch, as it will make things easier later when you submit a pull request: @@ -90,7 +90,7 @@ It is recommended to develop on a new branch, as it will make things easier late git checkout -b MY_BRANCH_NAME ``` -### Build the Package +### Build the package Use [nx build](https://nx.dev/nx-api/nx/documents/run) to build the package you want to change: @@ -106,7 +106,7 @@ pnpm run build --- -## Startup Rsdoctor Client +## Startup Rsdoctor client When you make changes to the code and want to view the `Rsdoctor` analysis report, you can execute `build:analysis` in the `examples/foo` project to see it: @@ -121,13 +121,13 @@ pnpm run build:analysis ## Testing -### Add New Tests +### Add new tests If you've fixed a bug or added code that should be tested, then add some tests. You can add unit test cases in the `/tests` folder. The test syntax is based on [Vitest](https://vitest.dev/). -### Run Unit Tests +### Run unit tests Before submitting a pull request, it's important to make sure that the changes haven't introduced any regressions or bugs. You can run the unit tests for the project by executing the following command: @@ -141,7 +141,7 @@ Alternatively, you can run the unit tests of single package using the `--filter` pnpm run --filter @rsdoctor/some-package test ``` -### Run E2E Tests +### Run E2E tests In addition to the unit tests, the Rsdoctor also includes end-to-end (E2E) tests, which checks the functionality of the application as a whole. @@ -180,9 +180,9 @@ This website is built with Rspress, the document content can be written using ma --- -## Submitting Changes +## Submitting changes -### Committing your Changes +### Committing your changes Commit your changes to your forked repo, and [create a pull request](https://help.github.com/articles/creating-a-pull-request/). diff --git a/README.md b/README.md index 9723505e..9e7beb63 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ English | [简体中文](./README.zh-CN.md) duplicate packages -## 📚 Getting Started +## 📚 Getting started To get started with Rsdoctor, see the [Quick Start](https://rsdoctor.dev/guide/start/quick-start). @@ -67,7 +67,7 @@ Come and chat with us on [Discord](https://discord.gg/wrBPBT6rkM)! The Rsdoctor - [Rspress](https://github.com/web-infra-dev/rspress): A fast Rspack-based static site generator. - [Modern.js](https://github.com/web-infra-dev/modern.js): A progressive React framework based on Rsbuild. -## 🙌 Code of Conduct +## 🙌 Code of conduct This repo has adopted the ByteDance Open Source Code of Conduct. Please check [Code of Conduct](./CODE_OF_CONDUCT.md) for more details. diff --git a/e2e/README.md b/e2e/README.md index ae1cd8ad..c5f01e1c 100644 --- a/e2e/README.md +++ b/e2e/README.md @@ -2,18 +2,18 @@ This folder contains the e2e test cases of Rsdoctor. -## Tech Stack +## Tech stack - [playwright](https://github.com/microsoft/playwright): The e2e test framework. ## Commands ```bash -# Run all test cases, including Rspack and Webpack +# Run all test cases, including Rspack and webpack pnpm run test ``` -## Add Test Cases +## Add test cases ### Add test cases for common capabilities @@ -25,4 +25,4 @@ import { expect, test } from '@playwright/test'; test('test 1 + 1', () => { expect(1 + 1).toBe(2); }); -``` \ No newline at end of file +``` diff --git a/packages/cli/README.md b/packages/cli/README.md index 602b2366..f9f11800 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -1,4 +1,4 @@ -# Rsdoctor Cli +# Rsdoctor CLI This is the cli package of Rsdoctor, you can use the capabilities of this package to open the analysis page without building. diff --git a/packages/client/README.md b/packages/client/README.md index d4de708f..786f2091 100644 --- a/packages/client/README.md +++ b/packages/client/README.md @@ -1,4 +1,4 @@ -# Rsdoctor Client +# Rsdoctor client This package is the Rsdoctor reporting platform. diff --git a/packages/components/README.md b/packages/components/README.md index ccda2e67..5c03b11f 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -1,4 +1,4 @@ -# Rsdoctor Components +# Rsdoctor components This package is the Rsdoctor reporting platform’s components. diff --git a/packages/core/README.md b/packages/core/README.md index 99925bb2..b03c1895 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -1,4 +1,4 @@ -# Rsdoctor Core +# Rsdoctor core This is the core package of Rsdoctor, providing core tools and analysis capabilities for Rsdoctor plugins. diff --git a/packages/document/README.md b/packages/document/README.md new file mode 100644 index 00000000..3a5303ac --- /dev/null +++ b/packages/document/README.md @@ -0,0 +1,5 @@ +# Rsdoctor Website + +## Writing style guide + +The same as Rspack: [Writing style guide](https://github.com/web-infra-dev/rspack/tree/main/website#writing-style-guide). diff --git a/packages/document/docs/en/blog/release/release-note-0_1.mdx b/packages/document/docs/en/blog/release/release-note-0_1.mdx index b09a6560..e1615097 100644 --- a/packages/document/docs/en/blog/release/release-note-0_1.mdx +++ b/packages/document/docs/en/blog/release/release-note-0_1.mdx @@ -1,4 +1,4 @@ -# Rsdoctor v0.1 Release Note +# Rsdoctor v0.1 release note -#### Plugin Analysis +#### Plugin analysis - This module mainly intercepts and collects data information such as the number of calls and estimated time consumption of Plugins. @@ -78,7 +78,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M />

-#### Resolve Analysis +#### 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. @@ -93,7 +93,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M />

-### ⭐️ Product Analysis +### ⭐️ 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. @@ -110,11 +110,11 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M />

-## 📚 Quick Start +## 📚 Quick start You can refer to the [Quick Start](https://rsdoctor.dev/guide/start/quick-start) to get started with **Rsdoctor**. -## 💡 Next Steps +## 💡 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. diff --git a/packages/document/docs/en/blog/release/release-note-0_3.mdx b/packages/document/docs/en/blog/release/release-note-0_3.mdx index d86d3128..34d763dc 100644 --- a/packages/document/docs/en/blog/release/release-note-0_3.mdx +++ b/packages/document/docs/en/blog/release/release-note-0_3.mdx @@ -1,4 +1,4 @@ -# Rsdoctor v0.2-0.3 Release Note +# Rsdoctor v0.2-0.3 release note Rsdoctor v0.3 has been released! @@ -8,7 +8,7 @@ The new features of Rsdoctor v0.3 include: - 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 +## 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. @@ -76,14 +76,14 @@ export default { }; ``` -## Support for Banner Plugin +## 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 +## 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: @@ -104,7 +104,7 @@ chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [ ]); ``` -## Support for Parse Bundle Configuration +## 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: diff --git a/packages/document/docs/en/blog/release/release-note-0_4.mdx b/packages/document/docs/en/blog/release/release-note-0_4.mdx index 4767167c..311cae6a 100644 --- a/packages/document/docs/en/blog/release/release-note-0_4.mdx +++ b/packages/document/docs/en/blog/release/release-note-0_4.mdx @@ -1,4 +1,4 @@ -# Rsdoctor v0.4 Release Note +# Rsdoctor v0.4 release note Rsdoctor v0.4 is now released! @@ -8,7 +8,7 @@ The new features of Rsdoctor v0.4 include: - **Bundle Diff**: Compare and analyze changes between two build artifacts. - **Vue Loader Analysis**: Added support for loader analysis in Vue projects. -## Brief Mode +## Brief mode In Rsdoctor v0.4, a new **Brief mode** has been added, designed specifically for CI/CD scenarios. Brief mode consolidates the data report into a single HTML page, making it convenient for users to view historical build data in CI/CD and other scenarios. The main features of Brief mode are: @@ -18,7 +18,7 @@ In Rsdoctor v0.4, a new **Brief mode** has been added, designed specifically for This feature greatly enhances the convenience of using Rsdoctor analysis reports in CI processes. The report can be uploaded to a CDN in the pipeline to display historical reports. [For more details, please refer to](/guide/start/cicd) -## Bundle Diff +## Bundle diff import { Badge } from '@theme'; @@ -51,7 +51,7 @@ This feature enhances the user's ability to visually analyze changes in build ar Plans to support Bundle Diff Action on GitHub to simplify degradation monitoring during the CI phase. -## Vue Loader Analysis +## Vue loader analysis @@ -59,7 +59,7 @@ Support for loader analysis for Vue projects has been added in Rsdoctor v0.4. -## Other Features +## Other features - **Rspack's builtin:lightningcss-loader analysis**: Added support for [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader#builtin-lightningcss-loader) analysis. - **Performance optimization**: diff --git a/packages/document/docs/en/blog/topic/duplicate-pkg-problem.mdx b/packages/document/docs/en/blog/topic/duplicate-pkg-problem.mdx index 928faa07..adaf15e2 100644 --- a/packages/document/docs/en/blog/topic/duplicate-pkg-problem.mdx +++ b/packages/document/docs/en/blog/topic/duplicate-pkg-problem.mdx @@ -1,10 +1,10 @@ -# Duplicate Dependency Problem +# Duplicate dependency problem Rsdoctor will report cases where multiple duplicate dependencies exist in the same builder's artifact. -## Hazards of Duplicate Packages +## 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. @@ -12,11 +12,11 @@ Rsdoctor will report cases where multiple duplicate dependencies exist in the sa - Increases artifact size, slowing down network transmission - Same code for the same functionality runs multiple times -## How to Solve Duplicate Package Problems? +## 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 +### Dependency aspect #### 1. Use the npm dedupe command @@ -34,7 +34,7 @@ The advantage of these features is that they can break free from the constraints 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 +### Build aspect #### Use [resolve.alias](https://www.rspack.dev/config/resolve.html#resolvealias) @@ -56,9 +56,9 @@ module.exports = { This method also requires attention to the compatibility between package versions. -## Cases of Handling Duplicate Packages +## Cases of handling duplicate packages -### Duplicate Packages in pnpm-workspace +### 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: @@ -102,7 +102,7 @@ module.exports = { }; ``` -#### Duplicate Packages Caused by Peer Dependency +#### 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: diff --git a/packages/document/docs/en/blog/topic/loader-optimization.mdx b/packages/document/docs/en/blog/topic/loader-optimization.mdx index ff1f9af9..7217583f 100644 --- a/packages/document/docs/en/blog/topic/loader-optimization.mdx +++ b/packages/document/docs/en/blog/topic/loader-optimization.mdx @@ -1,4 +1,4 @@ -# Loader Analysis and Optimization +# Loader analysis and optimization import NextSteps from '@components/NextSteps'; import Step from '@components/Step'; @@ -11,7 +11,7 @@ Rsdoctor provides two core modules, [Loader Overall](/guide/usage/loaders-timeli 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 +### 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: @@ -21,7 +21,7 @@ With the Loader Analysis module provided by Rsdoctor, we can see **a tree struct style={{ margin: 'auto' }} /> -### Analyzing Directories +### 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 \*\*\*" card is shown in the following figure: @@ -38,7 +38,7 @@ We can intuitively know **the time-consuming data of this folder**, such as the 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 +### 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. @@ -62,7 +62,7 @@ We can use the loader information of individual files here to troubleshoot issue 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 +## Learn more You may want to learn more about the usage of the Loader Analysis module: diff --git a/packages/document/docs/en/config/options/options.mdx b/packages/document/docs/en/config/options/options.mdx index 347d7777..7d7478a0 100644 --- a/packages/document/docs/en/config/options/options.mdx +++ b/packages/document/docs/en/config/options/options.mdx @@ -214,7 +214,7 @@ new RsdoctorRspackPlugin({ This option is used to configure whether Rsdoctor enables support for certain detailed feature analysis capabilities, such as whether to enable compatibility with BannerPlugin. -#### Supports Types +#### Supports types ```ts type ISupport = { diff --git a/packages/document/docs/en/config/options/term.mdx b/packages/document/docs/en/config/options/term.mdx index 5895dbc4..7dd848ee 100644 --- a/packages/document/docs/en/config/options/term.mdx +++ b/packages/document/docs/en/config/options/term.mdx @@ -1,6 +1,6 @@ # Terminology -## Common Terminology +## Common terminology ### manifest.json diff --git a/packages/document/docs/en/guide/custom/rule-custom.mdx b/packages/document/docs/en/guide/custom/rule-custom.mdx index 06820db8..d5d7567a 100644 --- a/packages/document/docs/en/guide/custom/rule-custom.mdx +++ b/packages/document/docs/en/guide/custom/rule-custom.mdx @@ -1,4 +1,4 @@ -# Custom Extension Rules +# Custom extension rules ## Introduction @@ -64,7 +64,7 @@ export default { You can follow the detailed steps below to define and write custom rules. -## Steps for Custom Rules +## Steps for custom rules ### 1. Installation @@ -76,7 +76,7 @@ import { Tab, Tabs } from 'rspress/theme'; -### 2. Writing Rules +### 2. Writing rules To write rules, you need to use the `defineRule` function, which takes a function as input and returns an object in a fixed format. Refer to the following example: @@ -106,11 +106,11 @@ export const CheckRule = defineRule(() => ({ The `meta` field contains the fixed configuration and content of this rule, and the `check` field contains the callback that includes the specific logic for rule checking. Their types are as follows. -#### meta Object +#### meta object For the definition of the meta type, please refer to [RuleMeta](#rulemeta). -##### Property Meanings +##### Property meanings - meta - category @@ -130,12 +130,12 @@ For the definition of the meta type, please refer to [RuleMeta](#rulemeta). - info: The documentation link for the rule. - type: string. -#### check Function +#### check function The check function is mainly used for rule judgment. The parameter `ruleContext` is all the build information that Rsdoctor integrates during the build analysis process, and its type is defined as follows. You can use the build information in the body of the check function to make custom rule judgments. After the judgment, if the rule check fails, you can report it using the `report` method in the parameter. See the next step for details. -##### CheckCallback Type +##### CheckCallback type ```ts type CheckCallback = ( @@ -170,7 +170,7 @@ const CheckRule = defineRule(() => ({ })); ``` -### 3. Reporting Rule Results +### 3. Reporting rule results To report errors, you need to use the `report` method in the `check` callback function's parameter. The `report` method's parameters mainly include the following parts: @@ -181,7 +181,7 @@ To report errors, you need to use the `report` method in the `check` callback fu For detailed type definitions, refer to: [ReportData](#reportdata) -### 4. Displaying Rule Results +### 4. Displaying rule results The `report` function will pass the error information of custom rules to the compilation's errors or warnings. It will display the rule results in the terminal during the build process, and even interrupt the build. At the same time, Rsdoctor also has two components that can be used to display rules. For more details, see [Display Components](#display-components). @@ -194,9 +194,9 @@ At the same time, Rsdoctor also has two components that can be used to display r -## Display Components +## Display components -### Basic Rule Warning Component +### Basic rule warning component - Component Type @@ -263,7 +263,7 @@ report({ - Component Code [Code](https://github.com/web-infra-dev/rsdoctor/blob/main/packages/components/src/components/Alert/link.tsx) -### Code Display Component +### Code display component - Component Type @@ -337,7 +337,7 @@ report({ - Component Code: [Code](https://github.com/web-infra-dev/rsdoctor/blob/main/packages/components/src/components/Alert/view.tsx) -## Type Definitions +## Type definitions ### RuleMeta @@ -487,7 +487,7 @@ interface SourceRange { ## Tools -### AST Processing +### AST processing When performing rule detection and analysis, it is common to perform AST analysis on modules and other operations. To provide more auxiliary functions, we also provide `@rsdoctor/utils/rule-utils` in the `@rsdoctor/utils` package, which contains many useful utility functions and methods. @@ -525,7 +525,7 @@ interface Document { The `asserts` assertion method set provides type assertion methods for all AST nodes, while the `utils` utility method set provides commonly used methods such as determining whether certain statements have the same semantics and retrieving Import nodes. -### Reporting Code Position +### Reporting code position Some errors require providing the position of the code, so the content of the `document` field needs to be provided. However, there is an important distinction here: each module actually has two sets of code, transformed and source, which means the code after being processed by the loader and the user's original code. The AST is actually the transformed code format. To facilitate display for users, we need to use the original code as much as possible. Therefore, after selecting the corresponding AST node, users need to use the SourceMap module provided by the module to convert the position information to the original code. If the module does not have the original code or SourceMap for some special reasons, then using the transformed code/position is more appropriate. A typical workflow is as follows: @@ -553,6 +553,6 @@ report({ }); ``` -## Data Reporting +## Data reporting Please go to [Data Reporting](./upload-data) for viewing. diff --git a/packages/document/docs/en/guide/custom/upload-data.mdx b/packages/document/docs/en/guide/custom/upload-data.mdx index ef1bd951..5bd2dd28 100644 --- a/packages/document/docs/en/guide/custom/upload-data.mdx +++ b/packages/document/docs/en/guide/custom/upload-data.mdx @@ -1,4 +1,4 @@ -# Data Upload +# Data upload To perform data upload, you need to use the interface of custom extension rules. Please refer to [Custom Extension Rules](./rule-custom) for more information. diff --git a/packages/document/docs/en/guide/more/rules.mdx b/packages/document/docs/en/guide/more/rules.mdx index b4990d22..5a0d8b06 100644 --- a/packages/document/docs/en/guide/more/rules.mdx +++ b/packages/document/docs/en/guide/more/rules.mdx @@ -1,4 +1,4 @@ -# Rule Index +# Rule index import RuleIndex from '@components/RuleIndex'; diff --git a/packages/document/docs/en/guide/start/cicd.mdx b/packages/document/docs/en/guide/start/cicd.mdx index eec30dd5..19b0f7d3 100644 --- a/packages/document/docs/en/guide/start/cicd.mdx +++ b/packages/document/docs/en/guide/start/cicd.mdx @@ -1,14 +1,14 @@ import { Badge } from '@theme'; -# CI/CD Tutorial +# CI/CD tutorial In CI/CD, there is often a desire to upload historical reports to the CDN as historical records. Because it's not convenient to achieve instant use in the standard mode, the **Brief** mode is supported. -## Brief Mode +## Brief mode In Brief mode, data reports are integrated into a single HTML page, making it easy for users to view historical build data in a summary form within CI/CD and other scenarios. -### Enabling Brief Mode +### Enabling brief mode @@ -33,7 +33,7 @@ module.exports = { }; ``` -### Differences between Brief Mode and Lite Mode +### Differences between brief mode and lite mode Currently, Rsdoctor has several report modes: `Normal, Brief, and Lite`. diff --git a/packages/document/docs/en/guide/start/cli.mdx b/packages/document/docs/en/guide/start/cli.mdx index 49253901..8afe252b 100644 --- a/packages/document/docs/en/guide/start/cli.mdx +++ b/packages/document/docs/en/guide/start/cli.mdx @@ -1,4 +1,4 @@ -# CLI Tutorial +# CLI tutorial We provide `@rsdoctor/cli` for you to use Rsdoctor's features locally through the CLI program. @@ -21,7 +21,7 @@ import { Tab, Tabs } from 'rspress/theme'; -## Command Usage +## Command usage ```linux @@ -31,7 +31,7 @@ rsdoctor [options] `@rsdoctor/cli` currently provides the following commands for different functionalities: -### analyze Command +### 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. diff --git a/packages/document/docs/en/guide/start/features.mdx b/packages/document/docs/en/guide/start/features.mdx index ca322b8c..afad44c4 100644 --- a/packages/document/docs/en/guide/start/features.mdx +++ b/packages/document/docs/en/guide/start/features.mdx @@ -2,7 +2,7 @@ Here you can learn about the main features supported by Rsdoctor. -## Build Overview +## Build overview | Feature | Description | Related Links | | -------------------- | ---------------------------------------------------------------------- | -------------------------------------------- | @@ -12,7 +12,7 @@ Here you can learn about the main features supported by Rsdoctor. | 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 +## Compilation analysis | Feature | Description | Related Links | | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | @@ -24,7 +24,7 @@ Here you can learn about the main features supported by Rsdoctor. | 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 +## Bundle analysis | Feature | Description | Related Links | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- | diff --git a/packages/document/docs/en/guide/start/intro.mdx b/packages/document/docs/en/guide/start/intro.mdx index aca0bdca..46ebbefd 100644 --- a/packages/document/docs/en/guide/start/intro.mdx +++ b/packages/document/docs/en/guide/start/intro.mdx @@ -30,11 +30,11 @@ ![Overall-Alerts](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/overall-alerts.jpg) -### ⭐️ Compilation Analysis +### ⭐️ 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 +#### 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. @@ -51,7 +51,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M /> -#### Plugin Analysis +#### Plugin analysis - This module mainly intercepts and collects data information such as the number of calls and estimated time consumption of Plugins. @@ -66,7 +66,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M />

-#### Resolve Analysis +#### 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. @@ -81,7 +81,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M />

-### ⭐️ Product Analysis +### ⭐️ 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. @@ -98,7 +98,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M />

-### ⭐️ Bundle Diff +### ⭐️ Bundle diff ::: tip Support in progress... diff --git a/packages/document/docs/en/guide/start/quick-start-shared.mdx b/packages/document/docs/en/guide/start/quick-start-shared.mdx index 587ccfdb..7520f097 100644 --- a/packages/document/docs/en/guide/start/quick-start-shared.mdx +++ b/packages/document/docs/en/guide/start/quick-start-shared.mdx @@ -1,4 +1,4 @@ -## Step 2: Register Plugin +## 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: @@ -123,7 +123,7 @@ export default { - **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options). -#### 📢 Next.js Project Notice +#### 📢 Next.js project notice 1. Next.js Project Reporting Page Issues @@ -133,7 +133,7 @@ For more details, see: [FAQ](../more/faq#nextjs) For more details, see: [FAQ](../more/faq#nextjs) -### Vue Framework +### Vue project Initialize the `@rsdoctor/webpack-plugin` or `@rsdoctor/rspack-plugin` plugin in the configuration file. Here is an example using `rsbuild`: @@ -163,7 +163,7 @@ export default defineConfig({ --- -## Step 3: Run Build +## 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. diff --git a/packages/document/docs/en/guide/start/quick-start.mdx b/packages/document/docs/en/guide/start/quick-start.mdx index 595d9841..e65d17d5 100644 --- a/packages/document/docs/en/guide/start/quick-start.mdx +++ b/packages/document/docs/en/guide/start/quick-start.mdx @@ -1,4 +1,4 @@ -# Quick Start +# Quick start This document will explain how to access the Rsdoctor ability. @@ -6,13 +6,13 @@ This document will explain how to access the Rsdoctor ability. import { PackageManagerTabs } from '@theme'; -### Rspack Projects +### Rspack projects For projects based on Rspack or Rsbuild, install the following dependencies: -### Webpack Projects +### Webpack projects :::tip Not supported in Webpack 4. diff --git a/packages/document/docs/en/guide/usage/bundle-alerts.mdx b/packages/document/docs/en/guide/usage/bundle-alerts.mdx index 8aafc1c5..f496c843 100644 --- a/packages/document/docs/en/guide/usage/bundle-alerts.mdx +++ b/packages/document/docs/en/guide/usage/bundle-alerts.mdx @@ -1,8 +1,8 @@ -# Bundle Alerts +# Bundle alerts ## Introduction -### Duplicate Third-party Packages +### 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. @@ -33,15 +33,16 @@ -### Duplicate Package Optimization +### Duplicate package optimization Please check [Duplicate Package Optimization](../../blog/topic/duplicate-pkg-problem). -### ECMA Version Check +### ECMA version check In the bundle alerts, the ECMA version of the bundle is checked, as shown in the following image: {' '} + Click on "**More**" to view the corresponding rule explanation. diff --git a/packages/document/docs/en/guide/usage/bundle-diff.mdx b/packages/document/docs/en/guide/usage/bundle-diff.mdx index 88d2c0d0..2548bd12 100644 --- a/packages/document/docs/en/guide/usage/bundle-diff.mdx +++ b/packages/document/docs/en/guide/usage/bundle-diff.mdx @@ -1,4 +1,4 @@ -# Bundle Diff +# Bundle diff import { Badge } from '@theme'; @@ -23,9 +23,9 @@ We plan to provide an online page for Bundle Diff analysis. You can upload **2 c -## User Guide +## User guide -### Feature Overview +### Feature overview In the Bundle Diff module, you can see the comparison of information between the two build bundles, including: diff --git a/packages/document/docs/en/guide/usage/bundle-overall.mdx b/packages/document/docs/en/guide/usage/bundle-overall.mdx index cf2d4dac..c73ce10a 100644 --- a/packages/document/docs/en/guide/usage/bundle-overall.mdx +++ b/packages/document/docs/en/guide/usage/bundle-overall.mdx @@ -1,4 +1,4 @@ -# Bundle Overall +# Bundle overall ## Overview @@ -26,9 +26,9 @@ On the homepage of **Rsdoctor**, we can see a card called `Bundle Overall`, whic | modules | Represents the total number of modules in the artifacts | | duplicate packages | Represents the total number of duplicate packages in the artifacts | -## Usage Instructions +## Usage instructions -### View Bundle Artifacts +### View bundle artifacts - The **"TOTAL Size"** data on the card represents the total size of the project. Clicking on this number will navigate to the [Bundle Size](./bundle-size.mdx) diff --git a/packages/document/docs/en/guide/usage/bundle-size.mdx b/packages/document/docs/en/guide/usage/bundle-size.mdx index 9f1f6d83..f8663581 100644 --- a/packages/document/docs/en/guide/usage/bundle-size.mdx +++ b/packages/document/docs/en/guide/usage/bundle-size.mdx @@ -1,4 +1,4 @@ -# Bundle Analysis +# Bundle analysis ## Introduction @@ -27,9 +27,9 @@ Click on the **"Bundle Size"** option in the navigation bar to view the Bundle a - **`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, Webpack 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. -## Bundle Overview +## Bundle overview -### Bundle Information Card +### Bundle information card The bundle overview displays information about the number and size of files, such as `Total Files`. Clicking on the card chart expands the resource details, as shown in the following image: @@ -50,19 +50,19 @@ The bundle overview displays information about the number and size of files, suc - Clicking on the tabs allows you to switch between different resource information views, such as **[Total JS | Initial JS]**. The card also displays the percentage, size, and number of resources. Similarly, clicking on the icon in the lower right corner expands the resource list. -### Duplicate Packages +### Duplicate packages The **Duplicate Packages** card displays the number of duplicate third-party packages in the project. Clicking on the image allows you to view the specific details of the duplicate packages. Please note that these are duplicate packages that have been bundled. For more information, please refer to [Duplicate Packages](/guide/usage/bundle-alerts). -## Bundle Analysis +## Bundle analysis ::: tip If your project is based on Rspack and the version is lower than 0.5.1, you cannot view code information. ::: -### Resource and Module Relationship Display +### Resource and module relationship display The **Bundle Analysis** module is used to analyze the size and code information of the build artifacts' resources (**Assets**) and the included **Modules**. The example image is shown below: @@ -71,7 +71,7 @@ The **Bundle Analysis** module is used to analyze the size and code information -### Search and Filter Box +### Search and filter box The top toolbar from left to right includes: the search tool for **Assets**, the filter tool for **Assets** size, and the filter tool for **Module** size. @@ -82,7 +82,7 @@ The top toolbar from left to right includes: the search tool for **Assets**, the -### Module Tag Explanation +### Module tag explanation The **Assets** tag is shown in the left image, from left to right representing: **Resource Size**, **[Initial Chunk](https://webpack.js.org/concepts/under-the-hood/#chunks)**, and **Code View**. @@ -111,7 +111,7 @@ 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 +## Bundle overview tile graph Click the **"Bundle Analyzer Graph"** button on the **"Bundle Size"** page to view the classic tile graph. diff --git a/packages/document/docs/en/guide/usage/compile-alerts.mdx b/packages/document/docs/en/guide/usage/compile-alerts.mdx index cfa7e057..fd33bd37 100644 --- a/packages/document/docs/en/guide/usage/compile-alerts.mdx +++ b/packages/document/docs/en/guide/usage/compile-alerts.mdx @@ -1,4 +1,4 @@ -# Compilation Alerts +# Compilation alerts We have also integrated the ability to detect warnings based on compilation data. If the current compilation results contain data that matches the rules defined by us, the `Compile Alerts` module will appear below the **Rsdoctor** main interface, as shown in the following figure: diff --git a/packages/document/docs/en/guide/usage/compile-overall.mdx b/packages/document/docs/en/guide/usage/compile-overall.mdx index daa23300..d714934a 100644 --- a/packages/document/docs/en/guide/usage/compile-overall.mdx +++ b/packages/document/docs/en/guide/usage/compile-overall.mdx @@ -1,4 +1,4 @@ -# Compile Overall +# Compile overall ## Overview @@ -26,9 +26,9 @@ The following table explains the meaning and code implementation of each phase i | AfterCompile -> Done | Represents the time taken from compilation completion to the end of the entire process |
  • In `Webpack` or `Rspack` projects: The start time is the time when **compiler.hooks.afterCompile** is called, and the end time is the time when **compiler.hooks.done** is called
| | Minify | Represents the time taken for file compression during the compilation process in most cases |
  • In `Webpack` or `Rspack` projects: Calculates the sum of the time taken for each call of **compilation.hooks.optimizeChunkAssets** and **compilation.hooks.processAssets**
| -## Usage Instructions +## Usage instructions -### Bootstrap -> BeforeCompile Details +### Bootstrap -> BeforeCompile details By **clicking on the data of the `Bootstrap -> BeforeCompile` phase**, a popup will appear on the page, as shown in the following image: @@ -52,11 +52,11 @@ Hovering over a data point in the chart will display the following information i - **end**: the end time - **duration**: the duration, calculated as `end - start` -### Compile Phase +### Compile phase In this section, you can navigate to "Compile Analysis" -> "Loader Analysis" -> [**"Loader Timeline"**](./loaders-timeline.mdx) in the navigation bar to view the timeline of loader compilation time. -### AfterCompile -> Done Details +### AfterCompile -> Done details By **clicking on the data of the `AfterCompile -> Done` phase**, a popup will appear on the page, as shown in the following image: @@ -96,7 +96,7 @@ Hovering over a data point in the chart will display the following information i - **end**: the end time - **duration**: the duration, calculated as `end - start` -### Minify Details +### Minify details :::tip Minify details are currently not available for Rspack projects. @@ -109,7 +109,7 @@ By **clicking on the data of the `Minify` phase**, a popup will appear on the pa The content in the popup has similar meanings to the previous paragraphs, so it will not be repeated here. -## Reference Documentation +## Reference documentation - [**Rspack Hooks**](https://www.rspack.dev/api/plugin-api.html#beforecompile) - [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/) diff --git a/packages/document/docs/en/guide/usage/loaders-analysis.mdx b/packages/document/docs/en/guide/usage/loaders-analysis.mdx index 46d41344..01e972d6 100644 --- a/packages/document/docs/en/guide/usage/loaders-analysis.mdx +++ b/packages/document/docs/en/guide/usage/loaders-analysis.mdx @@ -1,4 +1,4 @@ -# Loaders Analysis +# Loaders analysis **Rsdoctor** provides the `Loader Analysis` module, which mainly provides statistics on Loaders at the **directory and file level**. It helps you analyze the compilation of **folders** and **individual files** by Loaders. @@ -23,7 +23,7 @@ In the file tree structure below, there are two interactive forms to obtain diff The corresponding details will be explained in the following paragraphs. -## Loader Data for File Directories +## Loader data for file directories By **clicking on a selected directory**, you can see the **time statistics of all Loaders in the selected directory** ([estimated time consumption](../../guide/more/faq#loader-time-consuming-data-is-inaccurate)) on the right side of the file tree. The content of the "Statistics of \*\*\*" card is shown in the following image: @@ -43,7 +43,7 @@ Usually, we can select some **third-party library directories** within `node_mod If it is a third-party library with **advanced ES syntax** or a package within the **workspace**, we need to make more granular decisions at the individual file level based on the content in the next paragraph to optimize Loader performance. -## Loader Details for Individual Files +## Loader details for individual files By **clicking on a file**, a modal will appear with the following content: diff --git a/packages/document/docs/en/guide/usage/loaders-timeline.mdx b/packages/document/docs/en/guide/usage/loaders-timeline.mdx index 1c1dac63..ac021f05 100644 --- a/packages/document/docs/en/guide/usage/loaders-timeline.mdx +++ b/packages/document/docs/en/guide/usage/loaders-timeline.mdx @@ -1,4 +1,4 @@ -# Loaders Timeline +# Loaders timeline ## Overview @@ -39,7 +39,7 @@ There are two selector at the top of the page, where you can enter the **Loaders style={{ margin: 'auto' }} /> -### Viewing Overall Loader Information +### Viewing overall loader information If we want to view the **summary of all data** for a single loader, we can hover over the position shown in the following image: @@ -57,7 +57,7 @@ At this point, we can see the **summary of all invocations** within a single loa style={{ margin: 'auto' }} /> -### Viewing Individual Loader Invocation Information +### Viewing individual loader invocation information If we want to view the **information of a single invocation** for a loader, we can hover over any **colored stripe** within the position shown in the following image. At this point, we can see the **information of the current invocation** within a single loader (refer to the [Glossary](#glossary) for field definitions), as shown in the following image: diff --git a/packages/document/docs/en/guide/usage/module-analysis.mdx b/packages/document/docs/en/guide/usage/module-analysis.mdx index 1112b207..999b90e0 100644 --- a/packages/document/docs/en/guide/usage/module-analysis.mdx +++ b/packages/document/docs/en/guide/usage/module-analysis.mdx @@ -1,4 +1,4 @@ -# Module Dependency Analysis +# Module dependency analysis ## Introduction @@ -12,7 +12,7 @@ In this section, you can analyze the imported chain of a module. If you have the style={{ margin: 'auto' }} /> -### This Section’s Entry +### This section's entry Clicking on an **Assets** in the **[Bundle Size](./bundle-size)** page will display the `「Module Tree」` on the right side. Each **Module** will have the following icon next to it, click on it to view the imported chain of that **Module**. @@ -28,7 +28,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. -## Reasons Dependency Tree +## Reasons dependency tree ### Introduction diff --git a/packages/document/docs/en/guide/usage/plugins-analysis.mdx b/packages/document/docs/en/guide/usage/plugins-analysis.mdx index e2554b73..8d69cae5 100644 --- a/packages/document/docs/en/guide/usage/plugins-analysis.mdx +++ b/packages/document/docs/en/guide/usage/plugins-analysis.mdx @@ -1,4 +1,4 @@ -# Plugin Analysis +# Plugin analysis ## Overview @@ -25,9 +25,9 @@ The meanings of the fields in the data statistics table on the page are as follo | calls | Represents the **number of times called** | | duration(total) | Represents the **total time of all calls** | -## Usage Instructions +## Usage instructions -### View Bundler Config +### View bundler config If we need to view the Rspack or Webpack configuration of the project, we can click on `View Bundler Config` in the upper right corner of the card. A floating layer will pop up, which contains the serialized **Bundler Config**, as shown in the following figure: @@ -37,7 +37,7 @@ If we need to view the Rspack or Webpack configuration of the project, we can cl style={{ margin: 'auto' }} /> -## Reference Documentation +## Reference documentation - [**Rspack Hooks**](https://www.rspack.dev/api/plugin-api.html#beforecompile) - [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/) diff --git a/packages/document/docs/en/guide/usage/project-overall.mdx b/packages/document/docs/en/guide/usage/project-overall.mdx index d0cefa03..039ba259 100644 --- a/packages/document/docs/en/guide/usage/project-overall.mdx +++ b/packages/document/docs/en/guide/usage/project-overall.mdx @@ -1,4 +1,4 @@ -# Project Overall +# Project overall ## Overview @@ -28,7 +28,7 @@ In the main page of **Rsdoctor**, we can see a card named `Project Overall`, whi ## Usage -### View Bundler Config +### View bundler config If we need to view the Rspack or Webpack configuration of the project, we can click on `View Bundler Config` in the top right corner of the card. A popup window will appear, containing the serialized [Bundler Config](https://webpack.js.org/configuration/), as shown in the following image: diff --git a/packages/document/docs/en/guide/usage/resolver.mdx b/packages/document/docs/en/guide/usage/resolver.mdx index 91438fb3..9c9f5389 100644 --- a/packages/document/docs/en/guide/usage/resolver.mdx +++ b/packages/document/docs/en/guide/usage/resolver.mdx @@ -1,4 +1,4 @@ -# Resolver Analysis +# Resolver analysis :::tip diff --git a/packages/document/docs/en/guide/usage/rule-config.mdx b/packages/document/docs/en/guide/usage/rule-config.mdx index 9b6b751c..cac78ee3 100644 --- a/packages/document/docs/en/guide/usage/rule-config.mdx +++ b/packages/document/docs/en/guide/usage/rule-config.mdx @@ -1,4 +1,4 @@ -# Compilation Diagnostic Rules +# Compilation diagnostic rules Building diagnostic rules is similar to lint tools like `ESLint`, but with a difference. `ESLint` performs static code scanning and is independent of the build process. On the other hand, the code diagnostics here are closely related to the build process of `Rspack` or `Webpack`. It incorporates various internal parameters generated during the build process to assist in the analysis, such as ModuleGraph, internal markers for each module by Webpack, and runtime added after code transformation, and so on... @@ -16,7 +16,7 @@ If any issues are detected during the build process, they will be displayed in t src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/rule-config-1.png" /> -## How to Use +## How to use Using diagnostic rules is simple. They are configured under the `linter` option of the entire plugin, as shown in the following example: @@ -45,7 +45,7 @@ export default { }; ``` -#### Enable ECMA Version check +#### Enable ECMA version check The configuration of `browserslist` is used first. If there is no `browserslist`, the following configuration is used for detection @@ -103,7 +103,7 @@ type RuleConfigItem = | [SeverityInput, unknown]; ``` -## Existing Internal Rules +## Existing internal rules There are already three rules included in the existing diagnostic tool, which are: diff --git a/packages/document/docs/zh/blog/release/release-note-0_3.mdx b/packages/document/docs/zh/blog/release/release-note-0_3.mdx index ddfcf84f..b80d7ad9 100644 --- a/packages/document/docs/zh/blog/release/release-note-0_3.mdx +++ b/packages/document/docs/zh/blog/release/release-note-0_3.mdx @@ -1,4 +1,4 @@ -# Rsdoctor v0.2-0.3 Release Note +# Rsdoctor v0.2-0.3 发布公告 Rsdoctor v0.3 已经发布啦! @@ -73,13 +73,13 @@ export default { }; ``` -## 支持 Banner Plugin +## 支持 Banner plugin 由于 Rspack 和 Webpack 都支持 BannerPlugin，且 BannerPlugin 可在生成的 chunk 顶部或尾部添加指定内容的代码段，这会影响到对 Bundle 的解析能力。因此，Rsdoctor 增加了 Banner Plugin 的支持。 详情请查看[支持 BannerPlugin](/guide/usage/bundle-size#%E6%94%AF%E6%8C%81-bannerplugin) -### 支持 ESM Loader +### 支持 ESM loader 自 Rspack@0.7.3 开始，支持以 `.js` 为后缀且 `package.json` 中配置 `type: module` 的 ESM Loader 执行（[相关 issue](https://github.com/web-infra-dev/rspack/issues/5735)）。因此，Rsdoctor 也支持 ESM Loader 的分析，主要支持以下两种类型： @@ -100,7 +100,7 @@ chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [ ]); ``` -## 支持 Parse Bundle 配置 +## 支持 Parse bundle 配置 在部分大型仓库中，反解 Bundle 解析执行耗时过大，这是因为 Parse Bundle 的分析利用了 AST 解析与处理。当产物文件过多时，耗时也会增加。如果不需要此功能，可以通过 `supports.parseBundle` 配置进行选择性关闭。示例如下： diff --git a/packages/document/docs/zh/blog/release/release-note-0_4.mdx b/packages/document/docs/zh/blog/release/release-note-0_4.mdx index 27962e0c..6f7b34d8 100644 --- a/packages/document/docs/zh/blog/release/release-note-0_4.mdx +++ b/packages/document/docs/zh/blog/release/release-note-0_4.mdx @@ -1,4 +1,4 @@ -# Rsdoctor v0.4 Release Note +# Rsdoctor v0.4 发布公告 Rsdoctor v0.4 已经发布啦! @@ -8,7 +8,7 @@ Rsdoctor v0.4 的新特性有: - **Bundle Diff**: 对比和分析两次构建产物的变化。 - **Vue Loader 分析**: 增加了对 Vue 项目中 loader 分析的支持。 -## Brief Report +## Brief report 在 Rsdoctor v0.4 中，新增了 **Brief 模式**，专为 CI/CD 场景设计。Brief 模式将数据报告整合到一个 HTML 页面中，方便用户在 CI/CD 及其他场景下查看历史构建数据。以下是 Brief 模式的主要特点： @@ -18,7 +18,7 @@ Rsdoctor v0.4 的新特性有: 此功能极大地提升了在 CI 流程中使用 Rsdoctor 分析报告的便捷性，可以在 Pipeline 中将报告上传到 CDN 以便展示历史报告。[详情请参阅](/guide/start/cicd) -## Bundle Diff +## Bundle diff import { Badge } from '@theme'; @@ -51,7 +51,7 @@ import { Badge } from '@theme'; 后续将计划支持用于 GitHub 平台的 Bundle Diff Action，更方便的进行 CI 阶段的劣化监控。 -## 支持 Vue Loader 分析能力 +## 支持 Vue loader 分析能力 diff --git a/packages/document/docs/zh/blog/topic/duplicate-pkg-problem.mdx b/packages/document/docs/zh/blog/topic/duplicate-pkg-problem.mdx index a39391be..be13b3a9 100644 --- a/packages/document/docs/zh/blog/topic/duplicate-pkg-problem.mdx +++ b/packages/document/docs/zh/blog/topic/duplicate-pkg-problem.mdx @@ -101,7 +101,7 @@ module.exports = { }; ``` -#### Peer Dependency 引起的重复包问题 +#### Peer dependency 引起的重复包问题 这种处理方法同样适用于由于 `pnpm workspace` 中 **[peerDependencies](https://pnpm.io/how-peers-are-resolved)** 多分身引起的重复包的项目中，项目目录结构如下： diff --git a/packages/document/docs/zh/guide/more/faq.mdx b/packages/document/docs/zh/guide/more/faq.mdx index 2b868740..aabb4cde 100644 --- a/packages/document/docs/zh/guide/more/faq.mdx +++ b/packages/document/docs/zh/guide/more/faq.mdx @@ -82,7 +82,7 @@ npx @rsdoctor/cli analyze --profile .next/.rsdoctor/manifest.json ``` -### Next.js 中不支持对 rules 进行重写的 Loader 分析 +### Next.js 中不支持对 rules 进行重写的 loader 分析 - Rsdoctor Loader 逻辑：由于 Rsdoctor 会对 Loader Rules 做修改，所以 Rsdoctor 为了兼容对 rules 进行重写的 Loader 逻辑，Rsdoctor 对 Module 进行了 Proxy 包裹。 diff --git a/packages/document/docs/zh/guide/more/rules.mdx b/packages/document/docs/zh/guide/more/rules.mdx index b4990d22..5a0d8b06 100644 --- a/packages/document/docs/zh/guide/more/rules.mdx +++ b/packages/document/docs/zh/guide/more/rules.mdx @@ -1,4 +1,4 @@ -# Rule Index +# Rule index import RuleIndex from '@components/RuleIndex'; diff --git a/packages/document/docs/zh/guide/start/cicd.mdx b/packages/document/docs/zh/guide/start/cicd.mdx index 599fa857..37695024 100644 --- a/packages/document/docs/zh/guide/start/cicd.mdx +++ b/packages/document/docs/zh/guide/start/cicd.mdx @@ -35,7 +35,7 @@ module.exports = { }; ``` -### Brief 模式和 Lite 模式的区别 +### Brief 模式和 lite 模式的区别 目前 Rsdoctor 有几种报告模式：`Normal、Brief 和 Lite`。 diff --git a/packages/document/docs/zh/guide/start/intro.mdx b/packages/document/docs/zh/guide/start/intro.mdx index f7283a3c..b0ea8c3d 100644 --- a/packages/document/docs/zh/guide/start/intro.mdx +++ b/packages/document/docs/zh/guide/start/intro.mdx @@ -98,7 +98,7 @@ />

-### ⭐️ Bundle Diff +### ⭐️ Bundle diff ::: tip 功能支持中... diff --git a/packages/document/docs/zh/guide/usage/bundle-diff.mdx b/packages/document/docs/zh/guide/usage/bundle-diff.mdx index ba335a78..b992d56f 100644 --- a/packages/document/docs/zh/guide/usage/bundle-diff.mdx +++ b/packages/document/docs/zh/guide/usage/bundle-diff.mdx @@ -1,4 +1,4 @@ -# Bundle Diff +# Bundle diff import { Badge } from '@theme'; diff --git a/packages/document/docs/zh/guide/usage/bundle-overall.mdx b/packages/document/docs/zh/guide/usage/bundle-overall.mdx index 18457c42..444974a4 100644 --- a/packages/document/docs/zh/guide/usage/bundle-overall.mdx +++ b/packages/document/docs/zh/guide/usage/bundle-overall.mdx @@ -28,7 +28,7 @@ ## 使用说明 -### View Bundle Artifacts +### View bundle artifacts - 卡片上的 **「TOTAL Size」** 数据是项目的总大小。点击该数字可以跳转到 [Bundle Size 页面](./bundle-size.mdx) diff --git a/packages/document/docs/zh/guide/usage/plugins-analysis.mdx b/packages/document/docs/zh/guide/usage/plugins-analysis.mdx index 2ae303f3..05d48463 100644 --- a/packages/document/docs/zh/guide/usage/plugins-analysis.mdx +++ b/packages/document/docs/zh/guide/usage/plugins-analysis.mdx @@ -27,7 +27,7 @@ plugin 耗时中会计算 Rsdoctor 的内部插件耗时。 ## 使用说明 -### View Bundler Config +### View bundler config 如果我们需要查看项目的 Rspack 或 Webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 **Bundler Config**，如下图所示： diff --git a/packages/document/docs/zh/guide/usage/project-overall.mdx b/packages/document/docs/zh/guide/usage/project-overall.mdx index cb7a351d..05d3a56b 100644 --- a/packages/document/docs/zh/guide/usage/project-overall.mdx +++ b/packages/document/docs/zh/guide/usage/project-overall.mdx @@ -28,7 +28,7 @@ ## 使用说明 -### View Bundler Config +### View bundler config 如果我们需要查看项目的 Rspack 或 Webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 [Bundler Config](https://webpack.js.org/configuration/)，如下图所示： diff --git a/packages/document/docs/zh/guide/usage/rule-config.mdx b/packages/document/docs/zh/guide/usage/rule-config.mdx index 06ce2c0f..3ed020bb 100644 --- a/packages/document/docs/zh/guide/usage/rule-config.mdx +++ b/packages/document/docs/zh/guide/usage/rule-config.mdx @@ -45,7 +45,7 @@ export default { }; ``` -#### 开启 ECMA Version check +#### 开启 ECMA version check 优先使用 `browserslist` 的配置，如果没有 `browserslist` 则通过以下配置的方式进行检测 diff --git a/packages/graph/README.md b/packages/graph/README.md index a34df1f5..78dd399c 100644 --- a/packages/graph/README.md +++ b/packages/graph/README.md @@ -1,4 +1,4 @@ -# Rsdoctor Graph +# Rsdoctor graph This package is the intermediate data layer of Rsdoctor. diff --git a/packages/types/README.md b/packages/types/README.md index bbef4880..1e6547a8 100644 --- a/packages/types/README.md +++ b/packages/types/README.md @@ -1,4 +1,4 @@ -# Rsdoctor Types +# Rsdoctor types This package is the Rsdoctor‘s types package. diff --git a/packages/utils/README.md b/packages/utils/README.md index 84a1a794..01e2bc1d 100644 --- a/packages/utils/README.md +++ b/packages/utils/README.md @@ -1,4 +1,4 @@ -# Rsdoctor Utils +# Rsdoctor utils This package is the Rsdoctor‘s tools package.