Performance & Deploy

เร็วโดย default

เพราะ Svelte เป็น compiler (บทเรียนแรกสุด) performance baseline จึงดีอยู่แล้ว — ไม่มี virtual DOM runtime ให้ ship และ component compile เป็น code update ที่พุ่งตรงจุด คุณเสียเวลาสู้กับ bundle size น้อยกว่าแอปที่ใช้ runtime framework มาก — overhead ของ framework ที่ติดมากับ code คุณมีน้อย

แต่นั่นไม่ได้ทำให้ performance เกิดขึ้นเอง code ของคุณเอง, image, library ภายนอก และการเลือก data-loading ยังสำคัญ แต่จุดเริ่มต้นนั้นเบา และเครื่องมือด้านล่างช่วยให้คุณรักษาข้อได้เปรียบนั้นไว้

วัดสิ่งที่คุณ ship

ก่อน optimize ต้องวัด vite build รายงานขนาด output และ ecosystem ของ Vite มี bundle visualizer (เช่น rollup-plugin-visualizer) ที่โชว์ว่าอะไรกินพื้นที่ — ปกติคือ dependency ภายนอกที่หนัก ไม่ใช่ตัว Svelte เอง

npm run build      # vite build — prints chunk sizes

ระวัง: date/utility library ตัวใหญ่ที่ import มาทั้งก้อน, icon set ที่ดึงมาทั้งชุด หรือ component ที่ load แบบ eager ทั้งที่ทำ lazy ได้ SvelteKit code-split ต่อ route ให้อัตโนมัติ หน้าที่หนักจึงไม่ถ่วงส่วนที่เหลือของแอป

adapter: เลือก deploy target

แอป SvelteKit deploy ผ่าน adapter ที่แปลง build ให้แพลตฟอร์มเฉพาะ คุณตั้งใน svelte.config.js:

import adapter from '@sveltejs/adapter-auto';

export default {
  kit: {
    adapter: adapter(),
  },
};

adapter	deploy ไปที่
`adapter-auto`	ตรวจจับแพลตฟอร์มยอดนิยม (Vercel, Netlify, Cloudflare…) อัตโนมัติ
`adapter-node`	Node server ที่รันยาว ๆ ที่คุณ host เอง
`adapter-cloudflare`	Cloudflare Pages / Workers (edge)
`adapter-static`	เว็บ static ล้วน — HTML/CSS/JS บน CDN ใดก็ได้

adapter-auto คือ default แบบ zero-config คุณเปลี่ยนไปใช้ adapter เฉพาะเมื่อรู้ target ของคุณ (และต้องใช้ option ของตัวเอง)

flowchart LR
  build["vite build (SvelteKit)"] --> adapter["adapter"]
  adapter --> node["Node server"]
  adapter --> edge["Cloudflare / edge"]
  adapter --> static["static CDN"]

build เดียว หลาย deploy target ผ่าน adapter

static vs server

การตัดสินใจเรื่อง deployment สะท้อนการเลือก rendering:

static — ด้วย adapter-static (หรือ export const prerender = true บน route ที่ prerender ได้) หน้าถูก build เป็น HTML ตอน build time และ serve จาก CDN ใดก็ได้ เหมาะกับ content ที่เหมือนกันสำหรับทุกคน ไม่ต้องมี server
server — ด้วย runtime adapter (node/cloudflare/…) หน้า render on demand สำหรับ data ตอน request-time (ผู้ใช้ที่ login อยู่, data สด) ผสมได้: prerender หน้า marketing, render dashboard on demand

ตั้ง export const prerender = true บน route ที่เป็น static ได้ แล้วปล่อยที่เหลือให้ render on demand — วิธี hybrid เดียวกันที่ทำให้เว็บส่วนใหญ่ cache ได้ ส่วนอีกไม่กี่ route ยังคง dynamic