@modern-js/main-doc 2.58.1 → 2.58.3

package/docs/en/apis/app/hooks/config/icon.mdx

@@ -42,7 +42,7 @@ When there is an `icon.*` file in the `config` directory at the root of the proj
 After the build is completed, you can see the following tags automatically generated in HTML:
 
 ```html
-<link rel="apple-touch-icon" sizes="180*180" href="/static/image/icon.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="/static/image/icon.png" />
 ```
 
 ### Order

package/docs/en/apis/app/runtime/web-server/unstable_middleware.mdx

@@ -92,7 +92,7 @@ import {
 } from '@modern-js/runtime/server';
 import type { Vars } from '../shared/index';
 
-const setPayload: UnstableMiddleware = async (
+const setPayload: UnstableMiddlewaree<Vars> = async (
   c: UnstableMiddlewareContext<Vars>,
   next,
 ) => {
@@ -101,7 +101,7 @@ const setPayload: UnstableMiddleware = async (
   await next();
 };
 
-export const unstableMiddleware: UnstableMiddleware[] = [setPayload];
+export const unstableMiddleware: UnstableMiddleware<Vars>[] = [setPayload];
 ```
 
 ```ts title="src/routes/page.data.ts"

package/docs/en/community/blog/_meta.json

@@ -1,6 +1 @@
-[
-  "overview",
-  "v2-release-note",
-  "2022-0910-updates",
-  "2022-0708-updates"
-]
+["overview", "v2-release-note", "2022-0910-updates", "2022-0708-updates"]

package/docs/en/components/deploy.mdx

@@ -1 +1 @@
-After local verification, you can organize the artifacts in `dist/` into the structure required by the server for deployment.
+After local develop, you can refer to the [Deployment](/guides/basic-features/deploy.html) section to deploy the project to the server.

package/docs/en/configure/_meta.json

@@ -75,4 +75,4 @@
   },
   "app/builder-plugins",
   "app/auto-load-plugin"
-]
+]

package/docs/en/configure/app/tools/esbuild.mdx

