Pengenalan bundler

Vite, alasan bundling ada, dan dev server.

Daftar isi

Modul ES membuat kode yang besar terbagi rapi ke dalam banyak berkas kecil, tetapi browser memuat setiap berkas itu lewat jaringan. Vite adalah bundler, yaitu perkakas yang menggabungkan modul-modul tersebut menjadi berkas siap muat. Vite sekaligus menyediakan dev server, yaitu server lokal tempat proyek dijalankan saat dikembangkan. Topik ini menjelaskan alasan bundling tetap ada meski browser modern sudah mendukung modul, cara kerja dev server dan pembaruan modulnya, konfigurasi minimal Vite, sampai build untuk produksi.

Mengapa bundling tetap dibutuhkan#

Browser mengunduh setiap berkas modul lewat permintaan HTTP tersendiri. Halaman dengan tiga puluh berkas modul mengirim tiga puluh permintaan, dan permintaan itu berantai karena browser baru dapat meminta sebuah modul setelah menemukan baris import yang merujuknya. Setiap lapisan import menambah satu putaran waktu tunggu jaringan, dan pada koneksi yang lambat antrean semacam ini terasa jelas. Sebelum modul ES ada, masalah yang sama dijawab dengan menumpuk banyak tag script yang urutannya dijaga secara manual. Satu variabel yang salah taruh cukup untuk menggagalkan seluruh halaman.

Selain jumlah permintaan, ada soal kompatibilitas dan efisiensi. Browser lama tidak mengenal import sama sekali, sedangkan browser modern tidak memangkas kode yang tidak terpakai. Bundler menjawab semuanya sekaligus, modul-modul digabung menjadi sedikit berkas, sintaks yang belum didukung diterjemahkan, dan kode yang tidak pernah diimpor dibuang. Karena itu aplikasi nyata hampir selalu memakai bundel, meskipun tag <script type="module"> sudah cukup untuk halaman kecil tanpa build.

Dev server dan HMR#

Menulis kode di dalam proyek ber-bundler berarti bekerja bersama dev server. Dev server adalah server HTTP lokal yang menyajikan berkas proyek pada alamat seperti http://localhost:5173, sehingga halaman terbuka di browser dengan seluruh kemampuan modulnya. Yang membedakannya dari penyaji berkas biasa adalah pemantauan. Dev server mengamati berkas yang disunting lalu menerapkan hot module replacement atau HMR, yakni penggantian modul yang berubah langsung di browser tanpa memuat ulang seluruh halaman. Isian form dan state lain tetap bertahan karena halamannya tidak pernah dibuka ulang.

bash

# tidak-dijalankan
# perintah pembuatan proyek dan pemasangannya mengunduh package dari registry npm
npm create vite@latest aplikasi-catatan
cd aplikasi-catatan
npm install
npm run dev

npm create vite menyiapkan proyek baru dari templat resmi, lengkap dengan package.json yang sudah berisi script dev dan build. Perintah npm run dev kemudian menjalankan dev server dan menampilkan alamat lokalnya di terminal, biasanya http://localhost:5173. Menutup dev server cukup dengan menekan Ctrl+C di terminal.

Konfigurasi minimal Vite#

Vite dapat dipakai tanpa berkas konfigurasi apa pun karena nilai bawaannya sudah sesuai kebutuhan umum. Berkas vite.config.js diperlukan begitu proyek menuntut penyesuaian, dan bentuknya sama seperti modul ESM biasa.

js vite.config.js

// tidak-dijalankan
// Konfigurasi minimal Vite.
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    port: 5173,
  },
  build: {
    outDir: "dist",
  },
});

Fungsi defineConfig tidak mengubah isi konfigurasi, ia hanya membantu editor menampilkan petunjuk tipe saat konfigurasi disunting. Kunci server mengatur dev server, di sini portnya ditetapkan eksplisit, sedangkan kunci build mengatur hasil build dengan outDir sebagai folder tempat hasil akhir ditulis. Kedua nilai itu memang sama dengan bawaannya, contoh ini ditulis agar bentuk berkasnya terlihat. Penyesuaian nyata biasanya bertambah seiring kebutuhan proyek, misalnya alias jalur atau plugin.

Build untuk produksi#

Dev server melayani pekerjaan harian, sedangkan pengunjung menerima hasil build. Perintah npm run build menuliskan hasil produksi ke folder dist/, dan isinya berbeda karakter dari berkas sumber. Kode dimampatkan (minify) dengan membuang spasi dan menyingkat nama variabel, modul yang tidak pernah diimpor dibuang lewat tree shaking, dan nama berkasnya diberi hash konten seperti aplikasi-Bx7q8F.js. Karena nama berkasnya berubah setiap kali kode berubah, browser mengunduh versi terbaru alih-alih memakai cache lamanya, dan itulah alasan penamaan semacam ini dipakai. Hasil build pun dapat diperiksa sebelum diunggah, karena perintah vite preview menyajikan isi dist/ pada alamat lokal seperti versi produksi yang sesungguhnya.

Alur keduanya berdampingan pada diagram berikut, satu jalur menuju browser pengembang melalui dev server, satu jalur menuju folder dist untuk diserahkan ke hosting.

Dua jalur keluar proyek Vite, dev server untuk pengembangan dan folder dist untuk produksi

Kapan bundler diperlukan#

Halaman yang terdiri atas dua atau tiga berkas tanpa package pihak ketiga tidak menuntut bundler, satu tag <script type="module"> sudah menjalankannya. Bundler menjadi kebutuhan yang jelas ketika jumlah modul membengkak, ketika proyek memakai framework yang berkasnya perlu diproses, atau ketika TypeScript ikut dipakai. Pada titik itu dev server dan build bukan lagi kemewahan. Dev server menjaga umpan balik penulisan tetap cepat, sedangkan build memastikan yang diterima pengunjung berukuran kecil dan tersimpan cache dengan benar. Vite dipakai sebagai contoh pada topik ini karena menjadi pilihan bawaan pada banyak templat proyek modern, tetapi gagasan bundling, dev server, dan build berlaku sama pada bundler lain. Menentukan momen pemasangannya kembali ke ukuran proyek, bukan mengikuti mode.

Ringkasan#

Browser memuat tiap berkas modul lewat permintaan tersendiri, sedangkan bundler menggabungkannya menjadi sedikit berkas siap muat.
Dev server menyajikan proyek di localhost dan menerapkan HMR, yaitu penggantian modul yang berubah tanpa memuat ulang halaman.
Konfigurasi Vite hidup di vite.config.js berbentuk modul ESM, dan proyek kecil dapat berjalan tanpa berkas itu.
Hasil build pada dist/ sudah dimampatkan, dibersihkan lewat tree shaking, dan dinamai dengan hash konten agar cache tetap aman.

Referensi#

Getting Started — Vite — panduan resmi memulai proyek Vite beserta dev servernya.
Why Vite — Vite — penjelasan resmi alasan bundling dan keterbatasan modul tanpa bundel.
Command Line Interface — Vite — daftar perintah CLI Vite termasuk dev dan build.
Build Options — Vite — opsi build termasuk outDir dan minify.