docs(builder): filename of async modules (#3691)

Author: chenjiahan

packages/document/builder-doc/docs/en/config/output/filename.md

@@ -37,9 +37,9 @@ const prodDefaultFilename = {
 
 Sets the filename of dist files.
 
-After the production build, there will be a hash in the middle of the filename by default. You can disable this behavior through the `output.disableFilenameHash` config.
+After the production build, there will be a hash in the middle of the filename by default. This behavior can be disabled through the `output.disableFilenameHash` config.
 
-Detail:
+The following are the details of each filename:
 
 - `js`: The name of the JavaScript file.
 - `css`: The name of the CSS style file.
@@ -50,7 +50,7 @@ Detail:
 
 ### Example
 
-Set the name of the JavaScript file to `[name]_script.js`:
+To set the name of the JavaScript file to `[name]_script.js`, use the following configuration:
 
 ```js
 export default {
@@ -64,3 +64,24 @@ export default {
   },
 };
 ```
+
+### Filename of Async Modules
+
+When you import a module via dynamic import, the module will be bundled into a single file, and its default naming rules are as follows:
+
+- In the development environment, the filename will be generated based on the module path, such as `dist/static/js/async/src_add_ts.js`.
+- In the production environment, it will be a random numeric id, such as `dist/static/js/async/798.27e3083e.js`. This is to avoid leaking the source code path in the production environment, and the number of characters is also less.
+
+```js title="src/index.ts"
+const { add } = await import('./add.ts');
+```
+
+If you want to specify a fixed name for the async module, you can use the [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) provided by the bundler to achieve this, using `webpackChunkName ` to specify the module name:
+
+```js title="src/index.ts"
+const { add } = await import(
+  /* webpackChunkName: "my-chunk-name" */ './add.ts'
+);
+```
+
+After specifying the module name as above, the generated file will be `dist/static/js/async/my-chunk-name.js`.

packages/document/builder-doc/docs/zh/config/output/filename.md

@@ -39,7 +39,7 @@ const prodDefaultFilename = {
 
 在生产环境构建后，会自动在文件名中间添加 hash 值，如果不需要添加，可以通过 `output.disableFilenameHash` 配置来禁用该行为。
 
-其中：
+下面是各个文件类型的说明：
 
 - `js`：表示 JavaScript 文件的名称。
 - `css`：表示 CSS 样式文件的名称。
@@ -64,3 +64,24 @@ export default {
   },
 };
 ```
+
+### 异步模块的文件名
+
+当你在代码中通过 dynamic import 的方式引入模块时，该模块会被单独打包成一个文件，它默认的命名规则如下：
+
+- 在开发环境下会基于模块路径生成名称，比如 `dist/static/js/async/src_add_ts.js`。
+- 在生产环境下会是一个随机的数字 id，比如 `dist/static/js/async/798.27e3083e.js`，这是为了避免在生产环境中泄露源代码的路径，同时字符数也更少。
+
+```js title="src/index.ts"
+const { add } = await import('./add.ts');
+```
+
+如果你希望为异步模块指定一个固定的名称，可以通过打包工具提供的 [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) 来实现，通过 `webpackChunkName` 指定模块名称：
+
+```js title="src/index.ts"
+const { add } = await import(
+  /* webpackChunkName: "my-chunk-name" */ './add.ts'
+);
+```
+
+通过以上写法指定模块名称后，生成的文件会是 `dist/static/js/async/my-chunk-name.js`。