Frontend Academy · Pelajaran

Vite: server pengembangan dan build

Mulai proyek Vite, gunakan server pengembangan HMR yang instan, jalankan perintah build, dan pratinjau output produksi.

Vite: server pengembangan dan build adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Apa Itu Vite?

Vite adalah alat pembangunan frontend generasi berikutnya yang dibuat oleh Evan You (pencipta Vue). Vite menyediakan server pengembangan yang sangat cepat menggunakan ESM native dan esbuild, serta pembangunan produksi yang didukung Rollup.

Membuat Proyek Vite

npm create vite@latest membuat kerangka proyek baru. Pilih framework Anda (Vanilla, React, Vue, Svelte, Preact, Lit) dan variannya (JS atau TS). Proyek langsung siap digunakan — tidak diperlukan konfigurasi.

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

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

Server Pengembangan — Mulai Seketika

Vite tidak menggabungkan modul saat pengembangan. Vite menyajikan setiap berkas sebagai modul ESM native. Peramban mengimpornya secara langsung. Tanpa penggabungan, proses mulai dingin berlangsung kurang dari 100 md, terlepas dari ukuran proyek. Hanya berkas yang berubah yang dikompilasi ulang saat HMR.

HMR — Penggantian Modul Langsung

HMR milik Vite hanya mengganti modul yang berubah dalam aplikasi yang sedang berjalan tanpa memuat ulang halaman sepenuhnya. Untuk React dengan @vitejs/plugin-react, status komponen dipertahankan selama HMR. Perubahan tampil dalam waktu kurang dari 50 md.

vite.config.js / vite.config.ts

Vite dikonfigurasi dengan berkas vite.config.ts. Opsi umum meliputi plugin, alias resolve, port server, proxy untuk panggilan API, dan direktori keluaran build.

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

Variabel Lingkungan

Vite menyediakan variabel lingkungan yang diawali VITE_ melalui import.meta.env. Simpan variabel tersebut di .env, .env.development, dan .env.production. Jangan pernah mengawali rahasia dengan VITE_ — semuanya akan disertakan dalam bundel peramban.

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

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

npm run build — Pembuatan untuk Produksi

npm run build secara internal memanggil Rollup untuk menggabungkan, meminifikasi, dan menghapus kode mati dari aplikasi. Keluarannya berada di folder dist/ dan siap diterapkan.

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

Menganalisis Bundel

Gunakan vite-bundle-visualizer atau rollup-plugin-visualizer untuk membuat peta visual isi bundel. Hal ini membantu menemukan dependensi yang terlalu besar dan peluang untuk pemuatan sesuai kebutuhan.

npm run preview

npm run preview menyajikan hasil build produksi dist/ secara lokal. Gunakan perintah ini untuk memverifikasi hasil build produksi sebelum menerapkannya — perintah ini menemukan masalah yang hanya muncul ketika aplikasi tidak berada dalam mode pengembangan.

Pemisahan Kode di Vite

Pernyataan import() dinamis secara otomatis membuat chunk terpisah. Rute React Router yang dimuat sesuai kebutuhan dan defineAsyncComponent milik Vue juga memicu pemisahan. Periksa ukuran chunk dalam keluaran build.

Vite untuk Pustaka

Mode pustaka Vite (build.lib) membuat pustaka npm dengan keluaran dalam format ESM dan CJS. Tentukan daftar eksternal untuk mencegah dependensi rekan seperti React ikut digabungkan.

Pemeriksaan Singkat

Mengapa server pengembangan Vite lebih cepat daripada server webpack?

Ringkasan: Vite

npm create vite@latest membuat kerangka proyek secara instan. Server pengembangan menggunakan ESM native — tanpa penggabungan, HMR seketika. vite.config.ts digunakan untuk plugin, alias, dan proxy. Awalan VITE_ digunakan untuk variabel lingkungan yang aman bagi peramban. npm run build menghasilkan bundel Rollup yang dioptimalkan. npm run preview menguji hasil build produksi secara lokal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Vite: server pengembangan dan build” gratis?

Ya — teks lengkap “Vite: server pengembangan dan build” 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: server pengembangan dan build”?

Mulai proyek Vite, gunakan server pengembangan HMR yang instan, jalankan perintah build, dan pratinjau output produksi. 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 3 dari 4.

Berapa lama pelajaran “Vite: server pengembangan dan build” 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

Modul ES: import, export, dan dynamic import
npm dan package.json: dependensi, skrip
Vite: server pengembangan dan build
Konsep Bundling: tree shaking dan pemisahan kode

← Kembali ke Frontend Academy