docs: add performance bottlenecks (#7593)

* docs: add performance bottlenecks

* docs: add html-webpack-plugin

website/docs/en/guide/optimization/profile.mdx

@@ -2,6 +2,44 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # Build performance profile
 
+This chapter introduces some common performance bottlenecks and performance profile methods for Rspack.
+
+## Performance Bottlenecks
+
+Although Rspack itself provides good build performance, the use of some JavaScript loaders and plugins in Rspack can slow down the build performance, especially on large projects.
+
+Some of these issues can be resolved with Rspack's built-in high performance alternatives, while others can be identified and optimized using performance analysis tools.
+
+Here are some common cases:
+
+### babel-loader
+
+[babel-loader](https://github.com/babel/babel-loader) compiles JavaScript and TypeScript code using Babel. You can replace Babel with the faster SWC. Rspack comes with a built-in [builtin:swc-loader](/guide/features/builtin-swc-loader), which is the Rust version of `swc-loader` and is intended to provide better performance.
+
+If you need to use some Babel plugins for custom transformations, configure babel-loader with [Rule.include](/config/module#ruleinclude) to match as few files as possible to reduce the Babel compilation overhead.
+
+### postcss-loader
+
+[postcss-loader](https://github.com/postcss/postcss-loader) compiles CSS code based on PostCSS, which is often used with PostCSS plugins to downgrade CSS syntax, add vendor prefixes, etc. You can replace PostCSS with the faster Lightning CSS by using Rspack's built-in [builtin:lightningcss-loader](/guide/features/builtin-lightningcss-loader).
+
+If your project uses the PostCSS plugin for Tailwind CSS v3, you may need to wait for the release of Tailwind CSS v4, which is based on Rust and Lightning CSS and will provide significant performance improvements. For more details, see [Open-sourcing our progress on Tailwind CSS v4.0](https://tailwindcss.com/blog/tailwindcss-v4-alpha).
+
+### terser-webpack-plugin
+
+[terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) minifies JavaScript code based on Terser. You can replace Terser with the faster SWC minimizer by using Rspack's built-in [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin).
+
+### css-minimizer-webpack-plugin
+
+[css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) minifies CSS code based on tools like cssnano. You can replace cssnano with the faster Lightning CSS minimizer by using Rspack's built-in [LightningCssMinimizerRspackPlugin](/plugins/rspack/lightning-css-minimizer-rspack-plugin).
+
+### less-loader
+
+[less-loader](https://github.com/webpack-contrib/less-loader) compiles `.less` files based on Less. Since Less currently lacks an officially implemented high performance alternative, it is recommended to use [sass-loader](https://github.com/webpack-contrib/sass-loader) and [sass-embedded](https://www.npmjs.com/package/sass-embedded) instead. `sass-embedded` is a JavaScript wrapper for Sass's native Dart executable that provides excellent performance.
+
+### html-webpack-plugin
+
+[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) performs poorly when generating large numbers of HTML files. The [HtmlRspackPlugin](/plugins/rspack/html-rspack-plugin) implemented in Rust by Rspack can provide better performance.
+
 ## Rspack Profile
 
 <ApiMeta addedVersion={'0.3.0'} />

website/docs/zh/guide/optimization/profile.mdx

@@ -2,6 +2,44 @@ import { ApiMeta, Stability } from '@components/ApiMeta.tsx';
 
 # 性能分析
 
+本章节介绍 Rspack 中一些常见的性能瓶颈和性能分析方法。
+
+## 性能瓶颈
+
+尽管 Rspack 本身提供的构建性能已经足够优秀，但在 Rspack 中使用一些 JavaScript 编写的 loaders 和 plugins 时，它们可能会导致整体的构建性能劣化，尤其是在大型项目中。
+
+对于这类问题，有一部分可以通过 Rspack 内置的高性能替代方案来解决，另一部分可以通过性能分析工具来定位，从而采取针对性的优化。
+
+下面是一些常见的案例：
+
+### babel-loader
+
+[babel-loader](https://github.com/babel/babel-loader) 基于 Babel 来编译 JavaScript 和 TypeScript 代码，可以将 Babel 替换为更快的 SWC。Rspack 内置了 [builtin:swc-loader](/guide/features/builtin-swc-loader)，它是 `swc-loader` 的 Rust 版本，旨在提供更优的性能。
+
+如果你需要使用 Babel 插件实现自定义的转换逻辑，可以在配置 babel-loader 时使用 [Rule.include](/config/module#ruleinclude) 来匹配尽可能少的文件，以减少 Babel 编译的开销。
+
+### postcss-loader
+
+[postcss-loader](https://github.com/postcss/postcss-loader) 基于 PostCSS 来编译 CSS 代码，通常会配合 PostCSS 插件进行 CSS 语法降级、添加浏览器前缀等，可以将 PostCSS 替换为更快的 Lightning CSS，使用 Rspack 内置的 [builtin:lightningcss-loader](/guide/features/builtin-lightningcss-loader) 即可。
+
+如果项目里使用了 Tailwind CSS v3 的 PostCSS 插件，则需要等待 Tailwind CSS v4 版本发布，该版本基于 Rust 和 Lightning CSS 实现，性能会有显著提升，详见 [Open-sourcing our progress on Tailwind CSS v4.0](https://tailwindcss.com/blog/tailwindcss-v4-alpha)。
+
+### terser-webpack-plugin
+
+[terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 基于 Terser 来压缩 JavaScript 代码，可以将 Terser 替换为更快的 SWC minimizer，使用 Rspack 内置的 [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin) 即可。
+
+### css-minimizer-webpack-plugin
+
+[css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) 基于 cssnano 等压缩工具来压缩 CSS 代码，可以将 cssnano 替换为更快的 Lightning CSS minimizer，使用 Rspack 内置的 [LightningCssMinimizerRspackPlugin](/plugins/rspack/lightning-css-minimizer-rspack-plugin) 即可。
+
+### less-loader
+
+[less-loader](https://github.com/webpack-contrib/less-loader) 基于 Less 来编译 `.less` 文件，由于 Less 目前没有官方实现的高性能替代方案，建议使用 [sass-loader](https://github.com/webpack-contrib/sass-loader) 和 [sass-embedded](https://www.npmjs.com/package/sass-embedded) 代替，sass-embedded 是 Sass 原生 Dart 可执行文件的 JavaScript wrapper，具备出色的性能。
+
+### html-webpack-plugin
+
+[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 在生成大量 HTML 文件时，性能表现不佳，Rspack 基于 Rust 实现的 [HtmlRspackPlugin](/plugins/rspack/html-rspack-plugin) 可以提供更好的性能。
+
 ## Rspack Profile
 
 <ApiMeta addedVersion={'0.3.0'} />