Frontend Academy · บทเรียน

Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์

เริ่มต้นโปรเจกต์ Vite ใช้เซิร์ฟเวอร์พัฒนา HMR ที่อัปเดตทันที เรียกใช้คำสั่ง build และดูตัวอย่างผลลัพธ์สำหรับใช้งานจริง

บทเรียน 3 จาก 413 ขั้นตอน

Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

Vite คืออะไร

Vite เป็นเครื่องมือสร้างส่วนหน้ารุ่นใหม่ที่สร้างโดย Evan You (ผู้สร้าง Vue) โดยมีเซิร์ฟเวอร์สำหรับการพัฒนาที่เร็วมากผ่าน ESM แบบเนทีฟและ esbuild พร้อมการสร้างสำหรับใช้งานจริงที่ขับเคลื่อนด้วย Rollup

การสร้างโปรเจกต์ Vite

npm create vite@latest สร้างโครงร่างโปรเจกต์ใหม่ ให้เลือกเฟรมเวิร์กของคุณ (Vanilla, React, Vue, Svelte, Preact หรือ Lit) และรูปแบบ (JS หรือ TS) จากนั้นโปรเจกต์ก็พร้อมใช้งานทันที โดยไม่ต้องตั้งค่าใด ๆ

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

เซิร์ฟเวอร์พัฒนา — เริ่มต้นทันที

Vite จะไม่รวมชุดโค้ดในระหว่างการพัฒนา แต่จะแสดงแต่ละไฟล์เป็นโมดูล ESM แบบเนทีฟ เบราว์เซอร์จะนำเข้าไฟล์เหล่านั้นโดยตรง การไม่รวมชุดโค้ดทำให้เริ่มต้นแบบเย็นได้ภายในเวลาไม่ถึง 100 มิลลิวินาทีโดยไม่ขึ้นกับขนาดของโปรเจกต์ และจะคอมไพล์ใหม่เฉพาะไฟล์ที่เปลี่ยนแปลงระหว่าง HMR

HMR — การแทนที่โมดูลแบบทันที

HMR ของ Vite จะแทนที่เฉพาะโมดูลที่เปลี่ยนแปลงในแอปที่กำลังทำงานอยู่ โดยไม่โหลดทั้งหน้าใหม่ สำหรับ React ที่ใช้ @vitejs/plugin-react สถานะของคอมโพเนนต์จะคงอยู่ระหว่าง HMR การเปลี่ยนแปลงจะแสดงผลภายในเวลาไม่ถึง 50 มิลลิวินาที

vite.config.js / vite.config.ts

Vite ตั้งค่าผ่านไฟล์ vite.config.ts ตัวเลือกที่ใช้บ่อย ได้แก่ ปลั๊กอิน นามแฝงสำหรับการแก้เส้นทาง พอร์ตของเซิร์ฟเวอร์ พร็อกซีสำหรับการเรียก API และไดเรกทอรีเอาต์พุตของการสร้าง

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

ตัวแปรสภาพแวดล้อม

Vite เปิดเผยตัวแปรสภาพแวดล้อมที่มีคำนำหน้า VITE_ ผ่าน import.meta.env ให้จัดเก็บตัวแปรเหล่านี้ไว้ใน .env .env.development และ .env.production อย่าใช้คำนำหน้า VITE_ กับข้อมูลลับ เพราะข้อมูลเหล่านั้นจะถูกรวมไว้ในชุดโค้ดของเบราว์เซอร์

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — การสร้างสำหรับใช้งานจริง

npm run build เรียกใช้ Rollup เบื้องหลังเพื่อรวมชุดโค้ด ลดขนาด และตัดโค้ดที่ไม่จำเป็นออกจากแอป เอาต์พุตจะอยู่ในโฟลเดอร์ dist/ และพร้อมสำหรับการนำไปใช้งาน

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

การวิเคราะห์ชุดโค้ด

ใช้ vite-bundle-visualizer หรือ rollup-plugin-visualizer เพื่อสร้างแผนผังต้นไม้ของเนื้อหาในชุดโค้ด ซึ่งช่วยระบุการขึ้นต่อกันที่มีขนาดใหญ่เกินไปและโอกาสในการโหลดแบบช้า

npm run preview

npm run preview ให้บริการชุดโค้ดสำหรับใช้งานจริงจาก dist/ ในเครื่องของคุณ ใช้คำสั่งนี้เพื่อตรวจสอบชุดโค้ดสำหรับใช้งานจริงก่อนนำไปปรับใช้ เพราะจะตรวจพบปัญหาที่เกิดขึ้นเฉพาะเมื่อแอปไม่ได้ทำงานในโหมดพัฒนา

การแบ่งชุดโค้ดใน Vite

คำสั่ง import() แบบไดนามิกจะสร้างชังก์แยกโดยอัตโนมัติ เส้นทางแบบช้าของ React Router และ defineAsyncComponent ของ Vue ก็ทำให้เกิดการแบ่งชุดโค้ดเช่นกัน ให้ตรวจสอบขนาดของชังก์ในเอาต์พุตการสร้าง

Vite สำหรับไลบรารี

โหมดไลบรารีของ Vite (build.lib) ใช้สร้างไลบรารี npm โดยส่งออกทั้งรูปแบบ ESM และ CJS ให้ระบุรายการภายนอกเพื่อป้องกันการรวมการขึ้นต่อกันของเพียร์ เช่น React

ตรวจสอบความเข้าใจ

เหตุใดเซิร์ฟเวอร์พัฒนาของ Vite จึงเร็วกว่าเซิร์ฟเวอร์ของ webpack?

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: Vite

npm create vite@latest สร้างโครงร่างได้ทันที เซิร์ฟเวอร์พัฒนาใช้ ESM แบบเนทีฟ จึงไม่ต้องรวมชุดโค้ดและรองรับ HMR ได้ทันที ใช้ vite.config.ts สำหรับปลั๊กอิน นามแฝง และพร็อกซี ใช้คำนำหน้า VITE_ สำหรับตัวแปรสภาพแวดล้อมที่ปลอดภัยต่อเบราว์เซอร์ npm run build สร้างชุดโค้ด Rollup ที่ปรับให้เหมาะสม และ npm run preview ใช้ทดสอบชุดโค้ดสำหรับใช้งานจริงในเครื่อง

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์”

เริ่มต้นโปรเจกต์ Vite ใช้เซิร์ฟเวอร์พัฒนา HMR ที่อัปเดตทันที เรียกใช้คำสั่ง build และดูตัวอย่างผลลัพธ์สำหรับใช้งานจริง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ES Modules: import, export และ dynamic import
npm และ package.json: dependencies และ scripts
Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์
แนวคิดการรวมโค้ด: tree shaking และ code splitting

← กลับไปที่ Frontend Academy