@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.4

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/plugin/hook.md

@@ -1,170 +0,0 @@
----
-sidebar_position: 2
----
-
-# Hook 模型
-
-首先介绍一下 Modern.js 的基础的插件系统中的一些内容，包括 Hook 模型的工作方式、各个 Hook 模型的运行模式、Manager 的工作模式。
-
-每种 Hook 模型都是独立的，可以独立管理运行函数。
-
-## 基础工作方式
-
-先以 Pipeline 为例，简单介绍一下 Hook 模型的工作方式。先看一个简单的例子:
-
-```ts
-import { createPipeline } from '@modern-js/plugin'
-
-// 1. 创建
-const pipeline = createPipeline<number, number>()
-
-// 2. 添加函数
-pipeline.use((count, next) => {
-  return next(count + 1)
-})
-pipeline.use((count, next) => {
-  return count * 2
-})
-
-// 3. 执行
-pipeline.run(1) // 4
-pipeline.run(5) // 12
-```
-
-在这个例子中，创建了一个 `Pipeline<number, number>` 类型的 Pipeline（L3），这意味着运行它的时候，你需要传入一个 `number`，然后你会得到一个 `number`，而这个模型管理的函数的类型是:
-
-```ts
-(count: number, next: (nextCount: number) => number) => number
-```
-
-这里全是 `number`，是因为我们创建的是 `Pipeline<number, number>` ，如果创建的是 `Pipeline<number, string>` 则运行它入参是 `number`，返回值是 `string`，对应管理的函数的类型会是:
-
-```ts
-(count: number, next: (nextCount: number) => string) => string
-```
-
-
-创建好 Pipeline 之后，可以通过 `use` 添加函数（L5、L8），需要注意的是，添加的顺序就是他们默认的运行顺序，在这些函数中，你可以对 `count` 进行处理、返回一个值，如果你调用了 `next` 函数，则会运行后面的函数，即如果你添加了三个函数:  `A`、`B`、`C`，如果你在 `A` 中调用 `next` 那么就会运行 `B`，同样的，如果你在 `B` 中调用 `next` 那么就会运行 `C`，而在上面的例子中，添加的第一个函数（L5）就运行了 `next`，所以这里就会运行第二个函数（L8），并且运行的返回值就是 第二个函数的返回值，如果在第一个函数中没有调用 `next`，直接返回，例如:
-
-```ts
-import { createPipeline } from '@modern-js/plugin'
-
-// 1. 创建
-const pipeline = createPipeline<number, number>()
-
-// 2. 添加函数
-pipeline.use((count, next) => {
-  return count + 1
-})
-pipeline.use((count, next) => {
-  return count * 2
-})
-
-// 3. 执行
-pipeline.run(1) // 2
-pipeline.run(5) // 6
-```
-
-则在运行 Pipeline 的时候就不会运行第二个函数，那么 Pipeline 的运行结果则就是第一个函数的返回值。
-
-最后，运行 Pipeline 的方式也显而易见就是调用 `pipeline.run` 。
-
-## 不同 Hook 模型的区别
-
-上面这部分就是 Pipeline 整体的一个工作模式的描述，其他的 Hook 模型的工作模式基本也是这样，主要的区别点，是函数类型、执行顺序，参数。
-
-### Pipeline
-
-上面的例子就是以 Pipeline 为例描述的，这里就不赘述了，在 Pipeline 这个大类中，提供了两个小类: Sync 和 Async，顾名思义，它们的区别就是管理的函数的类型是 Sync 的还是 Async 的。
-
-:::info
-当 Pipeline 中没有函数或者所有函数都调用了 `next` 函数，则就需要在运行的时候提供:
-
-```ts
-pipeline({}, {
-    onLast: () => {
-        // do something
-    }
-})
-```
-:::
-
-### Waterfall
-
-这种模型顾名思义，他的特点就是参数的顺序递交，即前面一个函数的返回值，将会成为下一个函数的入参，我们也用一个例子来看一下:
-
-```ts
-import { createWaterfall } from '@modern-js/plugin'
-
-// 1. 创建
-const waterfall = createWaterfall<number>()
-
-// 2. 添加函数
-waterfall.use((count) => {
-  return count + 1
-})
-waterfall.use((count) => {
-  return count * 2
-})
-
-// 3. 执行
-waterfall.run(1) // 4
-waterfall.run(5) // 12
-```
-
-这个例子中，创建了一个类型为 `Waterfall<number> `，即这个模型执行的入参和返回值是一样的，这个例子中都是 `number`，而它管理的函数的类型是:
-
-```ts
-(count: number) => number
-```
-
-可能简单看这个例子感觉和上面的 Pipeline 功能一样，那需要注意的是，首先这里 Waterfall 管理的函数没有next 函数作为第二个参数，所以它无法在函数内部通过调用 next 来先运行之后添加的函数，从而修改运行的顺序，其次这里的运行的入参的类型和返回值的类型必须是一样的（而 Pipeline 可以不一样）。
-
-同样的，在 Waterfall 这个大类中，也提供了 Sync 和 Async 的小类，分别对应 Sync 和 Async 的函数。
-
-### Workflow
-
-这种 Hook 模型与上面两种 Hook 模型的区别是，没有那么强的前后参数返回值递交的概念，在这个模型中，每个函数都是基于同样的入参，相对独立运行的，通过一个例子简单看一下:
-
-```ts
-import { createWorkflow } from '@modern-js/plugin'
-
-// 1. 创建
-const workflow = createWorkflow <number, number>()
-
-// 2. 添加函数
-workflow.use((count) => {
-  return count + 1
-})
-workflow.use((count) => {
-  return count * 2
-})
-
-// 3. 执行
-workflow.run(1) // [2, 2]
-workflow.run(5) // [6, 10]
-```
-
-在这个例子中，添加了两个函数，所以运行的结果就是这两个函数运行的结果形成的一个数组。
-
-虽然这种模型中没有那么强的前后参数返回值递交的概念，但依旧有执行顺序的区别，在 Workflow 这个大类中，提供了三个小类: Sync、Async、Parallel。他们之间的区别就是函数的执行顺序，当然默认的都是按照添加顺序执行，而在 Sync、Async 则是强制按照添加顺序执行，而 Parallel 则是 Async 模式的一个变体，即它使用的是 `Promise.all` 来执行所有函数，而 Async 则会 `await` 前面的函数运行结束。
-
-## Hook 模型对比
-
-<div style={{ width: "100%", overflowX: "scroll" }}>
-<div style={{ width: "150%" }}>
-
-||函数类型|执行顺序|函数参数来源|执行返回值来源|倾向处理的任务类型|函数 TS 类型|
-|-----|-----|-----|-----|----|----|----|
-|Pipeline|Sync|默认执行第一个添加的函数，可以通过 next 调用之后添加的函数|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数|第一个函数的返回值|<ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>|`(input: I, next: Next<I, O>) => O`|
-|AsyncPipeline|Sync/Async|默认执行第一个添加的函数，可以通过 next 调用之后添加的函数|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数|第一个函数的返回值|<ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>|`(input: I, next: AsyncNext<I, O>) => O ｜ Promise<O>`|
-|WaterFall|Sync|一直顺序执行|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值|最后一个函数的返回值|<ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => I`|
-|AsyncWaterFall|Sync/Async|一直顺序执行|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值|最后一个函数的返回值|<ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => I ｜ Promise<I>`|
-|Workflow|Sync|一直顺序执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => O`|
-|AsyncWorkflow|Sync/Async|一直顺序执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => O ｜ Promise<O>`|
-|ParallelWorkFlow|Sync/Async|异步执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不关心执行顺序</li></ul>|`(I: I) => O ｜ Promise<O>`|
-
-</div>
-</div>
-
-Workflow、Waterfall 其实都是 Pipeline 的变体，Pipeline 可以通过特定的写法来实现 Workflow、Waterfall ，但都较为麻烦，有许多隐形的约定，为了方便使用，提供了这两种变体来满足这种特殊场景。

