docs: update benchmark data and improve UI (#7159)

web-infra-dev · Jul 15, 2024 · 492bcc1 · 492bcc1
1 parent 89b5041
commit 492bcc1
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 191 deletions.
diff --git a/website/docs/en/misc/benchmark.mdx b/website/docs/en/misc/benchmark.mdx
@@ -1,13 +1,23 @@
 # Benchmark
 
-To run this benchmark yourself, clone [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark) and then use this command from the root:
+Rspack provides two benchmark repositories that you can clone and run locally:
+
+- [rspack-contrib/performance-compare](https://github.com/rspack-contrib/performance-compare): Performance comparison of Rspack, Rsbuild, webpack, Vite, and Farm with 1000 modules.
+
+```bash
+pnpm run benchmark
+```
+
+- [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark): Performance comparison of Rspack and webpack with 50000 modules.
 
 ```bash
 ./scripts/bench-all.sh ${platform} # `platform` is used to uniquely identify the generated benchmark data.
 ```
 
 ## Benchmark case
 
+Here are introductions to some test cases for the `web-infra-dev/bundler-benchmark`.
+
 ### all
 
 This project is used for comparing development mode and production mode build performance.

diff --git a/website/docs/zh/misc/benchmark.mdx b/website/docs/zh/misc/benchmark.mdx
@@ -1,13 +1,23 @@
 # 基准测试
 
-如果你想自己运行这个基准测试，请克隆 [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark)，然后在根目录下使用命令:
+Rspack 提供了两个 benchmark 的仓库，你可以自行克隆它们，并在本地运行：
+
+- [rspack-contrib/performance-compare](https://github.com/rspack-contrib/performance-compare)：Rspack、Rsbuild、webpack、Vite 和 Farm 的性能比较，模块数量为 1000。
+
+```bash
+pnpm run benchmark
+```
+
+- [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark)：Rspack 和 webpack 的性能比较，模块数量为 50000。
 
 ```bash
 ./scripts/bench-all.sh ${platform} # `platform` 用于唯一地识别生成的基准数据。
 ```
 
 ## 基准测试用例
 
+下面是 `web-infra-dev/bundler-benchmark` 中的一些测试用例介绍。
+
 ### all
 
 这个项目由若干子项目 `atlaskit-editor`、`common-libs`、`common-libs-chunks`、`rome` 和 `esbuild-three` 组合而成, 共 50000 个模块。用于我们比较开发模式和生产模式的构建性能。

diff --git a/website/theme/components/Benchmark/ProgressBar.module.scss b/website/theme/components/Benchmark/ProgressBar.module.scss
@@ -0,0 +1,53 @@
+.container {
+  width: 50vw;
+  height: 18px;
+  max-width: 800px;
+  border-radius: 10px;
+  box-sizing: content-box;
+}
+
+.inner-container {
+  width: 100%;
+  height: 8px;
+  background: var(--rp-c-gray-light-5);
+  border-radius: 5px;
+}
+
+:global(.dark) {
+  .inner-container {
+    background: var(--rp-c-bg-soft);
+  }
+}
+
+.bar {
+  height: 100%;
+  border-radius: 5px;
+  background: linear-gradient(
+    120deg,
+    var(--rp-c-brand),
+    hsl(32.71deg 100% 70%)
+  );
+}
+
+.desc {
+  min-width: 84px;
+  color: var(--rp-c-text-2);
+  font-size: 12px;
+  margin-left: 16px;
+  width: 100px;
+  font-family:
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace;
+}
+
+.time {
+  display: inline-block;
+  width: 38px;
+  text-align: left;
+}
diff --git a/website/theme/components/Benchmark/ProgressBar.tsx b/website/theme/components/Benchmark/ProgressBar.tsx
@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import styles from './index.module.scss';
+import styles from './ProgressBar.module.scss';
 
 export function formatTime(time: number, totalTime: number) {
   if (totalTime < 1000) {
@@ -10,46 +10,49 @@ export function formatTime(time: number, totalTime: number) {
   }
 }
 
-export function ProgressBar({ value, max }: { value: number; max: number }) {
+export function ProgressBar({
+  value,
+  max,
+  color,
+  desc,
+}: {
+  value: number;
+  max: number;
+  color: string;
+  desc: string;
+}) {
   const [elapsedTime, setElapsedTime] = useState(0);
   const TOTAL_TIME = value * 1000;
   const isMobile = window.innerWidth < 768;
-  const progressBarWidth = isMobile ? 80 : 50;
+  const progressBarWidth = isMobile ? 80 : 55;
   const variants = {
     initial: { width: 0 },
-    animate: { width: '100%' },
+    animate: { width: `${(value / max) * 100}%` },
   };
+
   const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
   return (
     <div
-      className={`${styles['progress-bar-container']} flex justify-between items-center sm:pr-4`}
+      className={`${styles.container} flex items-center sm:pr-4`}
       style={{
         width: `${progressBarWidth}vw`,
       }}
     >
-      <div
-        className={`${styles['progress-bar-inner-container']} flex justify-between`}
-        style={{
-          width: `${(value / max) * 0.8 * progressBarWidth}vw`,
-        }}
-      >
+      <div className={`${styles['inner-container']} flex justify-between`}>
         <motion.div
-          className={styles['progress-bar']}
+          className={`${styles.bar} ${styles[color]}`}
           initial="initial"
           animate="animate"
           variants={variants}
           onUpdate={(latest: { width: string }) => {
             const width = parseFloat(latest.width);
-            setElapsedTime((width / 100) * TOTAL_TIME);
+            setElapsedTime(width * max * 10);
           }}
-          // 2x speed
-          transition={{ duration: value / 2, ease: 'linear' }}
+          transition={{ duration: value, ease: 'linear' }}
         />
       </div>
-      <div
-        className={`${styles['font-mono']} text-sm sm:text-base text-gray-400`}
-      >
-        {formattedTime}
+      <div className={styles.desc}>
+        <span className={styles.time}>{formattedTime}</span> {desc}
       </div>
     </div>
   );

diff --git a/website/theme/components/Benchmark/index.module.scss b/website/theme/components/Benchmark/index.module.scss
@@ -1,51 +1,41 @@
 .title {
-  background: linear-gradient(to right, #d3c357, #f1a76a, #cc6d2e);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: var(--rp-c-text-1);
 }
 
-.progress-bar-container {
-  width: 50vw;
-  height: 50px;
-  border-radius: 10px;
-  padding: 4px;
-  border: 1px solid var(--rp-c-gray-light-4);
-  box-sizing: content-box;
+.desc {
+  color: var(--rp-c-text-2);
 }
 
-.progress-bar-inner-container {
-  height: 50px;
-  background: var(--rp-c-gray-light-4);
-  border-radius: 5px;
-}
+.bottom-link {
+  display: block;
+  margin-top: 16px;
+  font-size: 16px;
+  color: var(--rp-c-text-2);
 
-:global(.dark) {
-  .progress-bar-inner-container {
-    background: var(--rp-c-dark-light-1);
+  &:hover {
+    color: var(--rp-c-link);
   }
 }
 
-.progress-bar {
-  height: 100%;
-  background: linear-gradient(to right, #d3c357, #f1a76a, #cc6d2e);
-  border-radius: 5px;
+.progress-name {
+  color: var(--rp-c-text-1);
+  font-weight: 600;
+  min-width: 160px;
 }
 
-.font-mono {
-  font-family:
-    Menlo,
-    Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
-    monospace;
+@media screen and (min-width: 540px) {
+  .item {
+    flex-direction: row;
+  }
 }
 
-@media (max-width: 768px) {
-  .progress-bar-container,
-  .progress-bar-inner-container {
-    height: 30px;
+@media screen and (max-width: 541px) {
+  .item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .progress-name {
+    margin-bottom: 8px;
   }
 }