docs: add profile guide using samply (#9157)

* docs: add profile guide using samply

* Update website/docs/zh/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/zh/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/en/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/zh/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/zh/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/zh/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/zh/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/en/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* Update website/docs/en/contribute/development/profiling.md

Co-authored-by: neverland <[email protected]>

* chore: add link guide

* Apply suggestions from code review

* Update website/docs/en/contribute/development/profiling.md

* Update website/docs/zh/contribute/development/profiling.md

---------

Co-authored-by: neverland <[email protected]>

Author: hardfist

website/docs/en/contribute/development/profiling.md

@@ -6,6 +6,34 @@ Since different profilers have different strengths. It is good to use more than
 
 <!-- toc -->
 
+## Build release version with debug info
+
+Performance analysis should be conducted on a release version that includes debug information. This approach ensures accurate performance results while providing sufficient debug information for analysis. Use the following command to profiling using local build rspack.
+
+1. Build a release version with debug information:
+
+```sh
+just build release-debug
+```
+
+2. Change `@rspack/core` and `@rspack/cli` to use `link` protocol to link to local build Rspack:
+
+```diff title="package.json"
+  dependencies: {
+-    "@rspack/core": "x.y.z",
+-    "@rspack/cli": "x.y.z",
+     # link protocol only works in pnpm
++    "@rspack/core": "link:{your_rspack_repo}/packages/rspack",
++    "@rspack/cli": "link:{your_rspack_repo}/packages/rspack-cli"
+  }
+```
+
+3. Reinstall:
+
+```sh
+pnpm install
+```
+
 ## Tracing
 
 [`tracing`](https://crates.io/crates/tracing) is used to instrumenting Rspack.
@@ -46,6 +74,36 @@ RSPACK_PROFILE=TRACE=layer=logger rspack build
 
 will print the options passed to Rspack as well as each individual tracing event.
 
+## CPU profiling
+
+### Samply
+
+[Samply](https://github.com/mstange/samply) supports performance analysis for both Rust and JavaScript simultaneously. Follow these steps to perform a complete performance analysis:
+
+- Run the following command to start performance analysis:
+
+```sh
+samply record -- node --perf-prof --perf-basic-prof {your_rspack_folder}/rspack-cli/bin/rspack.js -c {your project}/rspack.config.js
+```
+
+- After the command execution, the analysis results will automatically open in the [Firefox Profiler](https://profiler.firefox.com/). The screenshot below is from a [Samply profiler](https://profiler.firefox.com/public/5fkasm1wcddddas3amgys3eg6sbp70n82q6gn1g/calltree/?globalTrackOrder=0&symbolServer=http%3A%2F%2F127.0.0.1%3A3000%2F2fjyrylqc9ifil3s7ppsmbwm6lfd3p9gddnqgx1&thread=2&v=10).
+
+:::warning
+Node.js currently only supports `--perf-prof` on Linux platforms. JavaScript profiling in Samply depends on `--perf-prof` support. If you need to use Samply for JavaScript profiling on other platforms, consider using Docker for profiling, or you can compile Node.js yourself for macOS using [node-perf-maps](https://github.com/tmm1/node/tree/v8-perf-maps) for profiling purposes.
+:::
+
+#### JavaScript profiling
+
+Rspack’s JavaScript typically runs in the Node.js thread. Select the Node.js thread to view the time distribution on the Node.js side.
+
+![Javascript Profiling](https://assets.rspack.dev/rspack/assets/profiling-javascript.png)
+
+#### Rust profiling
+
+Rspack’s Rust code usually runs in the tokio thread. Select the tokio thread to view the time distribution on the Rust side.
+
+![Rust Profiling](https://assets.rspack.dev/rspack/assets/profiling-rust.png)
+
 ### Node.js profiling
 
 If we find that the performance bottleneck is on the JS side (e.g. js loader), then we need to further analyse the js side, and we can use Nodejs Profiling to analyse. for example

website/docs/zh/contribute/development/profiling.md

@@ -8,6 +8,34 @@
 
 <!-- toc -->
 
+## Build release version with debug info
+
+性能分析应基于包含调试信息的发布版本进行。这种方法既能确保性能结果的准确性，又能提供充足的调试信息用于分析。使用以下命令使用本地的 rspack 进行 profiling
+
+1. 构建带有调试信息的发布版本：
+
+```sh
+just build release-debug
+```
+
+2. 更改 `@rspack/core` 和 `@rspack/cli`，使用 `link` 协议链接到本地​​构建的 Rspack：
+
+```diff title="package.json"
+  dependencies: {
+-    "@rspack/core": "x.y.z",
+-    "@rspack/cli": "x.y.z",
+     # link protocol only works in pnpm
++    "@rspack/core": "link:{your_rspack_repo}/packages/rspack",
++    "@rspack/cli": "link:{your_rspack_repo}/packages/rspack-cli"
+  }
+```
+
+3. 重新安装依赖：
+
+```sh
+pnpm install
+```
+
 ## Tracing
 
 [`tracing`](https://crates.io/crates/tracing) 被用于度量（instrumenting） Rspack。
@@ -48,6 +76,36 @@ RSPACK_PROFILE=TRACE=layer=logger rspack build
 
 将打印传递给 Rspack 的选项以及每个单独的 tracing 事件.
 
+## CPU profiling
+
+### Samply
+
+[Samply](https://github.com/mstange/samply) 支持同时对 Rust 和 JavaScript 进行性能分析，可通过如下步骤进行完整的性能分析:
+
+- 运行以下命令启动性能分析：
+
+```sh
+samply record -- node --perf-prof --perf-basic-prof {your_rspack_folder}/rspack-cli/bin/rspack.js -c {your project}/rspack.config.js
+```
+
+- 命令执行完毕后会自动在 [Firefox profiler](https://profiler.firefox.com/) 打开分析结果，如下截图来自 [Samply profiler](https://profiler.firefox.com/public/5fkasm1wcddddas3amgys3eg6sbp70n82q6gn1g/calltree/?globalTrackOrder=0&symbolServer=http%3A%2F%2F127.0.0.1%3A3000%2F2fjyrylqc9ifil3s7ppsmbwm6lfd3p9gddnqgx1&thread=2&v=10)。
+
+:::warning
+Node.js 目前仅在 Linux 平台支持 `--perf-prof`，而 Samply 里的 JavaScript Profiling 依赖 `--perf-prof`的支持，如果你需要在其他平台使用 Samply 进行 JavaScript Profiling，可以选择使用 docker 里进行 profiling，或者可以基于 [node-perf-maps](https://github.com/tmm1/node/tree/v8-perf-maps) 自行在 macOs 平台编译 Node.js 用于 profiling。
+:::
+
+#### JavaScript profiler
+
+Rspack 的 JavaScript 代码通常执行在 Node.js 线程里，选择 Node.js 线程查看 Node.js 侧的耗时分布。
+
+![Javascript Profiling](https://assets.rspack.dev/rspack/assets/profiling-javascript.png)
+
+#### Rust profiler
+
+Rspack 的 Rust 代码通常执行在 tokio 线程里，选择 tokio 线程就可以查看 Rust 侧的耗时分布。
+
+![Rust Profiling](https://assets.rspack.dev/rspack/assets/profiling-rust.png)
+
 ### Nodejs profiling
 
 如果我们发现性能瓶颈在 JS 端（比如 js loader），那么我们需要进一步分析 js 端，可以使用 Nodejs Profiling 来分析。例如

website/project-words.txt

@@ -157,6 +157,7 @@ ruleoneof
 ruleparserdataurlcondition
 Rust
 rustup
+samply
 sanyuan
 Shenzhen
 shulaoda