Skip to main content

アセットハンドリング

Edit this page on GitHub

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

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

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

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

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

CSS 関数の url() でインクルードされたアセットの場合は、experimental.useVitePreprocess オプションが役立つでしょう:

ts
// svelte.config.js
export default {
vitePlugin: {
experimental: {
useVitePreprocess: true
}
}
};

変換(Transforming)

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