Belajar Frontend - Build Tools & Bundlers

#Pendahuluan

Sepanjang series, kalian menulis kode dalam file kecil dengan TypeScript, JSX, dan CSS modern. Tapi browser tidak mengenali JSX, dan ratusan file tidak bisa dimuat satu per satu secara efisien. Di sinilah build tools & bundlers bekerja — mesin yang mengubah kode sumber menjadi artefak yang bisa dilayani browser.

Episode 14 menjawab dua pertanyaan yang akan kalian temui setiap hari: mengapa ada npm run dev dan npm run build? dan apa yang sebenarnya terjadi di keduanya? Memahami pipeline build membuat kalian tidak panik saat error build, dan tahu di mana harus mengoptimasi.

#Apa yang Dilakukan Bundler

Bundler (Vite, Webpack, Turbopack, esbuild) melakukan beberapa pekerjaan:

Tugas	Contoh
Transpile	JSX → JS, TypeScript → JS, sintaks modern → sintaks browser
Bundle	Ratusan modul → beberapa file optimasi
Tree-shaking	Buang kode yang tidak pernah dipakai
Minify	Persingkat variabel & buang whitespace
Asset handling	Gambar, CSS, font → file statis + hash
Dev server	Reload cepat (HMR) saat kode berubah

Hasil akhirnya terlihat di folder dist/ atau .next/ — artefak yang di-deploy.

#Vite: Bundler Modern Utama

Vite (pembangun dari Vue, kini dipakai luas untuk React murni) menggabungkan dua mesin:

esbuild — transpiler + bundler super cepat (ditulis Go) untuk mode dev dan transformasi.
Rollup — bundler produksi yang matang dengan tree-shaking terbaik.

Keunggulan Vite di dev: native ES modules. Vite tidak mengemas semua file di awal — ia menyajikan modul sesuai permintaan browser, sehingga startup instan bahkan di proyek besar.

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true,        // debug produksi lebih mudah
    target: "es2022",
    chunkSizeWarningLimit: 600,
  },
});

#Turbopack dan Alternatif

Turbopack adalah bundler dari Vercel (ditulis Rust, pewaris Webpack) yang dipakai Next.js untuk dev sejak 13.4 dan kini juga untuk build. Kecepatannya didapat dari incremental computation: Turbopack hanya mengerjakan ulang bagian yang berubah.

Bundler	Bahasa	Dipakai di	Karakter
Vite (esbuild+Rollup)	Go/JS	React murni, Vue, Svelte	Cepat, DX terbaik untuk SPA
Turbopack	Rust	Next.js	Teroptimasi untuk RSC & ekosistem Next
Webpack	JS	Legacy	Konfigurasi besar, dulu standar
esbuild	Go	Vite, banyak tooling	Sangat cepat, fitur lebih sedikit
Bun	Zig	Bun runtime	Bundler+test+runtime sekaligus

Aturan praktis 2026: proyek baru pakai Vite untuk SPA React murni, dan ikuti bundler bawaan meta-framework (Next.js → Turbopack) untuk aplikasi penuh.

Note

Kalian tidak perlu paham internals setiap bundler — tetapi perlu tahu cara membaca error build, di mana mengonfigurasi alias dan env, serta kapan memecah bundle. Fokus praktis di episode ini: mengenali pipeline dan menyetel build untuk kebutuhan nyata.

#Pipeline Build: Dev vs Produksi

	Dev	Produksi
Tujuan	Kecepatan iterasi	Kecepatan & ukuran runtime
Transform	Per-module, on-demand	Bundle penuh + minify
Source map	Penuh	Diperkecil/opsional
Env	`.env.local`	`.env.production`
Server	Dev server + HMR	Static files + edge/cache

Di Next.js pipeline serupa: next dev vs next build && next start. Kode yang "berjalan di dev" belum tentu benar di produksi — selalu uji build sebelum release.

#Setup Build Optimal untuk TokoKita

Beberapa keputusan yang berdampak:

Alias path — pendek dan konsisten: @/ → src/ (bisa di vite.config.ts dan tsconfig.json).
Pecah vendor chunk — library besar (chart, editor) dipisah agar cache lama terpakai.
Env handling — variabel VITE_/NEXT_PUBLIC_ hanya yang aman untuk publik.
CI build — jalankan build sekali di pipeline, bukan di mesin masing-masing.

Setup & build bersih

bun install --frozen-lockfile
bun run build

Vendor splitting di Vite

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        react: ["react", "react-dom"],
        charts: ["recharts"],
      },
    },
  },
},

#Common Pitfalls

Kesalahan	Dampak	Perbaikan
Build hanya di dev	Error muncul saat deploy	Jalankan build di CI
Import wildcard (`import *`)	Tree-shaking gagal	Import named
Satu bundle raksasa	LCP memburuk	manualChunks + dynamic import
Env bocor ke publik	Secret terbaca	Hanya prefix publik
Abaikan warning size	Bundle membengkak pelan-pelan	Pantaunya di CI

#Penutup

Inti yang harus dibawa pulang:

Bundler mentranspile, menggabungkan, dan mengoptimasi kode menjadi artefak produksi.
Vite (esbuild+Rollup) untuk SPA; Turbopack bawaan Next.js untuk aplikasi penuh.
Dev dan produksi adalah dua pipeline berbeda — selalu uji build.
Chunk splitting, alias, dan env handling adalah keputusan build yang berdampak langsung pada performa.

Di episode 15 selanjutnya kita kembali ke kualitas manusia: accessible & inclusive design — ARIA, keyboard navigation, contrast, dan automated a11y testing, agar TokoKita benar-benar bisa dipakai semua orang. Sampai jumpa di episode 15!