@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

package/docs/zh/guides/concept/entries.mdx

@@ -30,15 +30,44 @@ Modern.js 初始化的应用是单入口的，应用结构如下：
 └── tsconfig.json
 ```
 
-在 Modern.js 应用中，你可以很方便的将单入口切换成多入口。在应用目录下执行 `pnpm run new`，根据提示即可创建入口：
+在 Modern.js 应用中，你可以很方便的将单入口切换成多入口。手动创建多入口需要以下步骤：
+
+import NewEntryTooltip from '@site-docs/components/new-entry-tooltip.mdx';
+
+<NewEntryTooltip />
+
+1. **将原入口代码移动到以 `package.json` 中 `name` 命名的目录下**
+
+   假设 `package.json` 中的 `name` 为 `myapp`，需要将 `src/routes/` 目录移动到 `src/myapp/routes/`：
 
 ```bash
-? 请选择你想要的操作 创建工程元素
-? 请选择创建元素类型 新建「应用入口」
-? 请填写入口名称 new-entry
+# 创建新目录
+mkdir -p src/myapp
+# 移动原入口代码
+mv src/routes src/myapp/routes
 ```
 
-执行后，Modern.js 会自动生成一个新的入口目录，此时可以看到 `src/` 目录变成如下结构：
+2. **创建新的入口目录**
+
+   创建新的入口目录，例如 `new-entry`：
+
+```bash
+# 创建新入口目录
+mkdir -p src/new-entry/routes
+```
+
+3. **在新入口目录下创建必要的文件**
+
+   在新入口的 `routes/` 目录下创建基础文件：
+
+```bash
+# 创建基础文件（可根据需要调整内容）
+touch src/new-entry/routes/index.css
+touch src/new-entry/routes/layout.tsx
+touch src/new-entry/routes/page.tsx
+```
+
+完成上述步骤后，`src/` 目录结构如下：
 
 ```bash
 .
@@ -54,8 +83,6 @@ Modern.js 初始化的应用是单入口的，应用结构如下：
         └── page.tsx
 ```
 
-原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
-
 Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。比如，`package.json` 中的 `name` 为 `myapp` 时，`src/myapp` 会作为应用的主入口。
 
 你可以执行 `pnpm run dev` 启动开发服务，此时可以看到新增了一条名为 `/new-entry` 的路由，并且原有页面的路由并未发生变化。
@@ -66,54 +93,62 @@ Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为
 
 ## 入口类型
 
-不同的入口类型具有不同的编译和运行时行为。
+Modern.js 支持三种入口类型，每种类型都有不同的使用场景和特点。选择合适的入口类型可以帮助你更好地组织代码。
 
-import EntryMode from '@site-docs/components/entry-mode.mdx';
+### 如何识别入口
 
-<EntryMode />
+Modern.js 会自动扫描目录，识别符合条件的入口。一个目录被认定为入口需要满足以下**三个条件之一**：
 
-默认情况下，Modern.js 启动应用前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
+1. **具有 `routes/` 目录** → 约定式路由入口
+2. **具有 `App.[jt]sx?` 文件** → 自控式路由入口
+3. **具有 `entry.[jt]sx?` 文件** → 自定义入口
 
-:::tip
-你可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改识别入口的目录。
-:::
-
-入口所在目录必须满足以下三个条件之一：
+import EntryScanLogic from '@site-docs/components/entry-scan-logic.mdx';
 
-1. 具有 `routes/` 目录。
-2. 具有 `App.[jt]sx?` 文件。
-3. 具有 `entry.[jt]sx?` 文件（需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry) 使用）。
+<EntryScanLogic />
 
+:::tip 自定义扫描目录
+你可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改识别入口的目录。
 
-当 `src/` 目录满足入口特征时，Modern.js 会认为当前应用为单入口应用。否则，Modern.js 会扫描 `src/` 下的一级目录，并进一步判断是否为入口，此时应用通常为多入口应用。
-
-:::tip
-在单入口应用中，默认的入口名为 `main`。
 :::
 
-### 框架模式入口
+import EntryMode from '@site-docs/components/entry-mode.mdx';
+
+<EntryMode />
 
-框架模式指的是需要使用 Modern.js 的框架能力，例如约定式路由、SSR、一体化调用等。这类入口约定下，应用中的入口并不是真正的编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/[entryName]/index.js` 找到真正的入口。
+接下来我们详细介绍每种入口类型的使用方法。
 
