chore(docs): rsdoctor add the note for CssExtractRspackPlugin

web-infra-dev · Oct 11, 2024 · ce062ee · ce062ee
1 parent 598d44e
commit ce062ee
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/website/docs/en/guide/optimization/profile.mdx b/website/docs/en/guide/optimization/profile.mdx
@@ -84,3 +84,13 @@ To enable `RsdoctorRspackPlugin`, you can refer to the documentation: [Use Rsdoc
 - Usage documentation:
   - For Loader Analysis, refer to [Loader Timeline](https://rsdoctor.dev/guide/usage/loaders-timeline) and [Loader Details](https://rsdoctor.dev/guide/usage/loaders-analysis).
   - For Plugins Analysis, refer to [Plugin Analysis](https://rsdoctor.dev/guide/usage/plugins-analysis).
+
+#### 📢 Note
+
+**Compilation time analysis reveals that the loader of CssExtractRspackPlugin takes too long**
+
+When using Rsdoctor to analyze the compilation time of Rspack projects, you may find that the loader of [CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) takes a long time. However, this figure does not represent the actual time taken by the CssExtractRspackPlugin's loader; it also includes the time taken by other loaders involved in compiling this module.
+
+- Reason: The loader in [CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) asynchronously calls other loaders during the pitch phase and waits for the callback results after these loaders execute. Therefore, the time taken by CssExtractRspackPlugin actually includes the execution time of other loaders and idle time.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/4ffe579c62f6e8d995b7856d608abdef61219155/rsdoctor/css-extract-loader.png" />
diff --git a/website/docs/zh/guide/optimization/profile.mdx b/website/docs/zh/guide/optimization/profile.mdx
@@ -86,3 +86,13 @@ $ RSPACK_PROFILE=ALL rspack build
 - 使用文档：
   - Loader Analysis 使用文档可查看 [Loader Timeline](https://rsdoctor.dev/zh/guide/usage/loaders-timeline) 和 [Loader Details](https://rsdoctor.dev/zh/guide/usage/loaders-analysis)。
   - Plugins Analysis 使用文档可查看 [Plugin Analysis](https://rsdoctor.dev/zh/guide/usage/plugins-analysis)。
+
+#### 📢 注意
+
+**编译耗时发现 CssExtractRspackPlugin 的 loader 耗时过长问题**
+
+在使用 Rsdoctor 对 Rspack 项目进行编译耗时分析时，可能会发现 [CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) 的 loader 耗时较长。然而，这个数值并不代表 CssExtractRspackPlugin 的 loader 的真实耗时，它还包含了对本模块编译的其他 loader 的耗时。
+
+- 原因：[CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) 中的 loader 在 pitch 阶段会异步调用其他 loader，并等待这些 loader 执行后的回调结果。因此，CssExtractRspackPlugin 的耗时实际上包括了其他 loader 的执行时间和空闲时间。
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/4ffe579c62f6e8d995b7856d608abdef61219155/rsdoctor/css-extract-loader.png" />