Skip to content

Commit 56b26aa

Browse files
authored
docs: improve manifest.json documentation clarity and completeness (#2103)
1 parent 44749df commit 56b26aa

File tree

1 file changed

+36
-13
lines changed

1 file changed

+36
-13
lines changed

guide/backend-integration.md

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@
7575
"file": "assets/shared-ChJ_j-JJ.css",
7676
"src": "_shared-ChJ_j-JJ.css"
7777
},
78+
"logo.svg": {
79+
"file": "assets/logo-BuPIv-2h.svg",
80+
"src": "logo.svg"
81+
},
7882
"baz.js": {
7983
"file": "assets/baz-B2H3sXNv.js",
8084
"name": "baz",
@@ -100,11 +104,31 @@
100104
}
101105
```
102106

103-
- マニフェストは `Record<name, chunk>` 構造になっています。
104-
- エントリーまたはダイナミックエントリーのチャンクの場合、プロジェクトルートからの相対パスがキーとなります。
105-
- エントリー以外のチャンクでは、生成されたファイル名の前に `_` を付けたものがキーとなります。
106-
- [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit)`false` のときに生成された CSS ファイルの場合、キーは `style.css` です。
107-
- チャンクには、静的インポートと動的インポートの情報(どちらもマニフェスト内の対応するチャンクをマップするキー)と、それらと対応する CSS とアセットファイルが含まれます(あれば)。
107+
マニフェストは `Record<name, chunk>` 構造になっており、各チャンクは `ManifestChunk` インターフェースに従います:
108+
109+
```ts
110+
interface ManifestChunk {
111+
src?: string
112+
file: string
113+
css?: string[]
114+
assets?: string[]
115+
isEntry?: boolean
116+
name?: string
117+
names?: string[]
118+
isDynamicEntry?: boolean
119+
imports?: string[]
120+
dynamicImports?: string[]
121+
}
122+
```
123+
124+
マニフェスト内の各エントリーは、以下のいずれかを表します:
125+
- **エントリーチャンク**: [`build.rollupOptions.input`](https://rollupjs.org/configuration-options/#input) で指定されたファイルから生成されます。これらのチャンクには `isEntry: true` があり、キーはプロジェクトルートからの相対パスです。
126+
- **ダイナミックエントリーチャンク**: 動的インポートから生成されます。これらのチャンクには `isDynamicEntry: true` があり、キーはプロジェクトルートからの相対パスです。
127+
- **非エントリーチャンク**: キーは生成されたファイル名の前に `_` を付けたものです。
128+
- **アセットチャンク**: 画像やフォントなどのインポートされたアセットから生成されます。キーはプロジェクトルートからの相対パスです。
129+
- **CSS ファイル**: [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit)`false` の場合、キー `style.css` で単一の CSS ファイルが生成されます。`build.cssCodeSplit``false` でない場合、キーは JS チャンクと同様に生成されます(つまり、エントリーチャンクは `_` プレフィックスなし、非エントリーチャンクは `_` プレフィックスあり)。
130+
131+
チャンクには、静的インポートと動的インポートの情報(どちらもマニフェスト内の対応するチャンクをマップするキー)と、それらと対応する CSS とアセットファイルが含まれます(あれば)。
108132

109133
4. このファイルを使用してハッシュを付加されたファイル名でリンクや preload directives をレンダリングすることができます。
110134

@@ -128,15 +152,14 @@
128152
<link rel="modulepreload" href="/{{ chunk.file }}" />
129153
```
130154

131-
具体的には、マニフェストファイルとエントリーポイントが指定された場合、HTML を生成するバックエンドは以下のタグを含める必要があります。
155+
具体的には、マニフェストファイルとエントリーポイントが指定された場合、HTML を生成するバックエンドは以下のタグを含める必要があります。最適なパフォーマンスのために、この順序に従うことが推奨されます:
156+
157+
1. エントリーポイントのチャンクの `css` リストのファイルごとに `<link rel="stylesheet">` タグ(存在する場合)
158+
2. エントリーポイントの `imports` リスト内のすべてのチャンクを再帰的にたどり、インポートされた各チャンクの `css` リストのファイルごとに
159+
`<link rel="stylesheet">` タグを含める(存在する場合)。
160+
3. エントリーポイントのチャンクの `file` キーに対するタグ。これは JavaScript に対する `<script type="module">`、CSS に対する `<link rel="stylesheet">` になります。
161+
4. オプションとして、インポートされた JavaScript チャンクごとの `file` に対する `<link rel="modulepreload">` タグを追加し、エントリーポイントのチャンクから imports を再帰的にたどる。
132162

133-
- エントリーポイントのチャンクの `css` リストのファイルごとに `<link rel="stylesheet">` タグ
134-
- エントリーポイントの `imports` リスト内のすべてのチャンクを再帰的にたどり、インポートされた各チャンクの CSS ファイルごとに
135-
`<link rel="stylesheet">` タグを含める。
136-
- エントリーポイントのチャンクの `file` キーに対するタグ(JavaScript に対する `<script type="module">`
137-
または CSS に対する `<link rel="stylesheet">`
138-
- オプションとして、インポートされた JavaScript ごとの `file` に対する `<link rel="modulepreload">` タグ。
139-
再度、エントリーポイントのチャンクから imports を再帰的にたどる。
140163

141164
上記のマニフェスト例に従うと、本番環境では、エントリーポイント `views/foo.js` に対して以下のタグが含まれるはずです。
142165

0 commit comments

Comments
 (0)