-#### 约定式路由
+### 约定式路由
 
 如果入口中存在 `routes/` 目录，我们称该入口为约定式路由。Modern.js 会在启动时扫描 `routes/` 下的文件，基于文件约定，自动生成客户端路由（react-router）。例如：
 
 ```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       └── page.tsx
+src/
+└── routes/
+    ├── layout.tsx    # 布局组件（可选）
+    ├── page.tsx      # 首页组件（/ 路由）
+    ├── about/
+    │   └── page.tsx  # 关于页面（/about 路由）
+    └── blog/
+        ├── page.tsx  # 博客列表页（/blog 路由）
+        └── [id]/
+            └── page.tsx  # 博客详情页（/blog/:id 路由）
 ```
 
-上述目录中，`layout.tsx` 中导出的组件会作为最外层的组件，`page.tsx` 中导出的组件会作为 `/` 路由的组件。
+组件对应关系
+
+| 文件                        | 路由        | 说明               |
+| --------------------------- | ----------- | ------------------ |
+| `routes/layout.tsx`         | 全局布局    | 所有页面的外层容器 |
+| `routes/page.tsx`           | `/`         | 首页               |
+| `routes/about/page.tsx`     | `/about`    | 关于页面           |
+| `routes/blog/[id]/page.tsx` | `/blog/:id` | 动态路由页面       |
 
