From 703b960365c4ff3c57ac5b07a741875d095a6371 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0?= Date: Thu, 20 Nov 2025 16:44:03 +0900 Subject: [PATCH 1/5] docs: clarify manifest.json `imports` field is JS chunks only (#21136) --- .vitepress/config.ts | 22 +++++++++++++++++- guide/backend-integration.md | 44 ++++++++++++++++++++++++++++++++---- 2 files changed, 61 insertions(+), 5 deletions(-) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 48d219c8..0b73017a 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -478,7 +478,27 @@ export default defineConfig({ markdown: { // languages used for twoslash and jsdocs in twoslash languages: ['ts', 'js', 'json'], - codeTransformers: [transformerTwoslash()], + codeTransformers: [ + transformerTwoslash(), + // add `style:*` support + { + root(hast) { + const meta = this.options.meta?.__raw + ?.split(' ') + .find((m) => m.startsWith('style:')) + if (meta) { + const style = meta.slice('style:'.length) + const rootPre = hast.children.find( + (n): n is typeof n & { type: 'element'; tagName: 'pre' } => + n.type === 'element' && n.tagName === 'pre', + ) + if (rootPre) { + rootPre.properties.style += '; ' + style + } + } + }, + }, + ], config(md) { md.use(groupIconMdPlugin, { titleBar: { diff --git a/guide/backend-integration.md b/guide/backend-integration.md index 64b60647..c4419538 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -64,7 +64,7 @@ If you need a custom integration, you can follow the steps in this guide to conf 3. For production, after running `vite build`, a `.vite/manifest.json` file will be generated alongside other asset files. An example manifest file looks like this: - ```json [.vite/manifest.json] + ```json [.vite/manifest.json] style:max-height:400px { "_shared-B7PI925R.js": { "file": "assets/shared-B7PI925R.js", @@ -106,17 +106,53 @@ If you need a custom integration, you can follow the steps in this guide to conf The manifest has a `Record` structure where each chunk follows the `ManifestChunk` interface: - ```ts + ```ts style:max-height:400px interface ManifestChunk { + /** + * The input file name of this chunk / asset if known + */ src?: string + /** + * The output file name of this chunk / asset + */ file: string + /** + * The list of CSS files imported by this chunk + * + * This field is only present in JS chunks. + */ css?: string[] + /** + * The list of asset files imported by this chunk, excluding CSS files + * + * This field is only present in JS chunks. + */ assets?: string[] + /** + * Whether this chunk or asset is an entry point + */ isEntry?: boolean + /** + * The name of this chunk / asset if known + */ name?: string - names?: string[] + /** + * Whether this chunk is a dynamic entry point + * + * This field is only present in JS chunks. + */ isDynamicEntry?: boolean + /** + * The list of statically imported chunks by this chunk + * + * The values are the keys of the manifest. This field is only present in JS chunks. + */ imports?: string[] + /** + * The list of dynamically imported chunks by this chunk + * + * The values are the keys of the manifest. This field is only present in JS chunks. + */ dynamicImports?: string[] } ``` @@ -128,7 +164,7 @@ If you need a custom integration, you can follow the steps in this guide to conf - **Asset chunks**: Generated from imported assets like images, fonts. Their key is the relative src path from project root. - **CSS files**: When [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit) is `false`, a single CSS file is generated with the key `style.css`. When `build.cssCodeSplit` is not `false`, the key is generated similar to JS chunks (i.e. entry chunks will not have `_` prefix and non-entry chunks will have `_` prefix). - Chunks will contain information on their static and dynamic imports (both are keys that map to the corresponding chunk in the manifest), and also their corresponding CSS and asset files (if any). + JS chunks (chunks other than assets or CSS) will contain information on their static and dynamic imports (both are keys that map to the corresponding chunk in the manifest), and also their corresponding CSS and asset files (if any). 4. You can use this file to render links or preload directives with hashed filenames. From 191c0e218e7bc840277fe1550f2b9629102f3491 Mon Sep 17 00:00:00 2001 From: Kylin <1159469891@qq.com> Date: Fri, 21 Nov 2025 18:54:04 +0800 Subject: [PATCH 2/5] docs: update content --- guide/backend-integration.md | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/guide/backend-integration.md b/guide/backend-integration.md index 52b876b3..4879b04e 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -110,49 +110,49 @@ ```ts style:max-height:400px interface ManifestChunk { /** - * The input file name of this chunk / asset if known + * 如果知道的话，这个代码块/资源的输入文件名 */ src?: string /** - * The output file name of this chunk / asset + * 这个代码块/资源的输出文件名 */ file: string /** - * The list of CSS files imported by this chunk + * 该代码块导入的 CSS 文件列表 * - * This field is only present in JS chunks. + * 此字段仅在 JS 代码块中存在。 */ css?: string[] /** - * The list of asset files imported by this chunk, excluding CSS files + * 该代码块导入的资源文件列表，不包括 CSS 文件 * - * This field is only present in JS chunks. + * 此字段仅在 JS 代码块中存在。 */ assets?: string[] /** - * Whether this chunk or asset is an entry point + * 该代码块或资源是否为入口点 */ isEntry?: boolean /** - * The name of this chunk / asset if known + * 如果知道的话，这个代码块/资源的名称 */ name?: string /** - * Whether this chunk is a dynamic entry point + * 该代码块是否为动态入口点 * - * This field is only present in JS chunks. + * 此字段仅在 JS 代码块中存在。 */ isDynamicEntry?: boolean /** - * The list of statically imported chunks by this chunk + * 该代码块静态导入的代码块列表 * - * The values are the keys of the manifest. This field is only present in JS chunks. + * 这些值是 manifest 中的键。此字段仅在 JS 代码块中存在。 */ imports?: string[] /** - * The list of dynamically imported chunks by this chunk + * 该代码块动态导入的代码块列表 * - * The values are the keys of the manifest. This field is only present in JS chunks. + * 这些值是 manifest 中的键。此字段仅在 JS 代码块中存在。 */ dynamicImports?: string[] } @@ -165,11 +165,7 @@ - **Asset chunks**：由导入的资源（例如图片、字体）生成。其键值是项目根目录的相对 src 路径。 - **CSS 文件**：当 [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit) 为 `false` 时，将生成一个带有 `style.css` 键的 CSS 文件。当 `build.cssCodeSplit` 不为 `false` 时，键的生成方式与 JS 代码块类似（即，入口代码块不带 `_` 前缀，非入口代码块带 `_` 前缀）。 -<<<<<<< HEAD -代码块将包含其静态和动态导入的信息（两者都是映射到清单中相应代码块的键），以及它们对应的 CSS 和资源文件（如果有）。 -======= - JS chunks (chunks other than assets or CSS) will contain information on their static and dynamic imports (both are keys that map to the corresponding chunk in the manifest), and also their corresponding CSS and asset files (if any). ->>>>>>> 703b960365c4ff3c57ac5b07a741875d095a6371 +JS 代码块（chunks other than assets or CSS）将包含其静态和动态导入的信息（两者都是映射到清单中相应代码块的键），以及它们对应的 CSS 和资源文件（如果有）。 4. 你可以利用这个文件来渲染带有哈希文件名的链接或预加载指令。 From 37f36e9e056e3d075f904c7aab8d92840ddd62bd Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Fri, 21 Nov 2025 22:12:22 +0800 Subject: [PATCH 3/5] Update guide/backend-integration.md --- guide/backend-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/backend-integration.md b/guide/backend-integration.md index 4879b04e..51b85f8c 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -110,7 +110,7 @@ ```ts style:max-height:400px interface ManifestChunk { /** - * 如果知道的话，这个代码块/资源的输入文件名 + * 此块/资源的输入文件名（若已知） */ src?: string /** From 60091698ee572424fbbd5525f3d44a51ab2d519e Mon Sep 17 00:00:00 2001 From: Kylin <75473409+lxKylin@users.noreply.github.com> Date: Fri, 21 Nov 2025 22:13:00 +0800 Subject: [PATCH 4/5] Update guide/backend-integration.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- guide/backend-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/backend-integration.md b/guide/backend-integration.md index 51b85f8c..6642569e 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -165,7 +165,7 @@ - **Asset chunks**：由导入的资源（例如图片、字体）生成。其键值是项目根目录的相对 src 路径。 - **CSS 文件**：当 [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit) 为 `false` 时，将生成一个带有 `style.css` 键的 CSS 文件。当 `build.cssCodeSplit` 不为 `false` 时，键的生成方式与 JS 代码块类似（即，入口代码块不带 `_` 前缀，非入口代码块带 `_` 前缀）。 -JS 代码块（chunks other than assets or CSS）将包含其静态和动态导入的信息（两者都是映射到清单中相应代码块的键），以及它们对应的 CSS 和资源文件（如果有）。 +JS 代码块（除了资源或 CSS 之外的代码块）将包含其静态和动态导入的信息（两者都是映射到清单中相应代码块的键），以及它们对应的 CSS 和资源文件（如果有）。 4. 你可以利用这个文件来渲染带有哈希文件名的链接或预加载指令。 From f7df51489e15e29893f341ea3139f91ed60dbd3e Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Fri, 21 Nov 2025 22:13:06 +0800 Subject: [PATCH 5/5] Update guide/backend-integration.md --- guide/backend-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/backend-integration.md b/guide/backend-integration.md index 6642569e..b2734b9e 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -134,7 +134,7 @@ */ isEntry?: boolean /** - * 如果知道的话，这个代码块/资源的名称 + * 此块/资源的名称（如已知） */ name?: string /**