Frontend Academy · บทเรียน

Vite: ระบบปลั๊กอินและโหมด SSR

เขียนปลั๊กอิน Vite ด้วยฮุก transform และ load ผสานปลั๊กอินจากบุคคลที่สาม และตั้งค่า Vite สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วยตัวเลือก ssrBuild

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

ทำไม Vite จึงชนะ

Vite (ภาษาฝรั่งเศสที่แปลว่า “เร็ว”) สร้างโดย Evan You ในโหมดพัฒนา Vite ให้บริการไฟล์ต้นฉบับโดยไม่รวมเป็นชุดผ่าน ES modules แบบเนทีฟ จึงเริ่มต้นแบบเย็นได้ทันที ส่วน production ใช้ Rollup สำหรับรวมชุดโค้ด ประสบการณ์การพัฒนาจึงเร็วกว่า Webpack อย่างเห็นได้ชัด

เซิร์ฟเวอร์พัฒนาของ Vite ทำงานอย่างไร

เบราว์เซอร์สมัยใหม่รองรับ ES modules โดยกำเนิด Vite ให้บริการไฟล์ต้นฉบับตามเดิม และแปลง TypeScript/JSX ตามต้องการ เมื่อไม่ต้องรวมชุดโค้ด ก็ไม่ต้องรอการเริ่มต้นแบบเย็น

การแทนที่โมดูลแบบร้อน

HMR จะแทนที่โมดูลโดยไม่โหลดหน้าใหม่ HMR ของ Vite สร้างขึ้นบน ESM และเร็วกว่า HMR ของ Webpack มาก เฟรมเวิร์กส่วนใหญ่ เช่น React, Vue และ Svelte เชื่อมต่อกับระบบนี้เพื่ออัปเดตระดับคอมโพเนนต์โดยยังคงสถานะไว้

พื้นฐานการกำหนดค่า Vite

กำหนดค่าผ่าน vite.config.ts ที่รากของโครงการ

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

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

ระบบปลั๊กอิน

ปลั๊กอินของ Vite เป็นส่วนขยายของปลั๊กอิน Rollup โดยมีฮุกเพิ่มเติมสำหรับเซิร์ฟเวอร์พัฒนา ปลั๊กอินคือออบเจ็กต์ (หรือฟังก์ชันที่ส่งคืนออบเจ็กต์) ซึ่งมีฮุกที่ตั้งชื่อไว้

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

ฮุกสำคัญ

transform(code, id): แก้ไขเนื้อหาไฟล์ (เช่น compile MDX หรือแทรก env) load(id): จัดเตรียมเนื้อหาสำหรับโมดูลเสมือน resolveId(source): ปรับแต่งการค้นหาโมดูล configureServer(server): เพิ่มมิดเดิลแวร์ให้เซิร์ฟเวอร์พัฒนา

ปลั๊กอินยอดนิยม

@vitejs/plugin-react (React + Fast Refresh) @vitejs/plugin-vue vite-plugin-pwa vite-plugin-svgr (นำเข้า SVG เป็นคอมโพเนนต์) vite-plugin-checker (TypeScript / ESLint ในโอเวอร์เลย์) vite-plugin-mkcert (HTTPS ในเครื่อง)

โหมด SSR ของ Vite

Vite รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วยองค์ประกอบพื้นฐานระดับล่าง เฟรมเวิร์กอย่าง Nuxt, SvelteKit, Remix และ Astro สร้างต่อยอดจากระบบนี้ สำหรับ SSR แบบกำหนดเอง ให้ทำตามคู่มือ SSR ของ Vite

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

สร้างสำหรับ SSR

มีการสร้างสองแบบ ได้แก่ ฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์ vite build --ssr entry-server.ts จะสร้างชุดรวมโค้ดฝั่งเซิร์ฟเวอร์

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

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

import.meta.env.MODE มีค่าเป็น 'development' หรือ 'production' ตัวแปรที่กำหนดเองซึ่งมีคำนำหน้า VITE_ จะถูกเปิดเผย

การจัดการ CSS

Vite จัดการ CSS, CSS Modules (foo.module.css), PostCSS (ค้นหา postcss.config.js โดยอัตโนมัติ) และตัวประมวลผลล่วงหน้า CSS (Sass, Less, Stylus) ได้ทันที แทรก CSS ที่สำคัญผ่านปลั๊กอิน

Vite กับ Webpack และ Turbopack

Vite: การพัฒนาแบบเนทีฟด้วย ESM, การสร้างด้วย Rollup และระบบนิเวศกว้างขวาง Webpack: ระบบขนาดใหญ่แบบดั้งเดิม ปรับแต่งได้มากกว่าแต่ช้ากว่า Turbopack (Vercel): สร้างด้วย Rust, ใช้งานร่วมกับ Webpack ได้ และปัจจุบันรวมอยู่กับ Next สำหรับโครงการใหม่ ให้ใช้ Vite สำหรับ SPA และใช้ Next/Turbopack สำหรับโครงการที่เฉพาะกับ Next

ตรวจสอบอย่างรวดเร็ว

เหตุใดการเริ่มต้นแบบเย็นของเซิร์ฟเวอร์พัฒนา Vite จึงเร็วกว่า Webpack มาก

สรุป: Vite

เซิร์ฟเวอร์พัฒนาที่ใช้ ESM: เริ่มต้นแบบเย็นได้ทันทีและมี HMR ที่รวดเร็ว ใน production ใช้ Rollup ปลั๊กอินขยายฮุกของ Rollup (transform, load, resolveId) และฮุกเฉพาะของ Vite (configureServer, handleHotUpdate) โหมด SSR ใช้ createServer + middlewareMode และสร้างด้วย --ssr มีปลั๊กอินสำหรับ PWA, MDX, SVGR และ mkcert ใช้ import.meta.env สำหรับตัวแปรสภาพแวดล้อม พร้อม CSS Modules, PostCSS และตัวประมวลผลล่วงหน้าในตัว

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

บทเรียน “Vite: ระบบปลั๊กอินและโหมด SSR” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Vite: ระบบปลั๊กอินและโหมด SSR”

เขียนปลั๊กอิน Vite ด้วยฮุก transform และ load ผสานปลั๊กอินจากบุคคลที่สาม และตั้งค่า Vite สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วยตัวเลือก ssrBuild คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “Vite: ระบบปลั๊กอินและโหมด SSR” ใช้เวลานานแค่ไหน

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

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

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

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

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