package/en/docusaurus-plugin-content-docs/current/configure/app/output/enable-modern-mode.md

@@ -1,34 +0,0 @@
----
-sidebar_label: enableModernMode
----
-
-# output.enableModernMode
-
-* Type: `boolean`
-* Default: `false`
-
-Modern.js default value to build JS products with Polyfill for older browsers. After opening this configuration, you can automatically build JS products that are not degraded for modern browser syntax in the production environment. The product filename format is `[name].[hash]-es6/js`.
-
-For example, configure the following configuration:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-  },
-});
-```
-
-After executing the `build` command, modern is packaged in addition to the normal Client packaging, and the `dist/static/js` directory will generate es6 related products.
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-build.jpeg)
-
-After executing the `start` command, use the latest version Chrome browser access, and observe that the requested JS resource in the Network is an es6 product.
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-network.jpeg)
-
-:::info
-For more information, see [Client side compatibility](/docs/guides/advanced-features/compatibility)。
-:::

package/zh/apis/app/runtime/default-alias.md

@@ -1,23 +0,0 @@
----
-sidebar_position: 1
-title: 默认别名
----
-
-Modern.js 推荐通过别名的方式引用源码，其中包含 3 种默认别名:
-- `@/`：等价于引用项目根目录 `src/*` 下的文件。
-- `@api/`：等价于引用项目根目录下 `api/*` 下的文件（需要先开启 BFF 功能）。
-- `@shared/`：等价于引用项目根目录下 `shared/*` 下的文件。
-
-:::tip 提示
-- 除了以下默认别名，开发者可以在 `modern.config.js` 中自定义别名，详见[如何配置别名](/docs/configure/app/source/alias)。
-:::
-
-## 示例
-下面的例子展示了如何通过默认别名引用函数。
-```tsx
-import { hello } from '@/common/utils';
-
-hello();
-
-```
-引用 `@/common/utils` 相当于引用 `src/common/utils`。

package/zh/apis/app/runtime/plugin/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "插件 API",
-  "position": 12
-}

package/zh/apis/app/runtime/plugin/abstract.md

@@ -1,26 +0,0 @@
----
-sidebar_position: 1
----
-
-# 概览
-
-Modern.js 的基础的插件系统中主要分为三个部分：Hook 模型（Pipeline、Workflow、Waterfall）、 Hook 模型的管理器（Manager），上下文共享机制。
-
-其中的 Hook 模型是用于管理运行一系列相同模型（形状）函数的管理工具，目前提供了三个大类，7个小类：
-
-- Pipeline
-  - Sync
-  - Async
-- Waterfall
-  - Sync
-  - Async
-- Workflow
-  - Sync
-  - Async
-  - Parallel(Async)
-
-它们之间的区别是他们所管理的函数的运行模式的不同。不同的地方会在下面具体分析介绍。
-
-Hook 模型的管理器（Manager），顾名思义就是用来管理上面提到的那些 Hook 模型，添加至同一个 Manager 可以使用同一个 Runner 对象（包含所有 Hook 的执行函数）来运行，也共享同一个上下文环境。而 Modern.js 的基础插件系统中的插件就是针对 Manager 来说的，是一个拥有属性、插件 Hook 函数的对象。
-
-基于上面的工具（Hook 模型 + Manager），在 Modern.js 中主要构建了三套插件模型：CLI、Runtime、Server。其中 CLI 是 Modern.js 中主要的运行流程控制模型，Modern.js 中的各种工程方案（应用工程方案、模块工程方案、Monorepo 工程方案）都是主要通过这一套模型运行的。而 Runtime 则主要负责的是 React 路由组件和元素的处理（Component 和 Element）和渲染（包括服务器端渲染和客户端渲染）。而 Server 则是针对 Server 运行时的这个阶段的生命周期运行和特殊信息收集。其中 Runtime 和 Server 的运行都是在 CLI 中触发的。

package/zh/apis/app/runtime/plugin/plugin-api.md

@@ -1,117 +0,0 @@
----
-sidebar_position: 5
----
-
-# Plugin API
-
-插件的 setup 函数会接收一个 api 入参，你可以调用 api 上提供的一些方法来获取到配置、应用上下文等信息。
-
-```ts
-import type { CliPlugin } from '@modern-js/core';
-
-export default (): CliPlugin => ({
-  name: 'my-plugin',
-
-  setup(api) {
-    // 获取应用原始配置
-    const config = api.useConfigContext();
-    // 获取应用运行上下文
-    const appContext = api.useAppContext();
-    // 获取解析之后的最终配置
-    const resolvedConfig = api.useResolvedConfigContext();
-  },
-});
-```
-
-## API
-
-### useConfigContext
-
-用于获取应用原始配置。
-
-```ts
-const useConfigContext: () => UserConfig
-
-interface UserConfig {
-  source?: SourceConfig;
-  output?: OutputConfig;
-  server?: ServerConfig;
-  dev?: DevConfig;
-  deploy?: DeployConfig;
-  tools?: ToolsConfig;
-  plugins?: PluginConfig;
-  runtime?: RuntimeConfig;
-  runtimeByEntries?: RuntimeByEntriesConfig;
-}
-```
-
-具体配置字段的意义请参考【[配置](/docs/configure/app/source/alias)】。
-
-### useAppContext
-
-用于获取应用运行上下文。
-
-```ts
-const useAppContext: () => IAppContext
-
-interface IAppContext {
-  appDirectory: string;
-  configFile: string | false;
-  ip?: string;
-  port?: number;
-  distDirectory: string;
-  packageName: string;
-  srcDirectory: string;
-  sharedDirectory: string;
-  nodeModulesDirectory: string;
-  internalDirectory: string;
-  plugins: {
-    cli?: any;
-    server?: any;
-  }[];
-  entrypoints: Entrypoint[];
-  serverRoutes: ServerRoute[];
-  htmlTemplates: HtmlTemplates;
-}
-```
-
-### useResolvedConfigContext
-
-用于获取解析之后的最终配置。
-
-```ts
-const useResolvedConfigContext: () => NormalizedConfig
-
-interface NormalizedConfig {
-  source: NormalizedSourceConfig;
-  output: OutputConfig;
-  server: ServerConfig;
-  dev: DevConfig;
-  deploy: DeployConfig;
-  tools: NormalizedToolsConfig;
-  plugins: PluginConfig;
-  runtime: RuntimeConfig;
-  runtimeByEntries?: RuntimeByEntriesConfig;
-  _raw: UserConfig
-}
-```
-
-具体配置字段的意义请参考【[配置](/docs/configure/app/source/alias)】。
-
-### useHookRunners
-
-用于获取 Hooks 的执行器，并触发特定的 Hook 执行。
-
-```ts
-import type { CliPlugin } from '@modern-js/core';
-
-export default (): CliPlugin => ({
-  name: 'my-plugin',
-
-  async setup(api) {
-    const hookRunners = api.useHookRunners();
-    // 触发 afterBuild Hook
-    await hookRunners.afterBuild();
-  },
-});
-```

package/zh/apis/generator/overview.md

@@ -1,32 +0,0 @@
----
-sidebar_position: 0
----
-
-# 概览
-Modern.js 提供了 `create` 工具用于初始化不同工程方案项目。
-
-## 基本使用
-
-```bash
-npx @modern-js/create [projectDir]
-```
-
-```bash
-Usage: create [projectDir]
-
-创建 @modern-js 应用
-
-Options:
-  -c, --config <config>  创建项目默认配置(JSON 字符串) (default: "{}")
-  --mwa                  一键创建应用工程(使用默认配置) (default: false)
-  --module               一键创建模块工程(使用默认配置) (default: false)
-  --monorepo             一键常见 Monorepo 应用(使用默认配置) (default: false)
-  --dist-tag <distTag>   生成项目时生成器使用特殊的 npm Tag (default: "")
-  --registry <registry>  在创建过程中定制 npm Registry (default: "")
-  -d,--debug             开启 Debug 模式，打印调试日志信息 (default: false)
-  -h, --help             display help for command
-```
-
-:::info 补充信息
-不需要全局安装 `@modern-js/create`，使用 npx 按需运行即可，可以保证始终运行最新版本的项目生成器。
-:::

package/zh/configure/app/output/enable-modern-mode.md

@@ -1,34 +0,0 @@
----
-sidebar_label: enableModernMode
----
-
-# output.enableModernMode
-
-* 类型： `boolean`
-* 默认值：`false`
-
-Modern.js 默认值构建针对旧版浏览器带有 Polyfill 的 JS 产物，开启该配置后，可以在生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物，产物文件名格式为 `[name].[hash]-es6/js`。
-
-例如配置如下配置：
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-  },
-});
-```
-
-执行 `build` 命令后，除了正常的 Client 打包外， 还进行了 Modern 的打包，并且 `dist/static/js` 目录会生成 es6 相关产物。
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-build.jpeg)
-
-执行 `start` 命令后，使用最新版本 Chrome 浏览器访问，观察 Network 中请求的 JS 资源为 es6 产物。
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/output-enable-modern-network.jpeg)
-
-:::info
-更多内容可以查看[客户端兼容性](/docs/guides/advanced-features/compatibility)。
-:::

package/zh/guides/basic-features/image.md

@@ -1,43 +0,0 @@
----
-title: 图片资源
-sidebar_position: 4
----
-
-## JS 中使用图片
-
-JS 文件中引入的图片资源会返回解析之后的 URL：
-
-```js title=src/App.jsx
-import logoUrl from './logo.png';
-
-console.log(logoUrl); // 输出： '/src/logo.png';
-```
-
-## Base64 编码内联
-
-默认情况下，小于 10kb 的图片、字体文件，会经过 Base64 编码，内联进页面，不会再发送独立的请求。
-
-可以通过配置 [`output.dataUriLimit`](/docs/configure/app/output/data-uri-limit) 修改这个阈值。
-
-## JS 中使用 SVG
-
-针对 SVG 资源，默认启用了 [SVGR](https://react-svgr.com/)，可以通过 React 组件的形式导入：
-
-```js title=App.jsx
-import logoUrl, { ReactComponent as LogoComponent } from './logo.svg';
-```
-
-## CSS 中使用图片
-
-在 CSS 文件中既可以通过相对路径也可以通过别名的方式引入图片:
-
-```css
-.logo {
-  background: url('./foo.png');
-}
-
-/** or **/
-.logo {
-  background: url('@/foo.png');
-}
-```

package/zh/guides/topic-detail/compile-speed.md

@@ -1,182 +0,0 @@
----
-title: 提升编译速度
-sidebar_position: 9
----
-
-Modern.js 默认内置了一系列的编译性能优化策略，但是随着业务场景变复杂、仓库的代码量增大，在使用过程中可能会遇到一些编译性能的问题。
-
-本文档提供了一些可选的提速策略，**开发者可以根据实际场景选取其中的部分策略**，从而进一步提升编译速度。
-
-## 通用优化策略
-
-以下是一些通用的优化策略，对 `modern dev` 和 `modern build` 均有提速效果，其中部分策略对包体积也有优化。
-
-### 减少重复依赖
-
-在实际项目中，会存在某些第三方依赖被安装了多个版本的现象。重复依赖会导致包体积变大、编译速度变慢。
-
-我们可以通过社区中的一些工具来自动消除重复依赖，比如 [yarn-deduplicate](https://github.com/scinos/yarn-deduplicate)。
-
-```bash
-npx yarn-deduplicate && yarn
-```
-
-如果你在使用 `pnpm`，可以考虑通过**重新生成 lock 文件**来减少重复依赖，
-
-```bash
-rm -rf ./node_modules pnpm-lock.yaml && pnpm install
-```
-
-:::info
-删除 lock 文件会使项目中的依赖版本自动升级到指定范围下的最新版，请进行充分的测试。
-:::
-
-### 替换体积较大的依赖
-
-建议将项目中体积较大的第三方依赖替换为更轻量的库，比如将 [moment](https://momentjs.com/) 替换为 [day.js](https://day.js.org/)。
-
-如果不清楚项目中哪些三方依赖的体积较大，可以在执行构建时添加 `--analyze` 参数：
-
-```bash
-npx modern build --analyze
-```
-
-该参数会生成一个分析构建产物体积的 HTML 文件，手动在浏览器中打开该文件，可以看到打包产物的瓦片图。区块的面积越大，说明该模块的体积越大。
-
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
-
-### 避免使用 ts-loader
-
-默认情况下，Modern.js 使用 Babel 编译 TS 文件，开启 `output.enableTsLoader` 选项后，会使用 `ts-loader` 编译 TS 文件。
-
-由于 `ts-loader` 需要进行额外的语法解析和类型检查，因此会导致项目编译速度变慢，请避免使用。
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    // 移除这项配置
-    enableTsLoader: true,
-  },
-});
-```
-
-详见 [tools.tsLoader 文档](/docs/configure/app/tools/ts-loader)。
-
-### 提升 Browserslist 范围
-
-**减少 Polyfill 的代码量可以提升编译速度。**Modern.js 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目对兼容性的要求较低，可以根据实际情况，提升 Browserslist 范围，从而减少 Polyfill 的代码量。
-
-默认的 Browserslist 配置为：
-
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
-```
-
-比如只兼容 Chrome 53 以上的浏览器，可以改成：
-
-```js
-['Chrome >= 53'];
-```
-
-详见 [客户端兼容性 - Browserslist 配置](/docs/guides/advanced-features/compatibility#browserslist-配置)。
-
-### 按需引入 Polyfill
-
-明确第三方依赖不需要 Polyfill 的情况下，可以将 `output.polyfill` 设置为 `usage`，根据代码中使用到的语法，按需注入所需的 Polyfill 代码，从而减少 Polyfill 的代码量。
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    polyfill: 'usage',
-  },
-});
-```
-
-详见 [客户端兼容性 - Polyfill 模式](/docs/guides/advanced-features/compatibility#polyfill-模式)。
-
-## dev 优化策略
-
-以下是针对 `modern dev` 进行提速的策略。
-
-### 调整开发环境 SourceMap 格式
-
-为了提供良好的调试体验，Modern.js 在开发环境下默认使用 webpack 提供的 `cheap-module-source-map` 格式 SourceMap。
-
-由于生成高质量的 SourceMap 需要额外的性能开销，通过调整开发环境的 SourceMap 格式，可以提升 dev 编译速度。
-
-比如禁用 SourceMap：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    webpackChain(chain, { env }) {
-      if (env === 'development') {
-        chain.devtool(false);
-      }
-    },
-  },
-});
-```
-
-或是把开发环境的 SourceMap 格式设置为开销最小的 `eval` 格式：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    webpackChain(chain, { env }) {
-      if (env === 'development') {
-        chain.devtool('eval');
-      }
-    },
-  },
-});
-```
-
-> 关于不同 SourceMap 格式之间的详细差异，请查看 [webpack - devtool](https://webpack.js.org/configuration/devtool/)。
-
-### 调整开发环境的 Browserslist 范围
-
-这项优化的原理与「提升 Browserslist 范围」类似，区别在于，我们可以为开发环境和生产环境设置不同的 browserslist，使开发环境下不需要引入额外的 Polyfill 编译逻辑。
-
-比如在 `package.json` 中添加以下配置，在开发环境下只兼容最新的浏览器，在生产环境下兼容实际需要的浏览器：
-
-```json
-{
-  "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
-```
-
-注意，这项优化策略会导致 `dev` 构建的产物与 `build` 构建的产物存在一定差异。
-
-## build 优化策略
-
-以下是针对 `modern build` 进行提速的策略。
-
-### 禁用生产环境 SourceMap
-
-如果项目在生产环境下不需要 SourceMap，可以通过 `disableSourceMap` 配置项关闭，从而提升 build 构建的速度。
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    disableSourceMap: true,
-  },
-});
-```
-
-详见 [output.disableSourceMap](/docs/configure/app/output/disable-source-map)。
-
-### 使用 esbuild 压缩
-
-Modern.js 基于 esbuild 提供了代码编译和压缩的能力，在大型工程中开启后，**可以大幅度减少代码压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。
-
-使用 esbuild 压缩虽然带来了构建效率上的提升，但 esbuild 的压缩比例是低于 terser 的，因此**构建产物的体积会增大**，请根据业务情况酌情使用（比较适合中后台场景）。
-
-详见 [tools.esbuild](/docs/configure/app/tools/esbuild)。