Frontend Academy · Pelajaran

Vite: Sistem Plugin dan Mode SSR

Tulis plugin Vite dengan hook transform dan load, integrasikan plugin pihak ketiga, dan konfigurasikan Vite untuk rendering sisi server dengan opsi ssrBuild.

Vite: Sistem Plugin dan Mode SSR adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Vite Menang

Vite (bahasa Prancis untuk 'cepat') dibuat oleh Evan You. Dalam pengembangan, Vite menyajikan berkas sumber tanpa bundel melalui modul ES natif—waktu mulai awal berlangsung seketika. Produksi menggunakan Rollup untuk membuat bundel. Pengalaman pengembangnya jauh lebih cepat daripada Webpack.

Cara Kerja Server Pengembangan Vite

Peramban modern mendukung modul ES secara natif. Vite menyajikan berkas sumber apa adanya dan mengubah TypeScript/JSX sesuai permintaan. Tanpa pembuatan bundel, tidak ada waktu tunggu saat mulai.

Penggantian Modul Panas

HMR mengganti modul tanpa memuat ulang halaman. HMR Vite dibangun di atas ESM dan jauh lebih cepat daripada milik Webpack. Sebagian besar kerangka kerja (React, Vue, Svelte) terhubung dengannya untuk memperbarui komponen tanpa kehilangan status.

Dasar-Dasar Konfigurasi Vite

Konfigurasikan melalui vite.config.ts di akar proyek.

// 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']
        }
      }
    }
  }
});

Sistem Pengaya

Pengaya Vite merupakan pengembangan dari pengaya Rollup, dengan pengait tambahan untuk server pengembangan. Pengaya berupa objek (atau fungsi yang mengembalikan objek) dengan pengait bernama.

// 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()] };

Pengait Utama

transform(code, id): ubah isi berkas (misalnya, kompilasikan MDX atau masukkan env). load(id): sediakan isi untuk modul virtual. resolveId(source): sesuaikan resolusi modul. configureServer(server): tambahkan middleware ke server pengembangan.

Pengaya Populer

@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (impor SVG sebagai komponen). vite-plugin-checker (TypeScript / ESLint dalam lapisan tampilan). vite-plugin-mkcert (HTTPS lokal).

Mode SSR Vite

Vite mendukung rendering sisi server dengan primitif tingkat rendah. Kerangka kerja seperti Nuxt, SvelteKit, Remix, dan Astro dibangun di atasnya. Untuk SSR kustom, ikuti panduan 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));
  });

Membangun untuk SSR

Dua pembangunan: klien dan server. vite build --ssr entry-server.ts menghasilkan bundel server.

// 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"
}

Variabel Lingkungan

import.meta.env.MODE bernilai 'development' atau 'production'. Variabel kustom dengan awalan VITE_ akan diekspos.

Penanganan CSS

Vite menangani CSS, Modul CSS (foo.module.css), PostCSS (secara otomatis menemukan postcss.config.js), dan praprosesor CSS (Sass, Less, Stylus) secara langsung. Sisipkan CSS kritis melalui pengaya.

Vite vs Webpack vs Turbopack

Vite: pengembangan natif ESM, pembangunan dengan Rollup, dan ekosistem luas. Webpack: raksasa lama yang lebih mudah dikonfigurasi, tetapi lebih lambat. Turbopack (Vercel): berbasis Rust, kompatibel dengan Webpack, dan saat ini disertakan dalam Next. Untuk proyek baru: gunakan Vite untuk SPA, serta Next/Turbopack untuk proyek khusus Next.

Pemeriksaan Singkat

Mengapa server pengembangan Vite memulai jauh lebih cepat daripada Webpack?

Ringkasan: Vite

Server pengembangan berbasis ESM: mulai seketika dan HMR cepat. Produksi menggunakan Rollup. Pengaya memperluas pengait Rollup (transform, load, resolveId) serta pengait khusus Vite (configureServer, handleHotUpdate). Mode SSR menggunakan createServer + middlewareMode; lakukan pembangunan dengan --ssr. Tersedia pengaya PWA, MDX, SVGR, dan mkcert. Gunakan import.meta.env untuk variabel lingkungan. Modul CSS, PostCSS, dan praprosesor sudah tersedia.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Vite: Sistem Plugin dan Mode SSR” gratis?

Ya — teks lengkap “Vite: Sistem Plugin dan Mode SSR” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Vite: Sistem Plugin dan Mode SSR”?

Tulis plugin Vite dengan hook transform dan load, integrasikan plugin pihak ketiga, dan konfigurasikan Vite untuk rendering sisi server dengan opsi ssrBuild. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Vite: Sistem Plugin dan Mode SSR” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy