refactor: add plugin menu in top menulist (#6199)

packages/document/main-doc/docs/en/_meta.json

@@ -4,21 +4,26 @@
     "link": "/guides/get-started/introduction",
     "activeMatch": "/guides/"
   },
-  {
-    "text": "tutorials",
-    "link": "/tutorials/foundations/introduction",
-    "activeMatch": "/tutorials/"
-  },
   {
     "text": "configure",
     "link": "/configure/app/usage",
     "activeMatch": "/configure/"
   },
+  {
+    "text": "plugin-menu",
+    "link": "/plugin/introduction",
+    "activeMatch": "/plugin/"
+  },
   {
     "text": "apis",
     "link": "/apis/app/commands",
     "activeMatch": "/apis/"
   },
+  {
+    "text": "tutorials",
+    "link": "/tutorials/foundations/introduction",
+    "activeMatch": "/tutorials/"
+  },
   {
     "text": "community",
     "link": "/community/showcase",

packages/document/main-doc/docs/en/community/blog/v2-release-note.mdx

@@ -132,7 +132,7 @@ Modern.js 可以划分为三个核心部分：**CLI 工具、服务端和运行
 
 在字节跳动内部，我们借助这些插件 API，结合公司内的基建和平台，封装出内部的企业级框架。如果你需要对 Modern.js 框架进行深度定制，也可以借助这些插件 API 来完成。
 
-> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/guides/topic-detail/framework-plugin/introduction.html)文档。
+> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/plugin/plugin-system/introduction.html)文档。
 
 ### 嵌套路由
 

packages/document/main-doc/docs/en/configure/app/plugins.mdx

@@ -9,7 +9,7 @@ sidebar_position: 9
 
 Used to configure custom Modern.js framework plugins.
 
-Refer to [How to Develop Plugins](/guides/topic-detail/framework-plugin/implement) for how to write custom plugins.
+Refer to [How to Develop Plugins](/plugin/plugin-system/implement) for how to write custom plugins.
 
 ## Note
 
@@ -33,7 +33,7 @@ Currently, Modern.js has opened up the ability to customize CLI plugins, and Ser
 
 By default, custom plugins are executed in the order of the `plugins` array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.
 
-When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Relationship between plugins](/guides/topic-detail/framework-plugin/relationship) for more information.
+When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Relationship between plugins](/plugin/plugin-system/relationship) for more information.
 
 ## Example
 

packages/document/main-doc/docs/en/configure/app/tools/esbuild.mdx

@@ -41,4 +41,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [Esbuild Plugin Configuration](/guides/rsbuild-plugins/plugin-esbuild.html#config).
+For config details, please refer to [Esbuild Plugin Configuration](/plugin/rsbuild-plugins/plugin-esbuild.html#config).

packages/document/main-doc/docs/en/configure/app/tools/swc.mdx

@@ -77,4 +77,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [SWC Plugin Configuration](/guides/rsbuild-plugins/plugin-swc.html#config).
+For config details, please refer to [SWC Plugin Configuration](/plugin/cli-plugins/plugin-swc.html#config).

packages/document/main-doc/docs/en/guides/_meta.json

@@ -24,11 +24,6 @@
     "name": "topic-detail",
     "label": "topic"
   },
-  {
-    "type": "dir",
-    "name": "rsbuild-plugins",
-    "label": "Rsbuild Plugins"
-  },
   {
     "type": "dir",
     "name": "troubleshooting",

packages/document/main-doc/docs/en/guides/advanced-features/build-performance.mdx

@@ -16,6 +16,10 @@ The strategies in [Bundle Size Optimization](/guides/advanced-features/page-perf
 
 The following are some general optimization strategies, which can speed up the development build and production build, and some of them also optimize the bundle size.
 
+### Using Rspack (recommended)
+
+If you are not using Rspack yet, you can switch to Rspack build mode to improve the build speed by 5~10 times, see [Using Rspack](/guides/advanced-features/rspack-start.html) for more information.
+
 ### Upgrade Node.js version
 
 In general, updating Node.js to the latest [LTS release](https://github.com/nodejs/release#release-schedule) will help improve build performance.
@@ -40,25 +44,6 @@ nvm default 18
 node -v
 ```
 
-### Using Rspack build
-
-If you have higher build performance requirements, you can easily switch to Rspack build mode, see [Using Rspack](/guides/advanced-features/rspack-start.html) for more information.
-
-### Using SWC or esbuild
-
-[SWC](https://SWC.rs/) (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on `Rust`. SWC can provide the same abilities with Babel, and it's more than 10x faster than Babel.
-
-[esbuild](https://esbuild.github.io/) is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code, compared to webpack's built-in terser minimizer, esbuild has dozens of times better performance.
-
-Modern.js provides SWC plugin and esbuild plugin that allow you to use SWC or esbuild instead of babel-loader, ts-loader and terser for transformation and minification process. See:
-
-- [SWC plugin document](/configure/app/tools/swc.html)
-- [esbuild plugin document](/configure/app/tools/esbuild.html)
-
-:::tip SWC vs esbuild
-The SWC compiled outputs has better compatibility, supports polyfills such as core-js, and has more complete features, so it is recommended to use the SWC plugin first.
-:::
-
 ### Avoid using ts-loader
 
 By default, Modern.js uses Babel to compile TS files. After enabling the [tools.tsLoader](/en/configure/app/tools/ts-loader.html) option, `ts-loader` will be used to compile TS files.

packages/document/main-doc/docs/en/guides/topic-detail/_meta.json

@@ -5,12 +5,6 @@
     "label": "micro-frontend",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "framework-plugin",
-    "label": "framework-plugin",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "model",

packages/document/main-doc/docs/en/plugin/_meta.json

@@ -0,0 +1,19 @@
+[
+  "introduction",
+  {
+    "type": "dir",
+    "name": "plugin-system",
+    "label": "plugin-system",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "cli-plugins",
+    "label": "cli-plugins"
+  },
+  {
+    "type": "dir",
+    "name": "rsbuild-plugins",
+    "label": "rsbuild-plugins"
+  }
+]

packages/document/main-doc/docs/en/plugin/cli-plugins.mdx

@@ -0,0 +1,6 @@
+# Overview
+
+- [@modern-js/plugin-tailwindcss](/plugin/cli-plugins/plugin-tailwind): Enables the use of Tailwind CSS styles.
+- [@modern-js/plugin-bff](/plugin/cli-plugins/plugin-bff): Provides BFF services and unified invocation capabilities.
+- [@modern-js/plugin-ssg](/plugin/cli-plugins/plugin-ssg): Provides static site generation capabilities.
+- [@modern-js/plugin-swc](/plugin/cli-plugins/plugin-swc): Provides SWC compilation support.

packages/document/main-doc/docs/en/plugin/cli-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-tailwind", "plugin-bff", "plugin-ssg", "plugin-swc"]

packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-bff.mdx

@@ -0,0 +1,5 @@
+# BFF Plugin
+
+In a Modern.js application, developers can define API files under the `api/lambda` directory and export API functions using the BFF plugin. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests.
+
+For more details, refer to [BFF - Basic Usage](/guides/advanced-features/bff/function).

packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-ssg.mdx

@@ -0,0 +1,5 @@
+# SSG Plugin
+
+SSG (Static Site Generation) is a technical solution that renders complete static web pages at build time based on data and templates. This means that in a production environment, pages are populated with content by default and can be cached by a CDN. For pages that do not require dynamic data, SSG can provide better performance and higher security.
+
+For more details, refer to [Static Site Generation (SSG)](/guides/basic-features/render/ssg).

packages/document/main-doc/docs/en/guides/rsbuild-plugins/plugin-swc.mdx → packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-swc.mdx

@@ -4,6 +4,13 @@ sidebar_position: 2
 
 # SWC Plugin
 
+:::warning
+**The SWC feature in the current document is no longer maintained**, we recommend using the Rspack + SWC solution.
+
+Please refer to [「Use Rspack」](guides/advanced-features/rspack-start) for more information.
+
+:::
+
 import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
 
 <SWC />

packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-tailwind.mdx

@@ -0,0 +1,5 @@
+# Tailwind CSS Plugin
+
+Tailwind CSS is a utility-first CSS framework and design system that allows you to quickly add commonly used styles to components while supporting flexible theme style extensions.
+
+For more details, refer to [Using Tailwind CSS](/guides/basic-features/css/tailwindcss).

packages/document/main-doc/docs/en/guides/advanced-features/rsbuild-plugin.mdx → packages/document/main-doc/docs/en/plugin/introduction.mdx

@@ -1,11 +1,26 @@
----
-sidebar_position: 21
-title: Using Rsbuild Plugin
----
+# Plugin
 
-# Using Rsbuild Plugin
+In Modern.js, you can directly use two types of plugins: Modern.js framework plugins and Rsbuild plugins.
 
-## Introduce Rsbuild Plugin
+## Modern.js Framework Plugin
+
+Modern.js has its own framework plugin system. You can use Modern.js plugins by configuring the [`plugins`](/configure/app/plugins) field in `modern.config.ts`.
+
+### Plugin Types
+
+Framework plugins can be categorized into three types:
+
+1. [CLI Plugins](/plugin/cli-plugins): These are used to provide additional functionality when the Modern.js commands are executed in the application. Examples include adding commands, modifying configuration, and monitoring files. Most build-related capabilities can be achieved through CLI plugins.
+2. Server Plugins: These add extra functionality when the application receives requests. Examples include adding middleware and modifying request responses.
+3. Runtime Plugins: These provide additional functionality when the application runs React code. Examples include performing initialization actions and wrapping React higher-order components.
+
+:::note
+Server plugins and Runtime plugins are coming soon.
+:::
+
+### Developing Plugins
+
+If you need to develop Modern.js framework plugins, you can read [Modern.js Plugin System](/plugin/plugin-system/introduction) for more information.
 
 Rsbuild is the build tool of Modern.js. You can modify the default build behavior and add various additional features by adding the Rsbuild plugin, including but not limited to:
 
@@ -22,9 +37,15 @@ Modern.js has upgraded the build tool to [Rsbuild](https://rsbuild.dev/) startin
 If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
-## Official Plugins
+:::info
+For more information about the Rsbuild plugin system, you can read [Rsbuild Official Site - Plugins](https://rsbuild.dev/plugins/list/index).
+:::
+
+## Rsbuild Plugin
 
-### Builtin Plugins
+### Official Plugins
+
+#### Builtin Plugins
 
 Here are the official Rsbuild plugins built into Modern.js:
 
@@ -44,10 +65,14 @@ Here are the official Rsbuild plugins built into Modern.js:
 | [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/static-assets/json-files.html#toml-file)                                                                         |
 | [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/static-assets/json-files.html#yaml-file)                                                                         |
 
-### Un-builtin Plugins
+#### Un-builtin Plugins
 
 Here are the official Rsbuild plugins that are not built into Modern.js:
 
 - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image resources used in the project.
 - [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
 - [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build outputs in UMD format.
+
+import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
+
+<OtherPlugins />

packages/document/main-doc/docs/en/guides/topic-detail/framework-plugin/extend.mdx → packages/document/main-doc/docs/en/plugin/plugin-system/extend.mdx

@@ -4,7 +4,7 @@ sidebar_position: 5
 
 # Extending Plugin Hooks
 
-This section describes how to extend plugin Hooks by dynamically registering [Hook models](/guides/topic-detail/framework-plugin/hook).
+This section describes how to extend plugin Hooks by dynamically registering [Hook models](/plugin/plugin-system/hook).
 
 ## Example
 

packages/document/main-doc/docs/en/guides/topic-detail/framework-plugin/implement.mdx → packages/document/main-doc/docs/en/plugin/plugin-system/implement.mdx

@@ -28,7 +28,7 @@ const myPlugin = {
 };
 ```
 
-In addition, plugins allow configuration of the execution order with other plugins. For more information, please refer to [Plugin Relationship](/guides/topic-detail/framework-plugin/relationship).
+In addition, plugins allow configuration of the execution order with other plugins. For more information, please refer to [Plugin Relationship](/plugin/plugin-system/relationship).
 
 ### Plugin Types
 
@@ -108,7 +108,7 @@ import type { MyPluginHook } from 'xxx';
 const myPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
 ```
 
-Please refer to [Extending Hooks](/guides/topic-detail/framework-plugin/extend) for detailed explanations.
+Please refer to [Extending Hooks](/plugin/plugin-system/extend) for detailed explanations.
 
 ### Plugin Configuration
 
@@ -151,7 +151,7 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
-For more detail [Plugin API](/guides/topic-detail/framework-plugin/plugin-api).
+For more detail [Plugin API](/plugin/plugin-system/plugin-api).
 
 ### Async setup
 

packages/document/main-doc/docs/en/guides/topic-detail/framework-plugin/plugin-api.mdx → packages/document/main-doc/docs/en/plugin/plugin-system/plugin-api.mdx

@@ -44,7 +44,7 @@ interface UserConfig {
 Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 :::tip
-This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config).
+This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/plugin/plugin-system/hook-list.html#config).
 :::
 
 ### useResolvedConfigContext
@@ -67,7 +67,7 @@ interface NormalizedConfig {
 Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 :::tip
-This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config).
+This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/plugin/plugin-system/hook-list.html#config).
 :::
 
 ### useAppContext

packages/document/main-doc/docs/en/plugin/rsbuild-plugins.mdx

@@ -0,0 +1,3 @@
+# Overview
+
+- [@modern-js/plugin-esbuild](/plugin/rsbuild-plugins/plugin-esbuild): Provides esbuild compilation support.

packages/document/main-doc/docs/en/plugin/rsbuild-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-esbuild"]

packages/document/main-doc/docs/zh/_meta.json

@@ -4,21 +4,26 @@
     "link": "/guides/get-started/introduction",
     "activeMatch": "/guides/"
   },
-  {
-    "text": "tutorials",
-    "link": "/tutorials/foundations/introduction",
-    "activeMatch": "/tutorials/"
-  },
   {
     "text": "configure",
     "link": "/configure/app/usage",
     "activeMatch": "/configure/"
   },
+  {
+    "text": "plugin-menu",
+    "link": "/plugin/introduction",
+    "activeMatch": "/plugin/"
+  },
   {
     "text": "apis",
     "link": "/apis/app/commands",
     "activeMatch": "/apis/"
   },
+  {
+    "text": "tutorials",
+    "link": "/tutorials/foundations/introduction",
+    "activeMatch": "/tutorials/"
+  },
   {
     "text": "community",
     "link": "/community/showcase",

packages/document/main-doc/docs/zh/community/blog/v2-release-note.mdx

@@ -132,7 +132,7 @@ Modern.js 可以划分为三个核心部分：**CLI 工具、服务端和运行
 
 在字节跳动内部，我们借助这些插件 API，结合公司内的基建和平台，封装出内部的企业级框架。如果你需要对 Modern.js 框架进行深度定制，也可以借助这些插件 API 来完成。
 
-> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/guides/topic-detail/framework-plugin/introduction.html)文档。
+> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/plugin/plugin-system/introduction.html)文档。
 
 ### 嵌套路由
 

packages/document/main-doc/docs/zh/configure/app/plugins.mdx

@@ -9,7 +9,7 @@ sidebar_position: 9
 
 用于配置自定义的 Modern.js 框架插件。
 
-自定义插件的编写方式请参考 [如何编写插件](/guides/topic-detail/framework-plugin/implement)。
+自定义插件的编写方式请参考 [如何编写插件](/plugin/plugin-system/implement)。
 
 ## 注意事项
 
@@ -33,7 +33,7 @@ Modern.js 中内置了三种不同的框架插件：
 
 默认情况下，自定义插件会按照 `plugins` 数组的顺序依次执行，Modern.js 内置插件的执行时机早于自定义插件。
 
-当插件内部使用了控制顺序的相关字段，比如 `pre`、`post` 时，会基于声明的字段对执行顺序进行调整，详见 [插件之间的关系](/guides/topic-detail/framework-plugin/relationship)。
+当插件内部使用了控制顺序的相关字段，比如 `pre`、`post` 时，会基于声明的字段对执行顺序进行调整，详见 [插件之间的关系](/plugin/plugin-system/relationship)。
 
 ## 示例
 

packages/document/main-doc/docs/zh/configure/app/tools/esbuild.mdx

@@ -41,4 +41,4 @@ export default defineConfig({
 });
 ```
 
-完整配置项请参考 [esbuild 插件配置](/guides/rsbuild-plugins/plugin-esbuild.html#配置)。
+完整配置项请参考 [esbuild 插件配置](/plugin/rsbuild-plugins/plugin-esbuild#配置)。

packages/document/main-doc/docs/zh/configure/app/tools/swc.mdx

@@ -77,4 +77,4 @@ export default defineConfig({
 });
 ```
 
-完整配置项请参考 [SWC 插件配置](/guides/rsbuild-plugins/plugin-swc.html#配置)。
+完整配置项请参考 [SWC 插件配置](/plugin/cli-plugins/plugin-swc.html#配置)。