feat(html)!: support more asset sources (#1687)

jay-es · web-flow · commit b5097613813b · 2024-11-04T21:32:33.000+09:00
* feat(html)!: support more asset sources

* docs(migration): add section for html asset sources
diff --git a/guide/features.md b/guide/features.md
@@ -170,17 +170,32 @@ HTML ファイルは、Vite プロジェクトの[中心](/guide/#index-html-and
 - `<root>/about.html` -> `http://localhost:5173/about.html`
 - `<root>/blog/index.html` -> `http://localhost:5173/blog/index.html`
 
-デフォルトでは、`<script type="module">` や `<link href>` タグなどの HTML 要素が処理され、リンクされたファイルで Vite の機能を使用できるようになります。また、`<img src>`、`<video src>`、`<source src>` などの一般的なアセット要素もリベースされ、最適化され、正しいパスにリンクされるようになります。
-
-```html
+`<script type="module" src>` や `<link href>` などの HTML 要素によって参照されるアセットは、アプリの一部として処理され、バンドルされます。サポートされている要素の完全なリストは次のとおりです:
+
+- `<audio src>`
+- `<embed src>`
+- `<img src>` と `<img srcset>`
+- `<image src>`
+- `<input src>`
+- `<link href>` と `<link imagesrcet>`
+- `<object data>`
+- `<script type="module" src>`
+- `<source src>` と `<source srcset>`
+- `<track src>`
+- `<use href>` と `<use xlink:href>`
+- `<video src>` と `<video poster>`
+- `<meta content>`
+  - `name` 属性が `msapplication-tileimage`、`msapplication-square70x70logo`、`msapplication-square150x150logo`、`msapplication-wide310x150logo`、`msapplication-square310x310logo`、`msapplication-config`、`twitter:image` に一致する場合のみ
+  - または、`property` 属性が `og:image`、`og:image:url`、`og:image:secure_url`、`og:audio`、`og:audio:secure_url`、`og:video`、`og:video:secure_url` に一致する場合のみ
+
+```html {4-5,8-9}
 <!doctype html>
 <html>
   <head>
     <link rel="icon" href="/favicon.ico" />
     <link rel="stylesheet" href="/src/styles.css" />
   </head>
   <body>
-    <div id="app"></div>
     <img src="/src/images/logo.svg" alt="logo" />
     <script type="module" src="/src/main.js"></script>
   </body>
diff --git a/guide/migration.md b/guide/migration.md
@@ -20,6 +20,14 @@ Vite 6 からは、`json.stringify: true` が設定されていても、`json.na
 
 Vite 6 では、`json.stringify` の新しいデフォルト値として `'auto'` が導入されました。これは、大きな JSON ファイルのみを文字列化します。この動作を無効にするには、`json.stringify: false` を設定します。
 
+### HTML 要素におけるアセット参照の拡張サポート
+
+Vite 5 では、サポートされている HTML 要素のうち、Vite によって処理およびバンドルされるアセットを参照できるものは、`<link href>`、`<img src>` など、ごく一部に限られていました。
+
+Vite 6 では、さらに多くの HTML 要素がサポート対象に追加されています。 完全なリストは、[HTML 機能](/guide/features.html#html)のドキュメントでご覧いただけます。
+
+特定の要素の HTML 処理をオプトアウトするには、その要素に `vite-ignore` 属性を追加します。
+
 ### postcss-load-config
 
 [`postcss-load-config`](https://npmjs.com/package/postcss-load-config) が v4 から v6 に更新されました。TypeScript の postcss 設定ファイルを読み込むために、[`ts-node`](https://www.npmjs.com/package/ts-node) の代わりに [`tsx`](https://www.npmjs.com/package/tsx) か [`jiti`](https://www.npmjs.com/package/jiti) が必要になりました。また、YAML の postcss 設定ファイルを読み込むために [`yaml`](https://www.npmjs.com/package/yaml) が必要になりました。
