docs: improve migration guides (#4055)

Author: chenjiahan

website/docs/en/guide/basic/configure-rspack.mdx

@@ -6,6 +6,12 @@ Rsbuild supports directly modifying the Rspack configuration object, and also su
 The built-in Rspack config in Rsbuild may change with iterations, and these changes won't be reflected in semver. Therefore, your custom config may become invalid when you upgrade Rsbuild.
 :::
 
+## View Rspack Config
+
+Rsbuild provides the [rsbuild inspect](/guide/basic/cli#rsbuild-inspect) command to view the final Rspack config generated by Rsbuild.
+
+You can also view it through [debug mode](/guide/debug/debug-mode).
+
 ## Modify Config Object
 
 You can use the [tools.rspack](/config/tools/rspack) option of Rsbuild to modify the Rspack config object.

website/docs/en/guide/migration/vite.mdx

@@ -1,6 +1,6 @@
 # Vite
 
-Vite is an excellent and powerful build tool. In some cases, you might need to migrate a Vite application to Rsbuild. You can refer to this guide to perform the migration.
+This chapter introduces how to migrate a Vite project to Rsbuild.
 
 ## Installing Dependencies
 
@@ -95,6 +95,7 @@ Most common Vite plugins can be easily migrated to Rsbuild plugins, such as:
 | [vite-plugin-static-copy](https://www.npmjs.com/package/vite-plugin-static-copy)           | [output.copy](/config/output/copy)                                                              |
 | [vite-plugin-node-polyfills](https://www.npmjs.com/package/vite-plugin-node-polyfills)     | [@rsbuild/plugin-node-polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) |
 | [vite-plugin-solid](https://www.npmjs.com/package/vite-plugin-solid)                       | [@rsbuild/plugin-solid](/plugins/list/plugin-solid)                                             |
+| [@preact/preset-vite](https://www.npmjs.com/package/@preact/preset-vite)                   | [@rsbuild/plugin-preact](/plugins/list/plugin-preact)                                           |
 
 You can refer to [Plugin List](/plugins/list/index) to learn more about available plugins.
 

website/docs/en/guide/migration/webpack.mdx

@@ -43,6 +43,8 @@ export default defineConfig({
 });
 ```
 
+> See [Configure Rsbuild](/guide/basic/configure-rsbuild) for more.
+
 ## Configuration Migration
 
 In a webpack project, there might be some complex `webpack.config.js` configuration files.
@@ -65,6 +67,8 @@ export default {
 
 - Use encapsulated configs in Rsbuild, for example, options for css-loader can be set through [tools.cssLoader](/config/tools/css-loader).
 
+> See [Configure Rspack](/guide/basic/configure-rspack) for more.
+
 ### Build Entry
 
 webpack uses the `entry` field to set the build entry. In Rsbuild, you can use [source.entry](/config/source/entry) to set it.

website/docs/en/guide/start/index.mdx

@@ -22,8 +22,8 @@ You can think of Rsbuild as a modernized version of Create React App or Vue CLI,
 
 Rsbuild shares many similarities with Vite, as they are both aim to improve the frontend development experience. The main differences are:
 
+- **Production consistency**: Rsbuild uses Rspack for bundling during both the development and production builds, thus ensuring a high level of consistency between the development and production outputs. Vite, on the other hand, uses ESM for module loading during development, which improves the startup speed, but may lead to inconsistencies between the development and production outputs.
 - **Ecosystem compatibility**: Rsbuild is compatible with most webpack plugins and all Rspack plugins, while Vite is compatible with Rollup plugins. If you're currently using more plugins and loaders from the webpack ecosystem, migrating to Rsbuild would be relatively easy.
-- **Production consistency**: Rsbuild uses Rspack for bundling during both the development and production builds, thus ensuring a high level of consistency between the development and production outputs. This is also one of the goals Vite aims to achieve with Rolldown.
 - **Module Federation**: The Rsbuild team works closely with the [Module Federation](/guide/advanced/module-federation) development team, providing first-class support for Module Federation to help you develop large web applications with micro frontend architecture.
 
 ## 🚀 Performance
@@ -32,7 +32,7 @@ Rsbuild can fully leverage the build performance of Rspack. Here is the time tak
 
 import { BenchmarkGraph } from '@components/Benchmark';
 
-<BenchmarkGraph short />
+<BenchmarkGraph />
 
 > The above data comes from the [performance-compare](https://github.com/rspack-contrib/performance-compare) benchmark.
 

website/docs/zh/guide/basic/configure-rspack.mdx

@@ -6,6 +6,12 @@ Rsbuild 支持直接修改 Rspack 配置对象，也支持通过 `rspack-chain`
 Rsbuild 内置的 Rspack 配置会随着迭代而发生变化，这些变化不会反映在 semver 中，因此在升级 Rsbuild 时，你的自定义配置可能会失效。
 :::
 
+## 查看 Rspack 配置
+
+Rsbuild 提供了 [rsbuild inspect](/guide/basic/cli#rsbuild-inspect) 命令来查看 Rsbuild 最终生成的 Rspack 配置。
+
+你也可以通过 [调试模式](/guide/debug/debug-mode) 来查看。
+
 ## 修改配置对象
 
 你可以使用 Rsbuild 的 [tools.rspack](/config/tools/rspack) 选项来修改 Rspack 配置对象。

website/docs/zh/guide/migration/vite.mdx

@@ -1,6 +1,6 @@
 # Vite
 
-Vite 是一个优秀和强大的构建工具，在某些情况下，你可能需要将一个 Vite 应用迁移到 Rsbuild，那么你可以参考这篇指南进行操作。
+本章节介绍如何将 Vite 项目迁移到 Rsbuild。
 
 ## 安装依赖
 
@@ -95,6 +95,7 @@ Rsbuild 会在构建时自动注入 `<script>` 标签到生成的 HTML 文件中
 | [vite-plugin-static-copy](https://www.npmjs.com/package/vite-plugin-static-copy)           | [output.copy](/config/output/copy)                                                              |
 | [vite-plugin-node-polyfills](https://www.npmjs.com/package/vite-plugin-node-polyfills)     | [@rsbuild/plugin-node-polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) |
 | [vite-plugin-solid](https://www.npmjs.com/package/vite-plugin-solid)                       | [@rsbuild/plugin-solid](/plugins/list/plugin-solid)                                             |
+| [@preact/preset-vite](https://www.npmjs.com/package/@preact/preset-vite)                   | [@rsbuild/plugin-preact](/plugins/list/plugin-preact)                                           |
 
 你可以参考 [插件列表](/plugins/list/index) 来了解更多可用的插件。
 

website/docs/zh/guide/migration/webpack.mdx

@@ -43,6 +43,8 @@ export default defineConfig({
 });
 ```
 
+> 查看 [配置 Rsbuild](/guide/basic/configure-rsbuild) 了解更多。
+
 ## 配置迁移
 
 在一个 webpack 项目中，可能已经包含了一些复杂的 `webpack.config.js` 配置文件。
@@ -63,7 +65,9 @@ export default {
 };
 ```
 
-- 使用 Rsbuild 中封装的配置项，比如 css-loader 的选项可以通过 [tools.cssLoader](/config/tools/css-loader) 设置。
+- 使用 Rsbuild 封装的配置项，比如 css-loader 的选项可以通过 [tools.cssLoader](/config/tools/css-loader) 设置。
+
+> 参考 [配置 Rspack](/guide/basic/configure-rspack) 了解更多。
 
 ### 构建入口
 

website/docs/zh/guide/start/index.mdx

@@ -22,8 +22,8 @@ Rsbuild 是与 [Vite](https://vitejs.dev/)、[Create React App](https://github.c
 
 Rsbuild 与 Vite 有许多相似之处，它们皆致力于提升前端的开发体验。其主要区别在于：
 
-- **生态兼容性**：Rsbuild 兼容大部分的 webpack 插件和所有 Rspack 插件，而 Vite 则是兼容 Rollup 插件。如果你目前更多地使用了 webpack 生态的插件和 loaders，那么迁移到 Rsbuild 是相对容易的。
-- **生产一致性**：Rsbuild 在开发阶段和生产构建均使用 Rspack 进行打包，因此开发和生产构建的产物具备较强的一致性，这也是 Vite 通过 Rolldown 想要实现的目标之一。
+- **生产一致性**：Rsbuild 在开发阶段和生产构建均使用 Rspack 进行打包，因此开发和生产构建的产物具备强一致性。而 Vite 在开发阶段使用 ESM 加载模块，这虽然提升了启动速度，但开发和生产构建的产物容易出现不一致。
+- **生态兼容性**：Rsbuild 兼容大部分的 webpack 插件和所有 Rspack 插件，而 Vite 则是兼容 Rollup 插件。如果你目前更多地使用了 webpack 生态的插件和 loaders，那么迁移到 Rsbuild 会更容易。
 - **模块联邦**：Rsbuild 团队与 [Module Federation](/guide/advanced/module-federation) 的开发团队密切合作，并为 Module Federation 提供一流的支持，帮助你开发微前端架构的大型 Web 应用。
 
 ## 🚀 性能
@@ -32,7 +32,7 @@ Rsbuild 能够充分发挥 Rspack 的性能优势，以下是构建 1000 个 Rea
 
 import { BenchmarkGraph } from '@components/Benchmark';
 
-<BenchmarkGraph short />
+<BenchmarkGraph />
 
 > 以上数据来自 [performance-compare](https://github.com/rspack-contrib/performance-compare) benchmark。