เราต้อง build ก่อนไป Deploy

เราใช้ Vite ในการ build โปรเจคเพื่อ:

• เพิ่มประสิทธิภาพ: ทำให้แอปพลิเคชันทำงานได้เร็วขึ้น
• ลดขนาดไฟล์: ทำการ minify และ tree-shaking
• เตรียมพร้อมสำหรับ production: ปรับแต่ง configuration ให้เหมาะสมกับการใช้งานจริง
• จัดการ dependencies: รวมไฟล์ dependencies ให้เป็นรูปแบบที่เหมาะสม
• สร้าง static assets: สร้างไฟล์ CSS, JavaScript และ asset ที่ optimize แล้ว
• รองรับ browser เก่า: ใช้ polyfills และ transpile code ให้เข้ากับ browser เก่า
• สร้าง source maps: สำหรับ debugging ใน production

วิธีการ build เพื่อ deploy ใน production

1. กำหนด vite build ที่ package.json

package.json

{
	"scripts": {
		"build": "vite build"
	}
}

2. กำหนดค่าการ build ที่ vite.config.ts

vite.config.ts

export default defineConfig({
  build: {
    outDir: "dist", // โฟลเดอร์ output
    assetsDir: "assets", // โฟลเดอร์สําหรับไฟล์ assets
    minify: "terser", // ใช้ terser สําหรับ minify
    sourcemap: false, // ปิด sourcemap ใน production
  },
});

3. ทำการ build

npm

npm run build

pnpm

pnpm run build

yarn

yarn build

bun

bun run build

4. เมื่อ build เสร็จสิ่งที่ได้จำอยู่ใน outDir ที่กำหนด

5. เอา outDir ไป deploy ที่ server