@modern-js/main-doc 2.5.0 → 2.7.0

package/scripts/summary.zh.json

@@ -1 +1 @@
-[{"name":"assetPrefix","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"tags","dirname":"html"},{"name":"tagsByEntries","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"checkSyntax","dirname":"security"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"rspack","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
+[{"name":"assetPrefix","dirname":"dev"},{"name":"beforeStartUrl","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"host","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"tags","dirname":"html"},{"name":"tagsByEntries","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"checkSyntax","dirname":"security"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"rspack","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]

package/zh/apis/app/commands.mdx

@@ -0,0 +1,299 @@
+---
+sidebar_position: 1
+---
+
+# 命令
+
+Modern.js 内置了一些命令，可以帮助你快速启动开发服务器、构建生产环境代码等。
+
+通过本章节，你可以了解到 Modern.js 内置的命令有哪些，以及如何使用这些命令。
+
+## modern dev
+
+`modern dev` 命令用于启动一个本地开发服务器，对源代码进行开发环境编译。
+
+```bash
+Usage: modern dev [options]
+
+Options:
+  -e --entry <entry>    指定入口，只编译特定的页面
+  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
+  -h, --help            显示命令帮助
+  --analyze             分析构建产物体积，查看各个模块打包后的大小
+  --api-only            仅启动 API 接口服务
+```
+
+运行 `modern dev` 后，Modern.js 会监听源文件变化并进行模块热更新。
+
+```bash
+$ modern dev
+
+info    Starting dev server...
+info    App running at:
+
+  > Local:    http://localhost:8080/
+  > Network:  http://192.168.0.1:8080/
+```
+
+### 编译部分页面
+
+在多页面（MPA）项目中，可以添加 `--entry` 参数来指定编译其中的一个或多个页面。这样可以只编译项目中的部分代码，从而提升 dev 启动速度。
+
+比如执行 `modern dev --entry`，在命令行界面中会展示入口选择框：
+
+```bash
+$ modern dev --entry
+
+? 请选择需要构建的入口
+❯ ◯ foo
+  ◯ bar
+  ◯ baz
+```
+
+比如选择 `foo` 入口，那么只有 `foo` 入口相关的代码会进行编译，其他页面的代码将不会参与构建。
+
+### 通过参数指定页面
+
+你也可以在 `--entry` 后面通过参数来指定页面名称，多个页面的名称使用逗号分隔。
+
+```bash
+# 编译 foo 页面
+modern dev --entry foo
+
+# 编译 foo 和 bar 页面
+modern dev --entry foo,bar
+```
+
+## modern start
+
+`modern start` 是 `modern dev` 命令的别名，两者的功能和用法完全一致。
+
+## modern build
+
+`modern build` 命令默认会在 `dist/` 目录下构建出可用于生产环境的产物。你可以通过修改配置 [`output.distPath`](/configure/app/output/dist-path) 指定产物的输出目录。
+
+```bash
+Usage: modern build [options]
+
+Options:
+  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
+  -h, --help  显示命令帮助
+  --analyze   分析构建产物体积，查看各个模块打包后的大小
+```
+
+### 分析构建产物体积
+
+执行 `npx modern build --analyze` 命令，可以在打包生产环境代码的同时，产出一个分析构建产物体积的 HTML 文件：
+
+```
+Bundle Analyzer saved report to /example/dist/report.html
+File sizes after production build:
+
+  122.35 KB  dist/static/js/885.1d4fbe5a.js
+  2.3 KB     dist/static/js/main.4b8e8d64.js
+  761 B      dist/static/js/runtime-main.edb7cf35.js
+  645 B      dist/static/css/main.0dd3ecc1.css
+```
+
+手动在浏览器中打开上述 HTML 文件，可以看到打包产物的瓦片图，并进行包体积分析和优化：
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
+
+> 该功能基于 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 实现。
+
+## modern new
+
+`modern new` 命令用于在已有项目中添加项目元素。
+
+比如添加应用入口、启用启用一些可选功能如 Tailwind CSS、微前端开发模式等。
+
+```bash
+Usage: modern new [options]
+
+Options:
+  -d, --debug            开启 Debug 模式，打印调试日志信息 (default: false)
+  -c, --config <config>  生成器运行默认配置(JSON 字符串)
+  --dist-tag <tag>       生成器使用特殊的 npm Tag 版本
+  --registry             生成器运行过程中定制 npm Registry
+  -h, --help             显示命令帮助
+```
+
+### 添加入口
+
+在应用工程中，执行 `new` 命令添加入口如下：
+
+```bash
+$ npx modern new
+? 请选择你想要的操作 创建工程元素
+? 创建工程元素 新建「应用入口」
+? 请填写入口名称 entry
+```
+
+### 启用可选功能
+
+在应用工程中，执行 `new` 命令启用可选能力如下：
+
+```bash
+$ npx modern new
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 (Use arrow keys)
+❯ 启用 Tailwind CSS 支持
+  启用「BFF」功能
+  启用「微前端」模式
+  启用「单元测试 / 集成测试」功能
+  启用「Visual Testing (Storybook)」模式
+```
+
+:::tip
+`--config` 参数对应参数值需要使用 JSON 字符串。
+
+pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开启相关功能。【[相关 Issue](https://github.com/pnpm/pnpm/issues/3876)】
+
+:::
+
+## modern serve
+
+`modern serve` 命令用于在生产环境下启用应用工程, 注意需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
+
+```bash
+Usage: modern serve [options]
+
+Options:
+  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
+  -h, --help            显示命令帮助
+  --api-only            仅启动 API 接口服务
+```
+
+默认情况下，应用将会在 `localhost:8080` 启动，可以通过 `server.port` 修改 Server 端口号：
+
+```js
+export default defineConfig({
+  server: {
+    port: 8081,
+  },
+});
+```
+
+## modern upgrade
+
+在项目根目录下执行命令 `npx modern upgrade`，会默认将当前执行命令项目的 `package.json` 中的 Modern.js 相关依赖更新至最新版本。
+
+```
+Usage: modern upgrade [options]
+
+Options:
+  --registry <registry>  定制 npm registry (default: "")
+  -d,--debug             开启 Debug 模式，打印调试日志信息 (default: false)
+  --cwd <cwd>            项目路径 (default: "")
+  -h, --help             display help for command
+```
+
+## modern inspect
+
+`modern inspect` 命令用于查看项目的 [Modern.js Builder 配置](https://modernjs.dev/builder/guide/basic/builder-config.html) 以及 webpack 配置。
+
+```
+Usage: modern inspect [options]
+
+Options:
+  --env <env>           查看指定环境下的配置 (default: "development")
+  --output <output>     指定在 dist 目录下输出的路径 (default: "/")
+  --verbose             在结果中展示函数的完整内容
+  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
+  -h, --help            显示命令帮助
+```
+
+在项目根目录下执行命令 `npx modern inspect` 后，会在项目的 `dist` 目录生成以下文件：
+
+- `builder.config.js`: 表示在构建时使用的 Modern.js Builder 配置。
+- `webpack.config.web.js`: 表示在构建时使用的 webpack 配置。
+
+```bash
+➜ npx modern inspect
+
+Inspect config succeed, open following files to view the content:
+
+  - Builder Config: /root/my-project/dist/builder.config.js
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
+```
+
+### 指定环境
+
+默认情况下，inspect 命令会输出开发环境的配置，你可以添加 `--env production` 选项来输出生产环境的配置：
+
+```bash
+modern inspect --env production
+```
+
+### 完整内容
+
+默认情况下，inspect 命令会省略配置对象中的函数内容，你可以添加 `--verbose` 选项来输出函数的完整内容：
+
+```bash
+modern inspect --verbose
+```
+
+### SSR 构建配置
+
+如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.js` 文件，对应 SSR 构建时的 webpack 配置。
+
+```bash
+➜ npx modern inspect
+
+Inspect config succeed, open following files to view the content:
+
+  - Builder Config: /root/my-project/dist/builder.config.js
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
+  - Webpack Config (node): /root/my-project/dist/webpack.config.node.js
+```
+
+## modern lint
+
+运行 `ESLint` 进行代码语法检查。
+
+```bash
+Usage: modern lint [options] [...files]
+
+lint and fix source files
+
+Options:
+  --no-fix    disable auto fix source file
+  -h, --help  display help for command
+```
+
+通常情况下，我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
+
+- 设置 `--no-fix` 参数后可以关闭自动修复 lint 错误代码的能力。
+
+## modern test
+
+`modern test` 命令会自动运行项目下的测试用例。
+
+```bash
+Usage: modern test [options]
+
+Options:
+  -h, --help  显示命令帮助
+```
+
+:::tip
+在使用 `modern test` 命令前，需要先通过 [`new`](/apis/app/commands#modern-new) 命令启用「单元测试 / 集成测试」功能。
+:::
+
+效果如下：
+
+```bash
+$ npx modern test
+ PASS  src/tests/index.test.ts
+  The add method
+    ✓ should work fine. (2ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       1 passed, 1 total
+Snapshots:   0 total
+Time:        0.994 s, estimated 1 s
+```
+
+:::info
+`src` 和 `api` 目录下面的 `*.test.(js|ts)` 文件都会被识别为测试用例。
+:::

package/zh/apis/app/hooks/_category_.json

@@ -1,5 +1,5 @@
 {
   "label": "文件约定",
-  "position": 1,
+  "position": 2,
   "collapsed": false
 }

package/zh/apis/app/hooks/config/upload.mdx

@@ -26,13 +26,23 @@ sidebar_position: 4
 
 ## 更多用法
 
-不论是在[自定义 HTML](/guides/basic-features/html) 中，或是在 [`config/public/`](/apis/app/hooks/config/public) 下的任意 HTML 文件中，都可以直接使用 HTML 标签引用 `config/upload/` 目录下的资源：
+在 React 组件中，可以通过[内置环境变量](/guides/basic-features/env-vars.html#asset_prefix)来添加该前缀：
+
+```tsx
+export default () => {
+  return (
+    <img src={`${process.env.ASSET_PREFIX}/upload/banner.png`}></img>
+  );
+};
+```
+
+另外，不论是在[自定义 HTML](/guides/basic-features/html) 中，或是在 [`config/public/`](/apis/app/hooks/config/public) 下的任意 HTML 文件中，都可以直接使用 HTML 标签引用 `config/upload/` 目录下的资源：
 
 ```html
 <script src="/upload/index.js"></script>
 ```
 
-如果设置了 [`output.assetPrefix`](/configure/app/output/asset-prefix) 前缀，也可以直接使用模板语法添加该前缀：
+如果设置了 [`dev.assetPrefix`](/configure/app/dev/asset-prefix) 或 [`output.assetPrefix`](/configure/app/output/asset-prefix) 前缀，也可以直接使用模板语法添加该前缀：
 
 ```html
 <script src="<%=assetPrefix %>/upload/index.js"></script>

package/zh/apis/app/hooks/src/routes.mdx

@@ -44,9 +44,9 @@ sidebar_position: 2
 ```
 └── routes
     ├── [id]
-    │   └── page.tsx
+    │   └── page.tsx
     ├── blog
-    │   └── page.tsx
+    │   └── page.tsx
     └── page.tsx
 ```
 

package/zh/components/init-app.mdx

@@ -31,11 +31,11 @@ Modern.js 生成器除了在项目初始化时工作外，也能在后续研发
 .
 ├── node_modules
 ├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   ├── modern-app-env.d.ts
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 ├── modern.config.ts
 ├── package.json
 ├── pnpm-lock.yaml

package/zh/configure/app/bff/prefix.mdx

@@ -8,7 +8,7 @@ sidebar_label: prefix
 - **默认值：** `/api`
 
 :::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands/new)】 启用 BFF 功能。
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
 
 :::
 

package/zh/configure/app/bff/proxy.mdx

@@ -8,7 +8,7 @@ sidebar_label: proxy
 - **默认值：** `{}`
 
 :::info 补充信息
-请先在当前应用项目根目录使用【[new](/apis/app/commands/new)】 启用 BFF 功能。
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
 
 :::
 

package/zh/configure/app/dev/before-start-url.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: beforeStartUrl
+---
+
+# dev.beforeStartUrl
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [dev.beforeStartUrl](https://modernjs.dev/builder/api/config-dev.html#devbeforestarturl)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/dev/beforeStartUrl.md'
+
+<Main />

package/zh/configure/app/dev/host.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: host
+---
+
+# dev.host
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [dev.host](https://modernjs.dev/builder/api/config-dev.html#devhost)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/dev/host.md'
+
+<Main />

package/zh/configure/app/output/ssg.mdx

@@ -66,7 +66,7 @@ import SelfRouteExample from "@site-docs/components/self-route-example";
 ```bash
 。
 ├── src
-│   ├── entryA
+│   ├── entryA
 │   │   └── routes
 │   │       ├── layout.tsx
 │   │       ├── page.tsx
@@ -75,8 +75,8 @@ import SelfRouteExample from "@site-docs/components/self-route-example";
 │   │           ├── page.tsx
 │   │           └── profile
 │   │               └── page.tsx
-│   └── entryB
-│       └── App.tsx
+│   └── entryB
+│       └── App.tsx
 ```
 
 默认情况下，所有约定式路由的入口，在设置 `output.ssg` 配置为 `true` 后都会在构建阶段渲染。可以配置 `false` 来取消指定入口的的默认行为，例如取消上述 entryA 入口在构建时的渲染：

package/zh/configure/app/server/ssr.mdx

@@ -4,11 +4,13 @@ sidebar_label: ssr
 
 # server.ssr
 
-- **类型：** `boolean`
+- **类型：** `boolean` | `Object`
 - **默认值：** `false`
 
 SSR 开关以及相关设置。
 
+### Boolean 类型
+
 当值类型为 `boolean` 时，表示是否开启 SSR 部署模式，默认 `false` 不开启。
 
 ```ts title="modern.config.ts"
@@ -18,3 +20,19 @@ export default defineConfig({
   },
 });
 ```
+
+### Object 类型
+
+当值类型为 `Object` 时，可以配置如下属性：
+
+- `mode`：`string = 'string'`，默认为使用 `renderToString` 渲染。配置为 'stream' 开启流式渲染。
+- `forceCSR`：`boolean = false`，默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 即可强制 CSR。
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  server: {
+    forceCSR: true,
+    mode: 'stream',
+  },
+});
+```

package/zh/configure/app/source/entries-dir.mdx

@@ -25,7 +25,7 @@ export default defineConfig({
 └── src
     └── pages
         ├── a
-        │   └── App.jsx
+        │   └── App.jsx
         └── b
             └── App.jsx
 ```

package/zh/guides/advanced-features/rspack-start.mdx

@@ -0,0 +1,69 @@
+---
+title: 使用 Rspack
+sidebar_position: 12
+---
+
+# 使用 Rspack
+
+[Rspack](https://www.rspack.org/) 是字节跳动 Web Infra 团队自研的 Rust Bundler，核心架构对齐 webpack 实现，并对社区常用的构建能力做了开箱即用的支持。
+
+Rspack 通过以下方式来提升编译性能：
+
+- 高度 LTO 优化的 Native code。
+- 充分利用多核优势，整个编译过程充分进行多线程优化。
+- 基于请求的按需编译（Lazy Compilation），减小每次编译的模块数目，以提升冷启动的速度。
+
+## 初始化 rspack 项目
+
+Modern.js 生成器会提供一个可交互的问答界面，只需将构建工具选择为**rspack**，即可创建一个 rspack 项目:
+
+```bash
+$ npx @modern-js/create myapp
+? 请选择你想创建的工程类型 应用
+? 请选择开发语言 TS
+? 请选择包管理工具 pnpm
+? 请选择构建工具 rspack
+```
+
+项目创建完成后，在项目中执行 `pnpm run dev` 即可体验项目。更多项目信息可参考[快速上手](/guides/get-started/quick-start.html)。
+
+:::tip
+使用 rspack 作为打包工具时，以下功能暂不支持使用:
+
+- 服务端渲染（SSR）
+- 静态站点生成（SSG）
+- 微前端（Micro Frontend）
+- Storybook 调试
+
+:::
+
+## 从 webpack 迁移至 rspack
+
+通过执行 `pnpm run new` 可启用 rspack 构建：
+
+```bash
+$ pnpm run new
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「rspack 构建」
+```
+
+执行命令后，在 modern.config.ts 中开启 rspack 构建：
+
+```ts title=modern.config.ts
+import appTools, { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig<'rspack'>({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'experimental-rspack',
+    }),
+  ],
+});
+```
+
+:::tip
+从 webpack 迁移至 rspack，会有一些构建和配置能力上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
+:::

package/zh/guides/advanced-features/ssg.mdx

@@ -37,14 +37,14 @@ SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
 ```
 .
 ├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
+│   └── routes
+│       ├── layout.tsx
+│       ├── page.tsx
+│       └── user
+│           ├── layout.tsx
+│           ├── page.tsx
+│           └── profile
+│               └── page.tsx
 ```
 
 上述文件目录将会生成以下三条路由：