Advanced
アセットハンドリング
Edit this page on GitHubキャッシュとインライン化(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 を検討することもできます。
previous Server-only modules
next Snapshots