アセットハンドリング

Importingpermalink

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

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

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

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

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

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

最適化permalink

.webp や .avif などの圧縮イメージフォーマットや、デバイスのスクリーンに基づいて異なるサイズをサーブするレスポンシブイメージを利用したいことがあるかもしれません。プロジェクトに静的に含まれているイメージの場合、svelte-image のようなプリプロセッサや、vite-imagetools のような Vite plugin をお使いください。