From fd73e9ddea32779e717665e2fcd30730b6fb4c2b Mon Sep 17 00:00:00 2001 From: hardfist Date: Wed, 14 Aug 2024 11:16:01 +0800 Subject: [PATCH] docs: delete benchmark page --- website/docs/en/misc/_meta.json | 1 - website/docs/en/misc/benchmark.mdx | 115 ------------------- website/docs/zh/misc/_meta.json | 1 - website/docs/zh/misc/benchmark.mdx | 115 ------------------- website/theme/components/Benchmark/index.tsx | 2 +- 5 files changed, 1 insertion(+), 233 deletions(-) delete mode 100644 website/docs/en/misc/benchmark.mdx delete mode 100644 website/docs/zh/misc/benchmark.mdx diff --git a/website/docs/en/misc/_meta.json b/website/docs/en/misc/_meta.json index 71206e41e0d..d2e3a42a0e3 100644 --- a/website/docs/en/misc/_meta.json +++ b/website/docs/en/misc/_meta.json @@ -1,7 +1,6 @@ [ "faq", "glossary", - "benchmark", { "type": "dir", "name": "planning", diff --git a/website/docs/en/misc/benchmark.mdx b/website/docs/en/misc/benchmark.mdx deleted file mode 100644 index 52fe71fa35f..00000000000 --- a/website/docs/en/misc/benchmark.mdx +++ /dev/null @@ -1,115 +0,0 @@ -# Benchmark - -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. -It is combined by several sub projects `atlaskit-editor`, `common-libs`, `common-libs-chunks`, `rome` and `esbuild-three`, which has a total of 50000 modules. -here is the simple description of each sub project: - -**atlaskit-editor** - -Basic react application with `@atlaskit/editor-core` - -**common-libs** - -A application that used some common libraries in JavaScript ecosystem. - -**common-libs-chunks** - -Same as `common-libs`, but using async `import()` syntax to force bundler generate multiple chunks. - -**esbuild-three** - -A large JavaScript codebase by duplicating the three.js library 10 times. - -**rome** - -The old Rome code base (prior to their Rust rewrite) to approximate a large TypeScript codebase. - -#### Data - -Tested on Intel(R) Xeon(R) Platinum 8260 CPU @ 2.40GHz 32Core, 64GB of RAM -| mode | Rspack | webpack(with swc) | webpack (with babel) | -|------------------------|---------|-------------------|----------------------| -| development cold start | 3.79s | 31.25s | 42.61s | -| production cold start | 22.353s | 75.054s | 160.059s | - -### react-components-10000 - -10000 react components (each component only have basic skeleton) to test hot module replacement performance of each devServer of bundler. - -#### Data - -Tested on Intel(R) Xeon(R) Platinum 8260 CPU @ 2.40GHz 32Core, 64GB of RAM -| | rspack/root | rspack/leaf | webpack(with swc)/root | webpack (with swc)/leaf | webpack (with babel)/root | webpack (with babel)/leaf | -|---------|-------------|-------------|------------------------|--------------------------|---------------------------|-------------------------| -| 1 | 711ms | 562ms | 2023ms | 1534ms | 2081ms | 1644ms | -| 2 | 507ms | 566ms | 1725ms | 1593ms | 1642ms | 1652ms | -| 3 | 551ms | 592ms | 1602ms | 1454ms | 1786ms | 1595ms | -| 4 | 525ms | 513ms | 1480ms | 1587ms | 1543ms | 1684ms | -| 5 | 545ms | 571ms | 1517ms | 1470ms | 1658ms | 1603ms | -| average | 567.8ms | 560.8ms | 1669.4ms | 1527.6ms | 1742ms | 1635.6ms | - -## Metrics - -- dev-cold-start: the time it takes for the development build to complete without caching. -- production-build-cold-start: the time it takes for the production build to complete without caching. -- HMR: the time it takes for the development server rebuild the project when an update is applied to a source file. - **there are two sub metrics of HMR**: - - leaf: time for updating a react component file that has no dependency - - root: time for updating a root react component, normally it is named `App.tsx` or `index.tsx` - -## Bundler involved in comparison - -- webpack + ts-loader (or babel-loader in react-components-10000) + terser-webpack-plugin - -- webpack + swc-loader + swc-minifier - -- Rspack (using SWC as transpiler and minifier) - -All the configuration in development mode keep as is except the loader which depends on the test target. - -In production mode we set `devtool` to `source-map` and use loader and minifier depends on the test target, keep other configuration as is. - -## Methodology - -### dev-cold-start - -Using `hyperfine` to run each development build command 10 times with warmup and get the average time, finally generate corresponding markdown table. - -### production-cold-start - -Using `hyperfine` to run each production build command 10 times with warmup and get the average time, finally generate corresponding markdown table. - -### HMR - -The HMR benchmark is relatively complex because it is usually implemented in four stages. - -1. devServer listens for file changes and rebuilds the project (usually a partial build). -2. devServer sends the built diff to the HMR client over the local network (usually a websocket). -3. HMR client receives the diff and applies the diff to runtime code of the browser. -4. the browser rerendering the view. - -Sometimes it takes about half time of HMR from second stage to fourth stage. - -Some tools' HMR benchmarks use the entire HMR time as the metric time, and since each toolchain may implement each stage of HMR differently, it's fine to compare in this way. - -However, our implementation is basically the same as webpack's in phases two through four, unlike webpack, Rspack uses a more fine-grained incremental build algorithm to accelerate phase one, and to better demonstrate the effect of this algorithm, we use the re-build time of both build tools as a metric. diff --git a/website/docs/zh/misc/_meta.json b/website/docs/zh/misc/_meta.json index 18513bc0f22..82596509d56 100644 --- a/website/docs/zh/misc/_meta.json +++ b/website/docs/zh/misc/_meta.json @@ -1,7 +1,6 @@ [ "faq", "glossary", - "benchmark", { "type": "dir", "name": "planning", diff --git a/website/docs/zh/misc/benchmark.mdx b/website/docs/zh/misc/benchmark.mdx deleted file mode 100644 index 92caca7ead9..00000000000 --- a/website/docs/zh/misc/benchmark.mdx +++ /dev/null @@ -1,115 +0,0 @@ -# 基准测试 - -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 个模块。用于我们比较开发模式和生产模式的构建性能。 - -以下是每个子项目的简单描述。 - -**atlaskit-editor** - -使用 `@atlaskit/editor-core` 的基本 react 应用程序。 - -**common-libs** - -一个使用了 JavaScript 生态中一些常用库的应用程序。 - -**common-libs-chunks** - -与 `common-libs` 相同，但使用异步 `import()` 语法来强制构建工具生成多个 chunk。 - -**esbuild-three** - -通过将 three.js 库重复 10 次来建立一个大型的 JavaScript 代码库。 - -**rome** - -旧的 Rome 代码库（在他们使用 Rust 重写之前），近似于一个大型 TypeScript 代码库。 - -#### 测量数据 - -测试于 on Intel(R) Xeon(R) Platinum 8260 CPU @ 2.40GHz 32Core, 64GB of RAM -| | Rspack | webpack(with swc) | webpack (with babel) | -|------------------------|---------|-------------------|----------------------| -| development cold start | 3.79s | 31.25s | 42.61s | -| production cold start | 22.353s | 75.054s | 160.059s | - -### react-components-10000 - -10000 个 react 组件（每个组件只有基本的骨架），用于测试构建工具的 devServer 的热模块替换性能。 - -#### 测量数据 - -测试于 Intel(R) Xeon(R) Platinum 8260 CPU @ 2.40GHz 32Core, 64GB of RAM -| | rspack/root | rspack/leaf | webpack(with swc)/root | webpack (with swc)/leaf | webpack (with babel)/root | webpack (with babel)/leaf | -|---------|-------------|-------------|------------------------|--------------------------|---------------------------|-------------------------| -| 1 | 711ms | 562ms | 2023ms | 1534ms | 2081ms | 1644ms | -| 2 | 507ms | 566ms | 1725ms | 1593ms | 1642ms | 1652ms | -| 3 | 551ms | 592ms | 1602ms | 1454ms | 1786ms | 1595ms | -| 4 | 525ms | 513ms | 1480ms | 1587ms | 1543ms | 1684ms | -| 5 | 545ms | 571ms | 1517ms | 1470ms | 1658ms | 1603ms | -| average | 567.8ms | 560.8ms | 1669.4ms | 1527.6ms | 1742ms | 1635.6ms | - -## 度量标准 - -- 开发环境冷启动：在没有缓存的情况下，开发模式构建完成所需的时间。 -- 生产环境冷启动：在没有缓存的情况下，生产模式构建完成所需的时间。 -- 模块热更新：当更新应用于一个源文件时，开发服务器重建项目所需的时间。 - **HMR 有两个子指标**： - - 叶子：更新一个没有依赖的 react 组件文件的时间 - - 根：更新一个根 react 组件的时间，通常它被命名为 `App.tsx` 或 `index.tsx`。 - -## 参与比较的构建工具 - -- webpack + ts-loader (or babel-loader in react-components-10000) + terser-webpack-plugin - -- webpack + swc-loader + swc-minifier - -- Rspack（使用 SWC 作为 transpiler 和 SWC minifier）。 - -在开发模式下，所有的配置都保持原样，除了依赖于测试目标的 loader。 - -在生产模式下，我们将 `devtool` 设置为 `source-map` 并使用依赖于测试目标的 loader 和 minifier，其他配置保持不变。 - -## 测量方法 - -### 开发环境冷启动 - -使用 `hyperfine` 预热后运行每个开发构建命令 10 次，得到平均时间并生成相应的 markdown 表格。 - -### 生产环境冷启动 - -使用 `hyperfine` 预热后运行每个生产构建命令 10 次，得到平均时间并生成相应的 markdown 表格。 - -### 模块热更新 - -HMR 基准测试相对复杂，因为它通常分四个阶段实现。 - -1. devServer 监听文件变化并重建项目（通常是部分构建）。 -2. devServer 通过本地网络（通常是 websocket）将构建的差异发送到 HMR 客户端。 -3. HMR 客户端收到差异，并将差异应用到浏览器的运行时代码中。 -4. 浏览器重新渲染视图。 - -有时从第二阶段到第四阶段需要大约一半的 HMR 时间。 - -一些工具的 HMR benchmark 将整个 HMR 的时间作为度量时间，因为各个工具链在实现 HMR 各阶段时都可能不同，因此这样比较是没有问题的。 - -但是由于我们和 webpack 在二到四阶段的实现基本一致，区别于 webpack，Rspack 使用更加细粒度的增量构建算法来加速第一阶段，为了更好展示该算法的效果，我们使用两个构建工具的重新构建时间作为度量时间。 diff --git a/website/theme/components/Benchmark/index.tsx b/website/theme/components/Benchmark/index.tsx index 29849c27d39..e591a3a0cf4 100644 --- a/website/theme/components/Benchmark/index.tsx +++ b/website/theme/components/Benchmark/index.tsx @@ -97,7 +97,7 @@ export function Benchmark() {