@@ -41,4 +41,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [Modern.js Builder - Esbuild Plugin Configuration](https://modernjs.dev/builder/en/plugins/plugin-esbuild.html#config).
+For config details, please refer to [Esbuild Plugin Configuration](/guides/rsbuild-plugins/plugin-esbuild.html#config).

package/docs/en/configure/app/tools/swc.mdx

@@ -19,7 +19,7 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 
 ## Used in Rspack mode
 
-You can set the options of [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader) through `tools.swc`.
+You can set the options of [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) through `tools.swc`.
 
 ```
 import { defineConfig } from '@modern-js/app-tools';
@@ -77,4 +77,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [Modern.js Builder - SWC Plugin Configuration](https://modernjs.dev/builder/en/plugins/plugin-swc.html#config).
+For config details, please refer to [SWC Plugin Configuration](/guides/rsbuild-plugins/plugin-swc.html#config).

package/docs/en/guides/_meta.json

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

package/docs/en/guides/advanced-features/bff/_meta.json

@@ -1,6 +1 @@
-[
-  "function",
-  "type",
-  "frameworks",
-  "sdk"
-]
+["function", "type", "frameworks", "sdk"]

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -22,13 +22,6 @@ import InitRspackApp from '@site-docs-en/components/init-rspack-app';
 
 After the project is created, you can experience the project by running `pnpm run dev`. For more project information, please refer to [Quick Start](/guides/get-started/quick-start.html).
 
-:::tip
-When using Rspack as the bundler, the following Features are temporarily unavailable as some of the capabilities are still under development and we will provide support in the future.
-
-- The usage of [useLoader](/guides/basic-features/data/data-fetch.html) in Client Side Rendering
-
-:::
-
 ## Enable Rspack build
 
 Since Modern.js MAJOR_VERSION.46.0, you can enable Rspack build by add the following configuration in `modern.config.ts`:
@@ -85,7 +78,7 @@ For unsupported configurations, we have marked `Bundler: only support webpack` o
 
 ## Modify transpile configuration
 
-Modern.js uses Rspack [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader.html) for code translation in Rspack mode.
+Modern.js uses Rspack [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) for code translation in Rspack mode.
 
 Modern.js has provided a more convenient configuration for the common configuration of `builtin:swc-loader`, such as: configuring the component library to import it on demand through [source.transformImport](/configure/app/source/transform-import).
 

package/docs/en/guides/advanced-features/ssr/_meta.json

@@ -1,5 +1 @@
-[
-  "usage",
-  "stream",
-  "cache"
-]
+["usage", "stream", "cache"]

package/docs/en/guides/basic-features/data/_meta.json

@@ -1,4 +1 @@
-[
-  "data-fetch",
-  "data-write"
-]
+["data-fetch", "data-write"]

package/docs/en/guides/basic-features/data/data-fetch.mdx

@@ -481,7 +481,7 @@ The Data Loader in our SSR project is designed to only run on the server side. T
 **`useLoader`** is a legacy API in Modern.js v1. This API is a React Hook designed specifically for SSR applications, allowing developers to fetch data in components in isomorphic development.
 
 :::tip
-It is not necessary to use `useLoader` to fetch data in CSR projects.
+It is not necessary to use `useLoader` to fetch data in CSR projects, and `useLoader` is not supported when using Rspack as the bundler.
 :::
 
 Here is the simplest example:

package/docs/en/guides/basic-features/routes.mdx

@@ -380,7 +380,7 @@ export default () => {
 
 In each directory under `routes/`, developers can also define an `error.tsx` file that exports an `<ErrorBoundary>` component by default.
 
-When this component exists in the routes directory, any rendering errors will be caught by the `ErrorBoundary` component. When the `layout.tsx` file is not defined in the directory, the `<ErrorBoundary>` component will not take effect.
+When this component exists in the routes directory, any rendering errors will be caught by the `ErrorBoundary` component.
 
 `<ErrorBoundary>` can return the UI view when an error occurs. When the `<ErrorBoundary>` component is not declared in the current level, the error will bubble up to a higher-level component until it is caught or thrown. At the same time, when a component has an error, it will only affect the route component and its child components that catch the error. The status and view of other components are not affected and can continue to interact.
 

package/docs/en/guides/concept/_meta.json

@@ -1,4 +1 @@
-[
-  "entries",
-  "builder"
-]
+["entries", "builder"]

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

@@ -16,7 +16,7 @@ Many configuration options provided by Modern.js are divided by entry, such as p
 
 ## Single Entry and Multiple Entries
 
-The project initialized by Modern.js is a single entry (SPA) project, with the following structure:
+The project initialized by Modern.js is a single entry project, with the following structure:
 
 ```
 .
@@ -56,13 +56,12 @@ After running the command, Modern.js will automatically generate a new entry dir
 
 The original entry code has been moved to a directory with the same name as the `name` field in `package.json`, and a `new-entry` entry directory has been created.
 
-You can run `pnpm run dev` to start the development server. At this point, you will see a new route named `/new-entry` added, and the existing page routes remain unchanged.
-
-:::tip
 Modern.js will use the entry with the same name as the `name` field in `package.json` as the main entry. The route of the main entry is `/`, and the route of other entries is `/{entryName}`.
 
-For example, when the `name` field in `package.json` is `myapp`, `src/myapp` will be the main entry of the project.
+You can run `pnpm run dev` to start the development server. At this point, you will see a new route named `/new-entry` added, and the existing page routes remain unchanged.
 
+:::note
+The concepts of **single entry/multiple entry** and **SPA/MPA** are not equivalent. The former pertains to how to configure and package the application, while the latter is about the patterns for organizing front-end applications. Each entry point can be either an SPA or a non-SPA.
 :::
 
 ## Entry Types
@@ -82,30 +81,26 @@ By default, Modern.js scans the files under `src/` before starting the project,
 
 :::
 
-Not all top-level directories under `src/` become project entries. The directory where the entry is located must meet one of the following five conditions:
+The entry directory must meet one of the following three conditions:
 
 1. Has a `routes/` directory.
 2. Has an `App.[jt]sx?` file.
-3. Has an `index.[jt]sx?` file.
-4. Has a `pages/` directory (compatible with Modern.js 1.0).
-5. Has an `entry.[jt]sx?` file.
+5. Has an `entry.[jt]sx?` file.(Requires [source.enableCustomEntry](/configure/app/source/enable-custom-entry) to be enabled)
 
-When the `src/` directory meets the entry requirements, Modern.js considers the current project as a single entry application.
+When the `src/` directory meets the conditions of an entry, Modern.js will consider the current application to be a single-entry application. Otherwise, Modern.js will scan the first-level directories under `src/` and further determine if they are entries. In this case, the application is typically a multi-entry application.
 
 :::tip
 In a single entry application, the default entry name is `main`.
 
 :::
 
-When the project is not a single entry application, Modern.js will further look at the top-level directories under `src/`.
-
 ### Framework Mode Entry
 
-The framework mode refers to the need to use the framework capabilities of Modern.js, such as nested routing, SSR, and integrated BFF, etc. Under this kind of entry convention, the entry defined by the developer is not the actual compilation entry. When Modern.js is launched, it generates a wrapped entry, and the real entry can be found at `node_modules/.modern/[entryName]/index.js`.
+Framework mode refers to using Modern.js's framework capabilities, such as convention routing, SSR (Server-Side Rendering), and integrated calls. Under this type of entry convention, the entries in the application are not the actual compilation entries. Modern.js will generate a wrapped entry during startup, which you can find in `node_modules/.modern/[entryName]/index.js`.
 
 #### Conventional Routing
 
-If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` during startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
+If there is a `routes/` directory within the entry, we refer to this entry as a convention-based route. Modern.js will scan the files under `routes/` during startup and automatically generate client-side routes (react-router) based on file conventions. For example:
 
 ```bash
 .
@@ -121,7 +116,15 @@ For more information, please refer to [Conventional Routing](/guides/basic-featu
 
 #### Self-controlled Routing
 
-If there is an `App.[jt]sx?` file in the entry, developers can set the client-side route in this file through code, or not set the client-side route.
+If there is an `App.[jt]sx?` file within the entry, we refer to this entry as a self-controlled route. For example:
+
+```bash
+.
+├── src
+│   └── App.tsx
+```
+
+In this file, you can define client-side routes or  not to set any client-side routes.
 
 ```tsx
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
@@ -142,12 +145,14 @@ For more information, please refer to [Self-controlled Routing](/guides/basic-fe
 
 #### Custom Entry
 
-If there is an `entry.[jt]sx` file in the entry, developers need to call the `createRoot` and `render` functions in the `entry.[jt]sx` file to complete the project's entry logic.
-
 :::info
-Using this file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
+Using this features requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
 :::
 
+By default, whether you use convention routing or self-controlled routing, Modern.js will automatically handle rendering. If you wish to customize this behavior, you can creating a custom entry file.
+
+If there is an `entry.[jt]sx` file within the entry, Modern.js will no longer control the application's rendering process. You can call the `createRoot` and `render` functions within the `entry.[jt]sx` file to complete the entry logic for your application.
+
 ```tsx
 import { createRoot } from '@modern-js/runtime/react';
 import { render } from '@modern-js/runtime/browser';
@@ -157,7 +162,9 @@ const ModernRoot = createRoot();
 render(<ModernRoot />);
 ```
 
-For example, if some other operations need to be performed before render is executed, it can be implemented in this way:
+In the code above, the component returned by the `createRoot` function is either the component generated from the `routes/` directory or the component exported by `App.tsx`. 
+
+The `render` function is used to handle rendering and mounting of the component. For example, if you want to execute some asynchronous tasks before rendering, you can achieve it like this:
 
 ```tsx
 import { createRoot } from '@modern-js/runtime/react';
@@ -166,7 +173,7 @@ import { render } from '@modern-js/runtime/browser';
 const ModernRoot = createRoot();
 
 async function beforeRender() {
-   // todo
+  // some async request
 }
 
 beforeRender().then(() => {
@@ -174,34 +181,15 @@ beforeRender().then(() => {
 });
 ```
 
-#### Custom Bootstrap
-
-:::warning
-Soon to be deprecated, it is recommended to use a custom entry.
-:::
-
-If there is an `index.[jt]sx` file in the entry, and the file exports a function by default, Modern.js will pass the default `bootstrap` function as a parameter and use the exported function to replace the default `bootstrap`. This way, developers can customize how components are mounted to DOM nodes or add custom behavior before mounting. For example:
-
-```tsx
-export default (App: React.ComponentType, bootstrap: () => void) => {
-  // do something before bootstrap...
-  initSomething().then(() => {
-    bootstrap();
-  });
-};
-```
-
 ### Build Mode Entry
 
-Build mode refers to not using the Runtime capabilities provided by Modern.js, but rather having the developer define the entry of the page completely on their own.
-
-When the entry directory contains `index.[jt]sx` (soon to be deprecated) and does not export a function via `export default`, or when there is an `entry.[jt]sx` file in the entry directory and the `@modern-js/runtime` dependency is not installed, the corresponding file will be identified as the entry module of webpack or Rspack.
-
 :::info
-Using the `entry.[jt]sx` file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
+Using this features requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
 :::
 
-In this case, Modern.js will not generate the entry code automatically. Therefore, you need to manually mount the component to the DOM node, for example:
+Build mode refers to the development mode that does not use Modern.js's runtime capabilities and only utilizes Modern.js's build capabilities. When the `@modern-js/runtime` dependency is not installed in the application, Modern.js will treat all entries as build mode entries.
+
+In this case, if there is an `entry.[jt]sx` file within the entry, this file will be recognized as the build entry for webpack or Rspack. Modern.js will not automatically generate entry code at this time, and you need to mount the component to the DOM node yourself. For example:
 
 ```js title=src/entry.tsx
 import React from 'react';
@@ -211,9 +199,13 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-This approach is equivalent to enabling the [source.entries.disableMount](/configure/app/source/entries) option in Modern.js. When you use this approach, **you will not be able to use the runtime capabilities of the Modern.js framework**, such as the `runtime` configuration in the `modern.config.js` file will no longer take effect.
+In build mode, the application **will not be able to use Modern.js's runtime capabilities**, such as:
+- Convention routing, the routing based on the files under `src/routes`
+- Server-Side Rendering (SSR)
+- The `runtime` configuration in the `modern.config.js` file will no longer take effect
 
-## Custom Entries Config
+
+## Specify entry in the configuration file
 
 In some cases, you may need to customize the entry configuration instead of using the entry conventions provided by Modern.js.
 
@@ -246,4 +238,36 @@ export default defineConfig({
 });
 ```
 
-Note that when you enable `disableMount`, **you won't be able to use the runtime capabilities of the Modern.js framework**, such as the `runtime` configuration in the `modern.config.ts` file.
+It is worth noting that, by default, Modern.js considers entries specified through the configuration as **framework mode entries** and will automatically generate the actual compilation entry. 
+
+If your application is migrating from build tools like Webpack or Vite to the Modern.js framework, you typically need to enable the `disableMount` option in the entry configuration. In this case, Modern.js will treat the entry as a **build mode entry**.
+
+## Deprecated
+
+Currently, if the entry directory meets the following conditions, it will also be considered an application entry:
+
+1. Has an `index.[jt]sx?` file.
+2. Has a `pages/` directory.
+
+The `pages/` directory was the convention routing in older versions of Modern.js. Now, it is recommended to use the `routes/` directory.
+
+The `index.[jt]sx?` file supported **Custom Bootstrap** and **Build Mode Entry** in older versions. Now, it is recommended to use `entry.[jt]sx?` instead.
+
+### Custom Bootstrap
+
+When there is an `index.[jt]sx` file in the entry, and  the file's default export is a function, Modern.js will pass the default `bootstrap` function as an argument and use the exported function to replace the default `bootstrap`. 
+
+This allows developers to customize mounting components to DOM or add custom behaviors before mounting. For example:
+
+```tsx
+export default (App: React.ComponentType, bootstrap: () => void) => {
+  // do something before bootstrap...
+  initSomething().then(() => {
+    bootstrap();
+  });
+};
+```
+
+### Build Mode Entry
+
+When an `index.[jt]sx` file exists in the entry directory and does not export a function via export default, this entry will also be considered a build mode entry.

package/docs/en/guides/get-started/_meta.json

@@ -1,7 +1 @@
-[
-  "introduction",
-  "quick-start",
-  "upgrade",
-  "glossary",
-  "tech-stack"
-]
+["introduction", "quick-start", "upgrade", "glossary", "tech-stack"]

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

@@ -55,7 +55,7 @@ It mainly includes the following features:
 - 🏠 **Integration**: Development and production environment web server are unique, CSR and SSR are isomorphic development, and API service calls are functions as interfaces.
 - 📦 **Out Of The Box**: Default TS support, built-in build, ESLint, debugging tools, fully functional and testable.
 - 🌏 **Ecology**: Self-developed state management, micro-frontend, module packaging, and other peripheral needs.
-- 🕸 **Routing Modes**: Includes self-controlled routing, file-convention-based routing (nested routing), etc.
+- 🕸 **Convention Routing**: Using file-based routing helps developers quickly set up applications.
 
 ## Comparison with Others
 

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

@@ -72,7 +72,6 @@ In a newly created project, the `@modern-js/app-tools` npm package is installed
 - It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
 - It integrates Modern.js Builder, providing build capabilities.
 - It integrates Modern.js Server, providing capabilities for development and production servers.
-- It integrates some commonly used plugins, such as `plugin-lint`, `plugin-data-loader`, and more.
 
 `@modern-js/app-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `appTools` in the `plugins` field of the configuration file:
 

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

@@ -30,8 +30,6 @@ We are also working with Zack Jackson, the author of [Module Federation](https:/
 
 Modern.js can be used with any community state management library, such as [Redux](https://redux.js.org/), [Jotai](https://jotai.org/), [Zustand](https://docs.pmnd.rs/zustand), [Valtio](https://valtio.pmnd.rs/), and more.
 
-Modern.js also provides a wrapper around Redux called Reduck for state management. You can refer to ["Reduck State Management"](/en/guides/topic-detail/model/quick-start) for usage.
-
 ## Package Manager
 
 Modern.js can be used with any community package manager, such as [npm](https://www.npmjs.com/package/npm), [yarn](https://classic.yarnpkg.com/lang/en/), [pnpm](https://pnpm.io/), or [Bun](https://bun.sh/).

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

@@ -37,10 +37,24 @@ import ReleaseNote from '@site-docs-en/components/release-note';
 <ReleaseNote />
 
 :::tip
-When upgrading, you need to upgrade all packages provided by Modern.js, instead of upgrading a single dependency.
-
+When upgrading, you need to upgrade all packages provided by Modern.js, rather than upgrading some dependencies.
 :::
 
+## Version Management Strategy
+
+In Modern.js projects, we recommend that all officially provided dependencies use fixed version, and avoid using `^` or `~` for range declarations. For example:
+
+```json
+{
+  "dependencies": {
+    "@modern-js/app-tools": "x.y.z"
+  }
+}
+```
+
+This ensures that the versions of dependencies are fully determined, thereby guaranteeing build consistency and predictability.
+
+
 ## Lock nested dependency
 
 When a nested dependency of the project has a problem and Modern.js cannot be updated immediately, you can use the package manager to lock the version of the nested dependency.

package/docs/en/guides/rsbuild-plugins/plugin-esbuild.mdx

@@ -0,0 +1,205 @@
+---
+sidebar_position: 3
+---
+
+# Esbuild Plugin
+
+:::warning
+**The esbuild feature in the current document is no longer maintained**, we recommend using the Rspack + SWC solution, because Rspack + SWC provide better build performance, richer features, and better compatibility.
+
+Please refer to [「Use Rspack」](guides/advanced-features/rspack-start) for more information.
+
+:::
+
+import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
+
+<Esbuild />
+
+## Quick Start
+
+### Used in Modern.js framework
+
+The Modern.js framework integrates the Builder's esbuild plugin by default, so you don't need to manually install and register the plugin, just use the [tools.esbuild](https://modernjs.dev/en/configure/app/tools/esbuild.html) configuration:
+
+```js
+export default defineConfig({
+  tools: {
+    esbuild: {
+      loader: {
+        target: 'chrome61',
+      },
+      minimize: {
+        target: 'chrome61',
+      },
+    },
+  },
+});
+```
+
+## Config
+
+The plugin will enable code transformation and minification by default. You can also customize the behavior of the plugin through configuration.
+
+### loader
+
+- **Type:**
+
+```ts
+type LoaderOptions = EsbuildLoaderOptions | false | undefined;
+```
+
+- **Default:**
+
+```ts
+const defaultOptions = {
+  target: 'es2015',
+  charset: builderConfig.output.charset,
+};
+```
+
+This config is used to enable JavaScript/TypeScript transformation, which will replace babel-loader and ts-loader with esbuild-loader.
+
+If you want to modify the options, you can check the [esbuild-loader documentation](https://github.com/privatenumber/esbuild-loader#loader).
+
+#### Set JSX Format
+
+When using esbuild for transformation, esbuild will read the `compilerOptions.jsx` field in `tsconfig.json` to determine which JSX syntax to use.
+
+Therefore, you need to set the correct JSX syntax in `tsconfig.json`.
+
+For example, React projects need to set `compilerOptions.jsx` to `react-jsx`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}
+```
+
+#### Set the target environment
+
+Use the `target` option to set the target environment for transformation. `target` can be set directly to the JavaScript language version, such as `es6`, `es2020`; it can also be set to several target environments, each target environment is an environment name followed by a version number, such as `['chrome58', 'edge16' ,'firefox57']`. For a detailed introduction of the `target` option, please refer to [esbuild - target](https://esbuild.github.io/api/#target).
+
+target supports setting to the following environments:
+
+- chrome
+- edge
+- firefox
+- ie
+- ios
+- node
+- opera
+- safari
+
+```ts
+builderPluginEsbuild({
+  loader: {
+    target: 'chrome61',
+  },
+});
+```
+
+#### Disable transformation
+
+Set `loader` to `false` to disable esbuild transformation, and Builder will continue to use Babel to transform the code.
+
+```ts
+builderPluginEsbuild({
+  loader: false,
+});
+```
+
+### minimize
+
+- **Type:**
+
+```ts
+type MinimizeOptions = EsbuildMinifyOptions | false | undefined;
+```
+
+- **Default:**
+
+```ts
+const defaultOptions = {
+  css: true,
+  target: 'es2015',
+  format: builderTarget === 'web' ? 'iife' : undefined,
+};
+```
+
+This option is used to enable minification for JavaScript and CSS.
+
+If you want to modify the options, you can check the [esbuild-loader documentation](https://github.com/privatenumber/esbuild-loader#minifyplugin).
+
+#### Set the target environment
+
+Use the `target` option to set the target environment for minification.
+
+```ts
+builderPluginEsbuild({
+  minimize: {
+    target: 'chrome61',
+  },
+});
+```
+
+#### Disable minification
+
+Set `minimize` to `false` to disable esbuild minification, and Builder will continue to use Terser to minify the code.
+
+```ts
+builderPluginEsbuild({
+  minimize: false,
+});
+```
+
+## Limitations
+
+Although esbuild can significantly improve the build performance of existing webpack projects, it still has certain limitations that require special attention.
+
+### Compatibility
+
+As a compiler (i.e. `loader` capability), esbuild usually supports at least ES2015 (that is, ES6) syntax, and does not have the ability to automatically inject Polyfill.. If the production environment needs to downgrade to ES5 and below syntax, it is recommended to use SWC compilation.
+
+You can specify the target syntax version by following config:
+
+```ts
+builderPluginEsbuild({
+  loader: {
+    target: 'es2015',
+  },
+});
+```
+
+As a code minify tool (i.e. `minimize` capability), esbuild can minify the code in production environment, and usually supports ES2015 syntax at least.
+
+If you set the compressed `target` to `es5`, you need to ensure that all codes have been compiled to ES5 codes, otherwise it will cause esbuild compilation error: `Transforming 'xxx' to the configured target environment ("es5") is not supported yet `.
+
+Therefore, for projects that need to be compatible with ES5 and below syntax in the production environment, please be careful to enable the minimize capability, and it is recommended to use SWC compression.
+
+You can specify the target syntax version by following config:
+
+```js
+builderPluginEsbuild({
+  minimize: {
+    target: 'es2015',
+  },
+});
+```
+
+:::danger Caution
+Projects that need to be compatible with ES5 and below syntax in the production environment need to be careful to turn on the minimize config.
+:::
+
+### Not support Babel plugins
+
+As a compiler, the syntax transformation function of the original Babel plugins such as `babel-plugin-import` is not available after esbuild is turned on. And since the bottom layer of the plugin uses esbuild's `Transform API`, it does not support esbuild plugins to customize the compilation process.
+
+If you have requirements related to Babel plugins such as `babel-plugin-import`, you can use the SWC plugin.
+
+### Bundle Size
+
+Although the compression speed of esbuild is faster, the compression ratio of esbuild is lower than that of terser, so the bundle size will increase, please use it according to the scenes. Generally speaking, esbuild is more suitable for scenes that are not sensitive to bundle size.
+
+You can refer to [minification-benchmarks](https://github.com/privatenumber/minification-benchmarks) for a detailed comparison between minimizers.