-详细内容可以参考[路由方案](/guides/basic-features/routes#约定式路由)。
+详细内容可以参考[路由方案](/guides/basic-features/routes/routes#约定式路由)。
 
-#### 自控式路由
+### 自控式路由
 
-如果入口中存在 `App.[jt]sx?` 文件，我们称为该入口为自控式路由。例如：
+如果入口中存在 `App.[jt]sx?` 文件，该入口就是自控式路由。这种方式给开发者完全的路由控制权。
 
 ```bash
 .
@@ -121,8 +156,7 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 │   └── App.tsx
 ```
 
-
-以 `src/App.tsx` 为约定的入口，Modern.js 不会对路由做额外的操作，开发者可以使用 [React Router 6](https://reactrouter.com/en/main) 的 API 设置客户端路由，或不设置客户端路由。例如以下代码，在应用中自行设置了客户端路由：
+以 `src/App.tsx` 为约定的入口，Modern.js 不会对路由做额外的操作，开发者可以使用 [React Router v7](https://reactrouter.com/en/main) 的 API 设置客户端路由，或不设置客户端路由。例如以下代码，在应用中自行设置了客户端路由：
 
 ```tsx title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
@@ -143,24 +177,26 @@ export default () => {
 我们推荐开发者使用约定式路由，Modern.js 默认对约定式路由做了一系列资源加载及渲染上的优化，并且提供了开箱即用的 SSR 能力。而在使用自控路由时，这些能力都需要开发者自行封装。
 :::
 
-#### 自定义入口
-
-:::info
-使用该功能需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
-:::
+### 自定义入口
 
 默认情况下，使用约定式路由或自控式路由时，Modern.js 会自动完成渲染。如果你希望自定义这个行为，可以通过自定义入口文件的方式来实现。
 
+:::tip
+自定义入口可以和约定式路由及自控式路由入口共存，自定义项目初始化的逻辑。
+
+:::
+
 如果入口中存在 `entry.[jt]sx` 文件，则 Modern.js 不再控制应用的渲染流程，你可以在 `entry.[jt]sx` 文件中调用 `createRoot` 和 `render` 函数，完成应用入口逻辑。
 
-```tsx
+```tsx title="src/entry.tsx"
 import { createRoot } from '@modern-js/runtime/react';
 import { render } from '@modern-js/runtime/browser';
 
+// 创建根组件
 const ModernRoot = createRoot();
 
+// 渲染到 DOM
 render(<ModernRoot />);
-
 ```
 
 上述代码中，`createRoot` 函数返回的组件为 `routes/` 目录生成或 `App.tsx` 导出的组件，`render` 函数用于处理渲染与挂载组件。例如，你希望在渲染前执行某些异步任务，可以这样实现：
@@ -172,7 +208,7 @@ import { render } from '@modern-js/runtime/browser';
 const ModernRoot = createRoot();
 
 async function beforeRender() {
-   // some async request
+  // some async request
 }
 
 beforeRender().then(() => {
@@ -180,28 +216,27 @@ beforeRender().then(() => {
 });
 ```
 
-### 构建模式入口
-
-:::info
-使用该功能需要开启需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
-:::
-
-构建模式指的是不使用 Modern.js 提供的 Runtime 能力，只使用 Modern.js 构建能力的开发模式。当应用中未安装 `@modern-js/runtime` 依赖时，Modern.js 会认为当前应用所有的入口都是构建模式入口。
-
-此时，如果入口中存在 `entry.[jt]sx`，则该文件会被识别为 webpack 或 Rspack 的构建入口。此时，Modern.js 不会自动生成入口代码，你需要自行将组件挂载到 DOM 节点上，例如:
+如果你不想使用 Modern.js 任何运行时能力，也可以自行将组件挂载到 DOM 节点上，例如:
 
 ```js title=src/entry.tsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}
 ```
 
-在构建模式入口中，**将无法使用 Modern.js 框架的运行时能力**，比如：
+在该模式下，**将无法使用 Modern.js 框架的运行时能力**，比如：
+
 - 约定式路由，即基于 `src/routes` 下文件的路由
 - 服务端渲染（SSR）
-- `modern.config.js` 文件中的 `runtime` 配置将不会再生效
+- 国际化能力（i18n）
+- 模块联邦能力（Module Federation）
 
 ## 在配置文件中指定入口
 
@@ -236,9 +271,6 @@ export default defineConfig({
 });
 ```
 
-值得注意的是，默认情况下，Modern.js 认为通过配置指定的入口是**框架模式入口**，将自动生成真正的编译入口。如果你的应用是从 Webpack 或 Vite 等构建工具迁移到 Modern.js 框架时，你通常需要在入口配置中开启 `disableMount` 选项，此时 Modern.js 认为该入口是**构建模式入口**。
-
-
 ## 深入了解
 
 页面入口的概念衍生自 webpack 的入口（Entrypoint）概念，其主要用于配置 JavaScript 或其他模块在应用启动时加载和执行。webpack 对于网页应用的 [最佳实践](https://webpack.docschina.org/concepts/entry-points/#multi-page-application) 通常将入口与 HTML 产物对应，即每增加一个入口最终就会在产物中生成一份对应的 HTML 文件。入口引入的模块会在编译打包后生成多个 Chunk 产物，例如对于 JavaScript 模块最终可能会生成数个类似 `dist/static/js/index.ea39u8.js` 的文件产物。
@@ -251,7 +283,7 @@ export default defineConfig({
 
 它们的对应关系如下：
 
-- 每个 webpack 网站项目可以包含多个入口
+- 每个网站项目可以包含多个入口
 - 每个入口包含若干个模块（源码文件）
 - 每个入口通常对应一个 HTML 文件产物和若干其它产物。
 - 每个 HTML 文件可以包含多个客户端路由方案（比如在页面中同时使用 `react-router` 和 `@tanstack/react-router`）。
@@ -274,7 +306,7 @@ export default defineConfig({
 
 而 Modern.js 在编译时仍会为每个入口生成包含 HTML 文件的完整的客户端产物，用于在服务端渲染失败时降级为客户端渲染使用。
 
-另一个特殊情况是使用静态站点生成（SSG）的项目，即使是使用约定式路由搭建的单入口 SSG 应用，Modern.js 也会在 webpack 的流程外为每个 `page.tsx` 文件生成一份单独的 HTML 文件。
+另一个特殊情况是使用静态站点生成（SSG）的项目，即使是使用约定式路由搭建的单入口 SSG 应用，Modern.js 也会在 Rspack 的流程外为每个 `page.tsx` 文件生成一份单独的 HTML 文件。
 
 需要注意的是即使开启服务端渲染，React 通常仍需要执行水合阶段并在前端执行 `react-router` 的路由。
 
@@ -289,32 +321,3 @@ export default defineConfig({
 狭义的多页应用可能不包含客户端路由、仅通过 `<a>` 之类的标签元素进行 HTML 静态页面之间的跳转，但实践中上多页应用也经常需要为其入口配置客户端路由以满足不同需求。
 
 相反地，通过 `react-router` 定义多个路由的单入口应用因为只生成一个 HTML 文件产物，所以被称为单页应用（Single Page Application）。
-
-## 弃用功能
-
-目前，如果入口所在的目录满足以下条件，也会成为应用入口。
-
-1. 具有 `index.[jt]sx?` 文件。
-2. 具有 `pages/` 目录。
-
-
-`pages/` 目录为 Modern.js 旧版本中的约定式路由，新版本中推荐使用 `routes/` 目录。
-
-`index.[jt]sx?` 在旧版本中支持应用自定义 Bootstrap 逻辑和构建模式入口，新版本中推荐使用 `entry.[jt]sx?` 代替。
-
-### 自定义 Bootstrap
-
-当入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 `bootstrap` 函数作为入参传入，并用导出的函数替代默认的 `bootstrap`，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
-
-```tsx
-export default (App: React.ComponentType, bootstrap: () => void) => {
-  // do something before bootstrap...
-  initSomething().then(() => {
-    bootstrap();
-  });
-};
-```
-
-### 构建模式入口
-
-当入口目录中存在 `index.[jt]sx`(即将废弃) 并且没有通过 `export default` 导出函数时，该入口也将被认为是构建模式入口。

package/docs/zh/guides/get-started/glossary.mdx

@@ -16,30 +16,12 @@ import Bundler from '@site-docs/components/bundler.mdx';
 
 <Bundler />
 
-## Builder
-
-import Builder from '@site-docs/components/builder.mdx';
-
-<Builder />
-
 ## CSR
 
 CSR 是 "Client-Side Rendering"（客户端渲染）的缩写。它表示页面是在浏览器中通过 JavaScript 渲染的，数据获取、模板和路由等逻辑都在浏览器端完成，而不是在服务器上。
 
 在 CSR 中，服务器会向浏览器端发送一个空的 HTML 外壳和一些 JavaScript 脚本，然后由浏览器端从服务器的 API 中拉取数据，并将动态内容渲染到页面中。
 
-## Garfish
-
-[Garfish](https://garfishjs.org/) 是一套微前端解决方案，主要用于解决 web 应用的跨团队协作、技术体系多样化等问题。
-
-它从架构层面出发，将多个独立交付的前端应用组成整体，这些前端应用能够独立开发、独立测试、独立部署，但是在用户视角仍然是内聚的单个产品。
-
-## Micro-frontend
-
-import MicroFrontend from '@site-docs/components/micro-frontend.mdx';
-
-<MicroFrontend />
-
 ## Module Federation
 
 import ModuleFederation from '@site-docs/components/module-federation.mdx';

package/docs/zh/guides/get-started/introduction.mdx

@@ -13,7 +13,7 @@ Modern.js 能为开发者提供极致的**开发体验（Development Experience
 
 它主要包含以下特性：
 
-- 🚀 **Rust 构建**：提供双构建工具支持，轻松切换到 Rspack 构建工具，编译飞快。
+- 🚀 **Rust 构建**：Modern.js 使用 Rsbuild/Rspack 作为构建工具，编译飞快。
 - 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
 - 🏠 **一体化**：开发与生产环境 Web Server 逻辑一致，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
 - 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
@@ -43,7 +43,3 @@ Umi 是中文社区中非常流行的 React 框架，也是蚂蚁集团的底层
 ### Remix
 
 请参考 [Modern.js vs Remix](https://github.com/web-infra-dev/modern.js/discussions/4872)。
-
-## 下一步
-
-如果你希望了解如何使用 Modern.js 框架，可以尝试 [创建第一个应用](/tutorials/first-app/c01-start)，或是阅读 [快速上手](/guides/get-started/quick-start)。

package/docs/zh/guides/get-started/quick-start.mdx

@@ -11,24 +11,7 @@ import Prerequisites from '@site-docs/components/prerequisites';
 
 <Prerequisites />
 
-## 安装
-
-Modern.js 提供了 `@modern-js/create` 工具来创建项目，不需要全局安装，直接使用 `npx` 按需运行即可。
-
-你可以在已有的空目录来创建项目：
-
-```bash
-mkdir myapp && cd myapp
-npx @modern-js/create@latest
-```
-
-也可以直接用新目录创建项目：
-
-```bash
-npx @modern-js/create@latest myapp
-```
-
-## 初始化项目
+## 创建项目
 
 import InitApp from '@site-docs/components/init-app';
 
@@ -50,17 +33,10 @@ import DebugApp from '@site-docs/components/debug-app';
 import { appTools, defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  runtime: {
-    router: true,
-  },
   server: {
     ssr: true,
   },
-  plugins: [
-    appTools({
-      bundler: 'rspack', // Set to 'webpack' to enable webpack
-    }),
-  ],
+  plugins: [appTools()],
 });
 ```
 
@@ -71,7 +47,6 @@ export default defineConfig({
 在新创建的工程中，默认会安装 `@modern-js/app-tools` npm 包，它是 Modern.js 框架的核心包，主要提供以下能力：
 
 - 提供 `modern dev`, `modern build` 等常用的 CLI 命令。
-- 集成 Modern.js Core，提供配置解析、插件加载等能力。
 - 集成 Rsbuild，提供构建能力。
 - 集成 Modern.js Server，提供开发和生产服务器相关能力。
 
@@ -87,51 +62,9 @@ export default defineConfig({
 
 ## 构建项目
 
-在项目中执行 `pnpm run build` 即可构建项目生产环境产物：
-
-```bash
-$ pnpm run build
-
-> modern build
-
-  Modern.js Framework
-
-info    Starting production build...
-info    Type checker is enabled. It may take some time.
-ready   Client compiled in 6.19 s
-info    Production file sizes:
-
-  File                                       Size        Gzipped
-  dist/routes-manifest.json                  0.74 kB     0.28 kB
-  dist/static/css/async/page.d7915515.css    1.4 kB      0.69 kB
-  dist/static/js/main.5ae469e7.js            3.0 kB      1.3 kB
-  dist/html/main/index.html                  6.0 kB      2.6 kB
-  dist/static/js/async/page.ddc8a4c1.js      19.2 kB     6.7 kB
-  dist/static/js/34.171fffdb.js              21.3 kB     7.1 kB
-  dist/static/js/lib-router.8995a55e.js      55.3 kB     18.1 kB
-  dist/static/js/lib-lodash.53ec3384.js      71.4 kB     24.8 kB
-  dist/static/js/lib-react.b5856db9.js       140.0 kB    45.2 kB
-  dist/static/js/lib-polyfill.86c452b3.js    213.3 kB    69.9 kB
-
-  Total size:  531.8 kB
-  Gzipped size:  176.7 kB
-```
-
-构建产物默认生成到 `dist/`，目录结构如下：
-
-```
-dist
-├── html
-│   └── main
-├── modern.config.json
-├── route.json
-├── routes-manifest.json
-└── static
-    ├── css
-    └── js
-```
+import BuildOutput from '@site-docs/components/build-output';
 
-> 如果你需要自定义构建产物的目录，请参考 [构建产物目录](/guides/basic-features/output-files)。
+<BuildOutput />
 
 ## 本地验证
 
@@ -148,7 +81,7 @@ info    Starting production server...
   > Network:  http://192.168.0.1:8080/
 ```
 
-在浏览器中打开 `http://localhost:8000/`，内容应该和 `pnpm run dev` 时一致。
+在浏览器中打开 `http://localhost:8080/`，内容应该和 `pnpm run dev` 时一致。
 
 ## 部署
 

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -10,25 +10,15 @@ Modern.js 框架默认集成了一些社区中流行的库和开发工具。
 
 ## UI 库
 
-Modern.js 使用 [React 18](https://react.dev/) 来构建用户界面，同时也兼容 React 17。
+Modern.js 使用 [React 19](https://react.dev/) 来构建用户界面，同时也兼容 React 18。
 
 Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考 [Rsbuild - Vue](https://rsbuild.rs/zh/guide/framework/vue)。
 
 ## 路由
 
-Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，同时也兼容 React Router 5。
+Modern.js 的路由基于 [React Router 7](https://reactrouter.com/en/main)。
 
-Modern.js 支持约定式路由、自控式路由或其他路由方案，请参考 [路由方案](/guides/basic-features/routes) 进行选择。
-
-## 微前端
-
-Modern.js 提供对 [Garfish](https://www.garfishjs.org/) 微前端框架开箱即用的支持。
-
-同时，我们也正在与 [Module Federation](https://webpack.js.org/concepts/module-federation/) 的作者 Zack Jackson 合作，以提供更完整的解决方案。
-
-## 状态管理
-
-Modern.js 可以与社区中任意的状态管理库搭配使用，比如 [Redux](https://redux.js.org/)、[Jotai](https://jotai.org/)、[Zustand](https://docs.pmnd.rs/zustand)、[Valtio](https://valtio.pmnd.rs/) 等。
+Modern.js 支持约定式路由、自控式路由或其他路由方案，请参考 [页面入口](/guides/concept/entries) 进行选择。
 
 ## 包管理器
 
@@ -38,23 +28,17 @@ Modern.js 可以与社区中任意的包管理器搭配使用，比如 [npm](htt
 
 ## 打包工具
 
-Modern.js 使用 [Webpack 5](https://webpack.js.org/) 或 [Rspack](https://rspack.rs/) 来打包你的 Web 应用。
-
-默认使用的打包工具为 Webpack 5，你可以参考 [使用 Rspack](/guides/advanced-features/rspack-start) 来切换到更快的 Rspack。
+Modern.js 使用 [Rspack](https://rspack.rs/) 来打包你的 Web 应用。
 
 ## 转译工具
 
-Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbuild](https://esbuild.github.io/) 作为 JS 转译工具，将 TypeScript 或 JSX 转义为可以在浏览器上运行的 JavaScript 代码，并进行语法降级。
+Modern.js 使用 [SWC](https://swc.rs/) 作为 JS 转译工具，将 TypeScript 或 JSX 转义为可以在浏览器上运行的 JavaScript 代码，并进行语法降级。
 
-- 使用 Webpack 打包时，默认为 Babel，支持切换到 SWC 或 esbuild。
-- 使用 Rspack 打包时，默认为 SWC，支持切换到 Babel。
+在启用 Rspack 构建时，`babel-loader` 默认不会被启用。如需添加 [Babel](https://babeljs.io/) 插件，可通过 `tools.babel` 配置，此时会产生额外的编译开销，在一定程度上拖慢 Rspack 构建速度。
 
 ## 压缩工具
 
-在生产环境构建时，Modern.js 使用 [Terser](https://github.com/terser/terser)、[SWC](https://swc.rs/) 或 [esbuild](https://esbuild.github.io/) 来压缩 JavaScript 代码，使用 [cssnano](https://cssnano.co/) 来压缩 CSS 代码。
-
-- 使用 Webpack 打包时，默认使用 Terser 压缩 JS 代码，支持切换到 SWC 或 esbuild。
-- 使用 Rspack 打包时，默认使用 SWC 压缩 JS 代码，暂不支持切换到其他工具。
+在生产环境构建时，Modern.js 使用 [SWC](https://swc.rs/) 压缩 JS 代码。
 
 ## CSS 转换
 
@@ -62,7 +46,7 @@ Modern.js 使用 [PostCSS](https://postcss.org/) 来转换 CSS 代码，并默
 
 Modern.js 支持 [启用 Lightning CSS](/configure/app/tools/lightningcss-loader)，使用 Lightning CSS 降级 CSS 语法。
 
-Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)，并同时兼容 Tailwind CSS v2 和 v3 版本。
+Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)，并同时兼容 Tailwind CSS v3 和 v4 版本。
 
 ## CSS 预处理器
 
@@ -87,8 +71,6 @@ Modern.js 支持使用 [styled-components](https://styled-components.com/)，请
 
 Modern.js 可以与社区中任意的 React 组件库搭配使用，比如 [MUI](https://mui.com/)、[Ant Design](https://ant.design/)、[Arco Design](https://github.com/arco-design/arco-design)、[Semi Design](https://semi.design/)、[Radix UI](https://www.radix-ui.com/) 等。
 
-同时，Modern.js 内置了对 Ant Design 和 Arco Design 的 [按需引入](/configure/app/source/transform-import) 支持。
-
 ## 组件开发
 
 Modern.js 支持使用 [Storybook](https://storybook.js.org/) 来开发 UI 组件。该功能为可选功能，请参考 [使用 Storybook](/guides/basic-features/debug/using-storybook) 启用。

package/docs/zh/guides/get-started/upgrade.mdx

@@ -2,46 +2,54 @@
 sidebar_position: 3
 ---
 
+import { PackageManagerTabs } from '@theme';
+import ReleaseNote from '@site-docs/components/release-note';
+
 # 版本升级
 
-## 通过命令行升级
+import Upgrade from '@site-docs/components/auto-upgrade';
 
-Modern.js 提供了 `upgrade` 命令支持项目升级到最新的 Modern.js 版本。
+<Upgrade />
 
-在项目中执行 `upgrade` 命令：
+## 手动升级
 
-import { PackageManagerTabs } from '@theme';
+Modern.js 所有的官方包使用**统一版本号**进行发布，因此升级时需要将所有 `@modern-js/**` 包的版本统一更新到目标版本。
 
-<PackageManagerTabs command="run upgrade" />
+### 升级步骤
 
-```bash
-> modern upgrade
+1. **查看最新版本**
 
-[INFO] [项目类型]: Web 应用
-[INFO] [Modern.js 最新版本]: x.y.z
-[INFO] 已更新 Modern.js 依赖至最新版本!
-```
+   你可以通过以下方式查看 Modern.js 的最新版本：
 
-可以看到项目 `package.json` 中的依赖已经更改到最新。
+   - 访问 [npm](https://www.npmjs.com/package/@modern-js/app-tools) 查看 `@modern-js/app-tools` 的最新版本
+   - 查看 [GitHub Releases](https://github.com/web-infra-dev/modern.js/releases)
 
-:::tip
-如果项目的 package.json 中没有声明 upgrade 命令，你可以执行 `npx modern upgrade`，效果是等价的。
-:::
+   <ReleaseNote />
 
-import UpgradeFaq from '@site-docs/components/upgrade-faq';
+2. **更新 package.json**
 
-<UpgradeFaq />
+   在项目的 `package.json` 中，将所有 `@modern-js/**` 包的版本更新到目标版本。例如：
 
-## 指定版本升级
+   ```json title="package.json"
+   {
+     "dependencies": {
+       "@modern-js/app-tools": "3.0.0",
+       "@modern-js/runtime": "3.0.0"
+     },
+     "devDependencies": {
+       "@modern-js/types": "3.0.0"
+     }
+   }
+   ```
 
-Modern.js 所有的官方包目前都使用**统一版本号**进行发布。
+3. **重新安装依赖**
 
-import ReleaseNote from '@site-docs/components/release-note';
+   更新完 `package.json` 后，重新安装依赖：
 
-<ReleaseNote />
+   <PackageManagerTabs command="install" />
 
 :::tip
-当升级时，需要对 Modern.js 官方提供的所有包做统一升级，而不是升级单个依赖。
+当升级时，需要对 Modern.js 官方提供的所有包做统一升级，而不是升级单个依赖。确保所有 `@modern-js/**` 包的版本号保持一致。
 :::
 
 ## 版本管理策略
@@ -58,7 +66,6 @@ import ReleaseNote from '@site-docs/components/release-note';
 
 这样可以确保依赖的版本是完全确定的，从而保证构建的一致性和可预测性。
 
-
 ## 锁定子依赖
 
 当项目某个子依赖出现问题，而 Modern.js 无法立即更新时，可以使用包管理器锁定子依赖版本。

package/docs/zh/guides/topic-detail/_meta.json

@@ -4,17 +4,5 @@
     "name": "module-federation",
     "label": "module-federation",
     "collapsed": true
-  },
-  {
-    "type": "dir",
-    "name": "micro-frontend",
-    "label": "micro-frontend",
-    "collapsed": true
-  },
-  {
-    "type": "dir",
-    "name": "model",
-    "label": "reduck",
-    "collapsed": true
   }
 ]

package/docs/zh/guides/topic-detail/module-federation/_meta.json

@@ -1 +1 @@
-["introduce", "usage", "application", "ssr", "deploy"]
+["introduce", "usage", "application", "ssr", "deploy", "i18n"]