|
75 | 75 | "file": "assets/shared-ChJ_j-JJ.css",
|
76 | 76 | "src": "_shared-ChJ_j-JJ.css"
|
77 | 77 | },
|
| 78 | + "logo.svg": { |
| 79 | + "file": "assets/logo-BuPIv-2h.svg", |
| 80 | + "src": "logo.svg" |
| 81 | + }, |
78 | 82 | "baz.js": {
|
79 | 83 | "file": "assets/baz-B2H3sXNv.js",
|
80 | 84 | "name": "baz",
|
|
100 | 104 | }
|
101 | 105 | ```
|
102 | 106 |
|
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 とアセットファイルが含まれます(あれば)。 |
108 | 132 |
|
109 | 133 | 4. このファイルを使用してハッシュを付加されたファイル名でリンクや preload directives をレンダリングすることができます。
|
110 | 134 |
|
|
128 | 152 | <link rel="modulepreload" href="/{{ chunk.file }}" />
|
129 | 153 | ```
|
130 | 154 |
|
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 を再帰的にたどる。 |
132 | 162 |
|
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 を再帰的にたどる。 |
140 | 163 |
|
141 | 164 | 上記のマニフェスト例に従うと、本番環境では、エントリーポイント `views/foo.js` に対して以下のタグが含まれるはずです。
|
142 | 165 |
|
|
0 commit comments