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
web-infra-dev · Dec 21, 2023 · ef344e0 · ef344e0
1 parent 8e73635
commit ef344e0
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,35 @@
 
 English | [简体中文](./README.zh-CN.md)
 
+## 💡 What is Rsdoctor?
+
+<div align=center>
+ <img src="https://github.com/web-infra-dev/rsdoctor/assets/18437716/7fa6728b-7f13-4621-8030-33326f86e483" alt="duplicate packages" width='50%' style="margin-left: 25%" />
+</div>
+
+- 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.
+
+| <img src="https://github.com/web-infra-dev/rsdoctor/assets/18437716/5d985bae-dd91-4856-b112-00b18f13502c" alt="loader timeline" /> | <img src="https://github.com/web-infra-dev/rsdoctor/assets/18437716/172f5328-4508-4f4b-b53b-27ec1095ef9d" alt="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
@@ -3,6 +3,34 @@
 
 [English](./README.md) | 简体中文
 
+## 💡 什么是 Rsdoctor？
+
+<div align=center>
+ <img src="https://github.com/web-infra-dev/rsdoctor/assets/18437716/7fa6728b-7f13-4621-8030-33326f86e483" alt="duplicate packages" width='50%' style="margin-left: 25%" />
+</div>
+
+- Rsdoctor 是一个面向构建过程与构建产物提供诊断和分析的一站式工具。
+- Rsdoctor 是一个支持 Webpack 及 Rspack 构建分析工具。
+- Rsdoctor 是一个可以展示编译耗时及编译行为细节的分析工具。
+- Rsdoctor 是一个提供 Bundle Diff 等防劣化能力的工具。
+
+## 🔥 特性
+
+- **编译可视化**：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发同学查看构建问题。
+
+| <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/loader-timeline.png"  alt="loader timeline" /> | <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/rsdoctor-analyze-code.png" alt="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
@@ -27,7 +27,7 @@ export const LoaderNamesSelect: React.FC<LoaderNamesSelectProps> = ({ 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
@@ -5,7 +5,7 @@ import { LoaderChart } from 'src/components/Charts';
 
 export const Page: React.FC = () => {
   return (
-    <Card title="Webpack Loader Overall" extra={<WebpackConfigurationViewer defaultKeys={['module']} />} collapsable>
+    <Card title="Loader Overall" extra={<WebpackConfigurationViewer defaultKeys={['module']} />} collapsable>
       <LoaderChart />
     </Card>
   );