Belajar SvelteKit - Assets, Images & Static Content

#Pendahuluan

Sebuah aplikasi tidak hanya soal logika — ia juga soal aset: logo, foto, ikon, dan dokumen. Cara aset dikelola memengaruhi waktu loading, biaya bandwidth, dan pengalaman pengguna. Episode 9 membahas tiga kategori: aset statis, gambar teroptimasi, dan konten berbasis file.

SvelteKit menawarkan dua jalur aset yang berbeda: direktori static untuk file yang disalin apa adanya, dan import modul untuk file yang diproses Vite. Memahami perbedaan ini adalah kunci untuk memilih jalur yang tepat.

Di akhir episode ini, kalian bisa menyajikan gambar responsif yang teroptimasi otomatis, memuat konten Markdown sebagai halaman, dan mengatur caching aset dengan benar.

#Static Assets di Direktori static

#File yang Disalin Apa Adanya

Folder static disalin utuh ke output build dan disajikan dari akar domain. Cocok untuk file yang tidak perlu diproses: favicon, robots.txt, manifest, PDF, dan gambar yang memang sudah dioptimasi.

static/
|-- favicon.ico
|-- robots.txt
|-- manifest.webmanifest
|-- images/
|   |-- logo.png
|   |-- banner.jpg

File di static diakses langsung dari URL root: static/robots.txt menjadi /robots.txt, dan static/images/logo.png menjadi /images/logo.png. Tidak ada hash nama file, jadi pastikan kalian memakai nama yang stabil.

#Kapan Memakai static

Gunakan static untuk file yang jarang berubah dan tidak butuh pemrosesan. Untuk gambar yang dipakai di dalam komponen dan ingin dioptimasi, import langsung dari modul sebagai gantinya — Vite akan menangani transformasi dan hashing.

#Image Optimization dan Responsive Images

#Plugin Enhanced Images

Paket @sveltejs/enhanced-img mengintegrasikan gambar responsif ke Vite. Ia menghasilkan beberapa ukuran dan format sekaligus saat build, serta menyediakan komponen untuk memilih srcset secara otomatis.

Aktifkan enhanced-img di vite.config

import { sveltekit } from "@sveltejs/kit/vite";
import { enhancedImages } from "@sveltejs/enhanced-img";
 
const config = {
    plugins: [enhancedImages(), sveltekit()]
};
 
export default config;

Setelah plugin dipasang, import gambar dari src/lib dan Vite akan menghasilkan varian webp dan avif dengan beberapa ukuran. Hashing nama file juga membuat cache invalidasi otomatis saat gambar berubah.

#Komponen Gambar Responsif

<script>
    import { enhanced: img } from "$lib/assets/hero.png";
</script>
 
<img
    src={img.src}
    srcset={img.srcset}
    sizes="(min-width: 768px) 50vw, 100vw"
    alt="Hero halaman utama"
    loading="lazy"
    decoding="async"
/>

Attribut srcset dan sizes meminta browser memilih ukuran paling sesuai dengan viewport dan density layar. Tambahkan loading="lazy" untuk gambar di bawah fold dan decoding="async" agar decoding tidak menghambat rendering halaman.

#Content Sourcing dari Markdown dan MDX

#Menulis Konten di File

Konten editorial — artikel, dokumentasi, changelog — sebaiknya ditulis sebagai Markdown atau MDX, bukan disimpan di database. File mudah direview, di-versioning dengan Git, dan di-render sebagai halaman.

src/content/
|-- sveltekit/
|   |-- pengenalan.md
|   |-- routing.md
|-- vite/
|   |-- dasar.md

#Mengubah File menjadi Halaman

Untuk membuat Markdown menjadi halaman, gunakan preprocessor mdsvex yang mengubah file .md menjadi komponen Svelte, atau pakai pustaka konten seperti Velite (pasang dengan npm install velite) yang menghasilkan data terstruktur dan tipe TypeScript. Polanya: kumpulkan daftar file, parse frontmatter dan body, lalu muat isinya di load function dan render dengan komponen Markdown.

Dynamic route [slug] yang di-preprerender adalah pasangan alami untuk konten statis: setiap file Markdown menjadi halaman yang dihasilkan saat build, cepat dan ramah SEO.

#Caching Assets dan Build-Time Optimizations

#Header Caching lewat hooks

Setelah aset dibangun, header cache menentukan seberapa lama browser boleh menyimpan salinan. Di SvelteKit, atur header di dalam hook handle.

Caching di hooks.server.js

export const handle = async ({ event, resolve }) => {
    const res = await resolve(event);
    const url = event.url.pathname;
 
    if (url.startsWith("/images/")) {
        res.headers.set("cache-control", "public, max-age=31536000, immutable");
    } else {
        res.headers.set("cache-control", "no-cache");
    }
 
    return res;
};

Gambar dengan nama hash yang berubah saat konten berubah aman di-cache lama dengan immutable. Halaman HTML dan dokumen dinamis lebih baik memakai no-cache agar selalu di-revalidate.

#Optimasi Saat Build

SvelteKit meminimalkan duplikasi dengan memakai kembali asset dari src/lib di banyak halaman. File Markdown yang diproses saat build mengurangi pekerjaan runtime. Pasangan static untuk file jarang berubah dan src/lib untuk aset yang diproses memberi keseimbangan antara kesederhanaan dan performa.

#Penutup

Inti yang harus dibawa pulang:

• Folder static disalin apa adanya dan disajikan dari root URL, cocok untuk file yang jarang berubah.
• Import gambar dari src/lib agar Vite memproses dan meng-hash file.
• enhanced-img menghasilkan varian ukuran dan format saat build dengan srcset otomatis.
• Gunakan loading="lazy" dan decoding="async" untuk gambar di bawah fold.
• Konten Markdown dan MDX via mdsvex atau Velite mudah direview, di-versioning, dan di-prerender.
• Header cache-control di hooks menentukan umur cache; nama file ber-hash aman diberi immutable.

Di episode 10 selanjutnya kita masuk ke sisi server: API routes & back-end integration. Kalian akan membuat endpoint dengan +server.js, memakai dan mengekspos API internal, menyusun authentication middleware untuk protected endpoints, serta integrasi database dengan ORM.