From ef344e08ec107023d629f326cb4d9a3f2afbd3ea Mon Sep 17 00:00:00 2001 From: yifancong Date: Thu, 21 Dec 2023 16:32:36 +0800 Subject: [PATCH] Chore: supply Readme (#60) * chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme chore: supply Readme * chore: supply readme chore: supply readme chore: supply readme chore: supply readme Update README.md Update README.md Update README.md Update README.md Update README.md Update README.zh-CN.md chore: supply readme chore: supply readme --- README.md | 40 +++++++++++++++++++ README.zh-CN.md | 39 ++++++++++++++++++ .../src/components/Select/index.tsx | 2 +- .../pages/WebpackLoaders/Overall/index.tsx | 2 +- 4 files changed, 81 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 05329a08..f5c0d948 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,35 @@ English | [简体中文](./README.zh-CN.md) +## 💡 What is Rsdoctor? + +
+ duplicate packages +
+ +- 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. + +| loader timeline | loader codes | +| ---------------------------------------------------------- | ------------------------------------------------ | + +- **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. + - 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. + ## 🤝 Contribution > New contributors welcome! @@ -16,6 +45,17 @@ Come and chat with us on [Discord](https://discord.gg/mScJfeeT)! The Rsdoctor te This repo has adopted the ByteDance Open Source Code of Conduct. Please check [Code of Conduct](./CODE_OF_CONDUCT.md) for more details. +## 🙏 Credits + +Some of the implementation of Rsdoctor refers to the excellent projects in the community, and we would like to thank them: + +- Some analysis logics are referenced from [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme). +- The built-in analysis graph in the build artifact page is from [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). + +## 🚧 Notice + +The Rsdoctor features and official website documentation are currently under development. Please wait for the 0.1.0 version. + ## 📖 License Rsdoctor is licensed under the [MIT License](https://github.com/web-infra-dev/rsdoctor/blob/main/LICENSE). diff --git a/README.zh-CN.md b/README.zh-CN.md index d131c32a..644968a1 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -3,6 +3,34 @@ [English](./README.md) | 简体中文 +## 💡 什么是 Rsdoctor？ + +
+ duplicate packages +
+ +- Rsdoctor 是一个面向构建过程与构建产物提供诊断和分析的一站式工具。 +- Rsdoctor 是一个支持 Webpack 及 Rspack 构建分析工具。 +- Rsdoctor 是一个可以展示编译耗时及编译行为细节的分析工具。 +- Rsdoctor 是一个提供 Bundle Diff 等防劣化能力的工具。 + +## 🔥 特性 + +- **编译可视化**：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发同学查看构建问题。 + +| loader timeline | loader codes | +| ---------------------------------------------------------- | ------------------------------------------------ | + +- **多种分析能力**：支持构建产物、构建时分析能力以及防劣化能力： + - 构建产物支持资源列表及模块依赖等。 + - 构建时分析支持 Loader、Plugin、Resolver 构建过程分析。 + - 构建规则支持重复包检测及 ES Version Check 检查等。 + - 支持 Bundle Diff 能力。 + +- **支持自定义规则**：除了内置构建扫描规则外，还支持用户根据 Rsdoctor 的构建数据添加自定义构建扫描规则。 + +- **框架无关**：支持所有基于 Webpack 或 Rspack 构建的项目。 + ## 🤝 参与贡献 > 欢迎参与 Rsdoctor 贡献！ @@ -19,6 +47,17 @@ 本仓库采纳了字节跳动的开源项目行为准则。请点击 [行为准则](./CODE_OF_CONDUCT.md) 查看更多的信息。 +## 🙏 致谢 + +Rsdoctor 的一些实现参考了社区中杰出的项目，对他们表示感谢： + +- 部分分析逻辑参考了 [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme)。 +- 构建产物页面中内嵌了 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 分析图。 + +## 🚧 施工告示 + +功能和官网文档目前还在开发中，敬请等候 0.1.0 版本。 + ## 📖 License Rsdoctor 项目基于 [MIT 协议](https://github.com/web-infra-dev/rsdoctor/blob/main/LICENSE)，请自由地享受和参与开源。 diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index 33d04101..e19b1cb5 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -27,7 +27,7 @@ export const LoaderNamesSelect: React.FC = ({ style, onC defaultValue={selectLoaders} style={{ width: 350 }} dropdownMatchSelectWidth - placeholder={'select webpack loaders'} + placeholder={'select loaders'} onChange={(e) => { setSelectLoaders(e); onChange(e); diff --git a/packages/components/src/pages/WebpackLoaders/Overall/index.tsx b/packages/components/src/pages/WebpackLoaders/Overall/index.tsx index b6eec8db..e8a5f1b0 100644 --- a/packages/components/src/pages/WebpackLoaders/Overall/index.tsx +++ b/packages/components/src/pages/WebpackLoaders/Overall/index.tsx @@ -5,7 +5,7 @@ import { LoaderChart } from 'src/components/Charts'; export const Page: React.FC = () => { return ( - } collapsable> + } collapsable> );