アセットハンドリング

キャッシュとインライン化(Caching and inlining)permalink

パフォーマンス改善のため、Vite はインポートされたアセットを自動的に処理します。ハッシュがファイル名に追加されるのでキャッシュできるようになり、assetsInlineLimit より小さいアセットはインライン化されます。

<script>
  import logo from '$lib/assets/logo.png';
</script>

<img alt="The project logo" src={logo} />

マークアップから直接アセットを参照したければ、svelte-preprocess-import-assets などのプリプロセッサをお使い頂けます。

CSS 関数の url() でインクルードされたアセットの場合は、vitePreprocess が役立つでしょう。

変換(Transforming)permalink

イメージを変換して、.webp や .avif などの圧縮イメージフォーマットに変換したり、デバイスごとに異なるサイズのレスポンシブイメージを出力したり、プライバシーのために EXIF データを取り除いたイメージを出力したいことがあるかもしれません。静的に含まれるイメージについては、vite-imagetools などの Vite プラグインを使用することができます。HTTP ヘッダーやクエリ文字列パラメータに基づいて適切に変換されたイメージを提供できる CDN を検討することもできます。