vue 3 build deploy

📦 ARTIKEL 16 DARI 16 — SERI VUE FROM ZERO TO ZORRO

Build & Deploy Vue 3 —
Dari Laptop ke Internet

Cara deploy aplikasi Vue 3 ke Vercel atau Netlify — panduan lengkap dari npm run build sampai aplikasimu live di internet.

#DeployVue3 #BuildVue3 #Vue3keVercel #BelajarVue #VueFrontEnd

⏱️ Estimasi baca: 12 menit

🎯 Level: Pemula–Menengah

📅 Tahun: 2026

Sudah capek-capek belajar Vue 3, bikin komponen, nulis logika, dan akhirnya aplikasimu jalan mulus di localhost:5173. Tapi kalau ditanya: "Eh, bisa dilihat orang lain nggak?" — kamu malah bengong. Familiar? 😅

Ini artikel terakhir dari seri 16 Artikel Belajar Vue: Vue from Zero to Zorro, dan kita akan tutup seri ini dengan cara yang paling memuaskan: deploy vue 3 ke internet sungguhan. Kita akan bahas cara build vue 3 jadi file statis yang siap upload, lalu deploy ke dua platform hosting gratis terpopuler — Vercel dan Netlify. Dari laptop ke internet, step by step, tanpa perlu bayar hosting!

📐 KONSEP KUNCI

Build = proses mengubah source code Vue (banyak file .vue, .js, .css) menjadi file HTML/JS/CSS statis yang bisa dibuka browser tanpa server backend. Deploy = proses mengunggah file-file itu ke server publik agar bisa diakses siapa saja di seluruh dunia.

🏗️ Memahami Proses Build Vue 3: Dari Kode ke File Statis

Bayangkan kamu punya resep rahasia masakan (source code Vue 3). Sebelum bisa dijual ke restoran (internet), kamu harus memasak dulu sampai jadi hidangan siap saji (build output). Proses itulah yang dilakukan perintah npm run build.

Vite — build tool default Vue 3 — akan melakukan beberapa hal sekaligus: bundling (menggabungkan ratusan file jadi beberapa file saja), minifikasi (menghapus spasi dan komentar), tree-shaking (membuang kode yang tidak dipakai), dan code splitting (memecah bundle agar loading lebih cepat). Hasilnya masuk ke folder /dist.

💡 TIPS

Setelah build, buka folder dist/ dan lihat isinya. Kamu akan menemukan index.html, folder assets/ berisi JS dan CSS yang sudah diminifikasi. Itulah yang nanti diupload ke hosting!

📋 LANGKAH BUILD VUE 3

1

Pastikan project Vue 3 kamu berjalan normal

Jalankan dev server dulu, pastikan tidak ada error sebelum build.

npm run dev

2

Jalankan perintah build

Ini perintah utama untuk build vue 3 menggunakan Vite.

npm run build

3

Preview hasil build secara lokal

Sebelum deploy, cek dulu apakah hasil build berjalan normal.

npm run preview
# Buka http://localhost:4173

🔥 FAKTA MENARIK

Vite menggunakan Rollup di balik layar untuk proses build production. Hasilnya jauh lebih kecil dibanding Webpack — ukuran bundle bisa 30–50% lebih ringan untuk project yang sama!

🚀 Deploy Vue 3 ke Vercel: Cara Termudah dan Tercepat

Vercel adalah pilihan favorit para developer Vue dan React karena sangat pintar mendeteksi framework secara otomatis. Kamu tidak perlu konfigurasi manual — cukup hubungkan GitHub repo, dan Vercel akan tahu sendiri cara build dan deploy aplikasimu. Inilah cara deploy vue 3 ke vercel yang paling direkomendasikan.

⚡ CARA A — DEPLOY VIA GITHUB (DIREKOMENDASIKAN)

1

Push project ke GitHub

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/username/repo.git
git push -u origin main

2

Buka vercel.com dan login dengan akun GitHub

Klik "Add New → Project" lalu pilih repo yang baru kamu push.

3

Konfigurasi otomatis sudah terisi!

Vercel mendeteksi Vite secara otomatis. Build command: npm run build, Output dir: dist.

4

Klik "Deploy" — selesai! 🎉

Dalam 1–2 menit, aplikasimu live di namaproject.vercel.app.

⚡ INSIGHT PENTING

Setiap kali kamu git push ke branch main, Vercel otomatis melakukan re-deploy! Ini disebut Continuous Deployment. Kamu tidak perlu deploy manual setiap ada perubahan — sungguh workflow yang ajaib untuk developer modern.

Satu hal penting yang sering dilupakan pemula: jika aplikasimu di-deploy ke sub-folder (misalnya di GitHub Pages), kamu perlu set base di vite.config.js. Untuk Vercel, ini tidak diperlukan karena deploy di root domain.

📄 vite.config.js — konfigurasi untuk Vercel (default)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // base: '/' sudah default, tidak perlu diubah untuk Vercel
})

🌐 Deploy Vue 3 ke Netlify: Alternatif Handal dengan Fitur Lengkap

Kalau Vercel adalah si cepat dan minimalis, Netlify adalah saudaranya yang lebih banyak fitur: ada form handling bawaan, A/B testing, dan edge functions. Tidak kalah mudah untuk deploy vue 3, dan juga gratis untuk project personal!

⚡ CARA B — NETLIFY DRAG & DROP (TERCEPAT UNTUK TESTING)

1

Build dulu project kamu

npm run build

2

Buka netlify.com/drop

Kamu akan melihat zona drop besar di tengah halaman.

3

Drag folder dist/ ke sana — done!

Netlify langsung deploy dan memberimu URL publik. Tidak perlu akun!

Untuk deployment yang lebih profesional dengan auto-deploy, kamu bisa connect Netlify ke GitHub sama seperti Vercel. Masuk ke netlify.com, klik "Add new site → Import an existing project", pilih GitHub, dan konfigurasikan:

⚙️ Konfigurasi Netlify untuk Vue 3 + Vite

# Build command:
npm run build

# Publish directory:
dist

# Node version (opsional, di Environment Variables):
NODE_VERSION = 20

⚠️ PERHATIAN — PENTING UNTUK VUE ROUTER!

Jika kamu pakai Vue Router dengan mode history, kamu harus tambahkan file _redirects di folder public/ agar routing tidak error saat di-refresh:

# public/_redirects (untuk Netlify)
/*    /index.html   200

Untuk Vercel, buat file vercel.json di root project:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

⚖️ Vercel vs Netlify: Mana yang Cocok untuk Deploy Vue 3?

Kedua platform sama-sama gratis, sama-sama hebat. Perbedaannya ada di filosofi dan fitur unggulan masing-masing. Berikut perbandingan lengkapnya agar kamu bisa pilih yang paling pas:

Fitur	🔺 Vercel	🟢 Netlify
Setup awal	✅ Sangat mudah	✅ Sangat mudah
Auto-detect Vue/Vite	✅ Ya	✅ Ya
Deploy via drag & drop	❌ Tidak	✅ Ya
Edge Functions	✅ Ya	✅ Ya
Form handling bawaan	❌ Tidak	✅ Ya
Preview per branch	✅ Ya	✅ Ya
Cocok untuk Vue 3?	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

⚡ REKOMENDASI PRAKTIS

Pilih Vercel jika kamu sudah familiar dengan Git dan ingin pengalaman deploy paling seamless untuk Vue/React. Pilih Netlify jika kamu butuh form handling gratis, lebih sering uji coba cepat, atau tim kamu sudah pakai Netlify untuk project lain.

🛠️ Tips Optimasi Sebelum Build & Deploy Vue 3 ke Production

Deploy bukan sekadar upload file. Ada beberapa hal yang perlu kamu cek agar aplikasimu tidak hanya jalan, tapi juga cepat dan aman di production.

✅ CHECKLIST SEBELUM DEPLOY

🔐

Sembunyikan environment variables

Jangan commit .env ke GitHub! Gunakan fitur Environment Variables di dashboard Vercel/Netlify.

📦

Cek ukuran bundle dengan rollup-plugin-visualizer

npm i -D rollup-plugin-visualizer

🖼️

Kompres gambar sebelum masuk project

Gunakan format WebP untuk gambar dan plugin vite-plugin-imagemin untuk kompresi otomatis saat build.

⚡

Aktifkan lazy loading untuk route

// router/index.js — lazy load component
component: () => import('../views/AboutView.vue')

💡 TIPS — ENV VARIABLES DI VITE

Vite hanya mengekspos env variables dengan prefix VITE_ ke client. Jadi, jika kamu punya API key, pastikan namanya seperti VITE_API_KEY agar bisa diakses via import.meta.env.VITE_API_KEY.

# .env.production
VITE_API_BASE_URL=https://api.produksiku.com

📚 SERI LENGKAP

16 Artikel Belajar Vue: Vue from Zero to Zorro

Artikel ini adalah bagian dari seri lengkap belajar Vue 3 dari nol. Mulai dari konsep dasar, komponen, state management, routing, testing, hingga deploy — semua ada di sana.

🗺️ Lihat Semua 16 Artikel →

🎯 KESIMPULAN

Selamat! Aplikasi Vue 3 Kamu Sudah Live 🚀

Kita sudah melewati perjalanan lengkap: dari memahami proses build vue 3 dengan Vite, hingga cara deploy vue 3 ke dua platform terbaik — Vercel dan Netlify. Keduanya gratis, keduanya hebat, dan keduanya bisa kamu coba hari ini juga.

Yang terpenting adalah: jangan tunggu sempurna dulu baru deploy. Deploy sekarang, iterasi terus. Itulah cara developer profesional bekerja.

Ini adalah artikel terakhir dari seri Vue from Zero to Zorro — perjalanan 16 artikel yang membawa kamu dari nol hingga bisa membangun dan men-deploy aplikasi Vue 3 ke internet. Bangga sama kamu yang sudah bertahan sampai akhir! 🎉

✔ npm run build menghasilkan folder dist/ yang siap deploy

✔ Vercel: connect GitHub → auto-detect → deploy otomatis setiap push

✔ Netlify: bisa drag & drop folder dist, atau connect GitHub

✔ Jika pakai Vue Router mode history: tambahkan konfigurasi redirect

✔ Sembunyikan API key via environment variables, bukan di-commit ke Git

Sudah coba deploy? Share pengalamanmu di kolom komentar! Dan kalau artikel ini membantu, tolong share ke teman-teman yang lagi belajar Vue 3 — siapa tahu mereka juga butuh panduan ini 🙏

💬 Tulis Komentar 📤 Share Artikel

🔗 NAVIGASI SERI

← ARTIKEL SEBELUMNYA

Testing di Vue 3 — Cara Test Komponen dengan Vitest dan Vue Test Utils

→ Baca Artikel Sebelumnya

🏁

Kamu sudah di artikel terakhir!

Selamat telah menyelesaikan seri Vue from Zero to Zorro 🎉

#DeployVue3 #BuildVue3 #Vue3keVercel #BelajarVue #VueFrontEnd #Netlify #Vercel #ViteJS

vue 3 testing

📚 Artikel 15 dari 16 — Vue from Zero to Zorro

Testing di Vue 3 — Cara Test Komponen dengan Vitest dan Vue Test Utils Supaya Kode Makin Solid

Kode tanpa test itu kayak mobil tanpa rem — kelihatan kencang, tapi menyeramkan. Yuk pelajari cara testing Vue 3 yang benar dari nol, step by step.

#TestingVue3 #VitestVue #VueTestUtils #BelajarVue #VueFrontEnd

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2025 / 2026

Pernah nggak kamu nulis kode Vue 3 yang kelihatannya berjalan sempurna, lalu di hari deploy tiba-tiba muncul bug yang bikin malu di depan klien? Nah, itulah saatnya kamu kenalan serius dengan testing Vue 3. Di artikel ke-15 dari seri Vue from Zero to Zorro ini, kita akan belajar cara menggunakan Vitest dan Vue Test Utils — dua senjata utama untuk memastikan komponen-komponen Vue kamu bekerja dengan benar sebelum sampai ke tangan pengguna.

Testing bukan cuma urusan senior developer. Bahkan sebagai pemula, membiasakan diri menulis test sejak awal adalah investasi terbaik untuk karir dan kesehatan mental kamu di masa depan. Yuk mulai! 🚀

📐 Formula Penting

Apa Itu Testing Komponen Vue 3?

Testing komponen adalah proses memverifikasi bahwa sebuah komponen Vue bekerja sesuai harapan — mulai dari render tampilan, respons terhadap event pengguna, hingga perubahan state. Dengan Vitest sebagai test runner dan Vue Test Utils sebagai helper khusus Vue, proses ini jadi jauh lebih mudah dan menyenangkan.

🧪 Mengenal Vitest dan Vue Test Utils untuk Testing Vue 3

Bayangkan kamu baru selesai masak sup. Sebelum dihidangkan ke tamu, kamu pasti mencicipi dulu kan? Nah, testing komponen Vue 3 itu persis seperti itu — mencicipi kode sebelum "dihidangkan" ke pengguna.

Ada dua alat utama yang akan kita pakai:

⚖️ Perbandingan: Vitest vs Jest

Fitur	⚡ Vitest	Jest
Kecepatan	🚀 Sangat Cepat (native ESM)	Cukup Cepat
Integrasi Vite	✅ Native	❌ Perlu konfigurasi extra
Kompatibilitas API	Jest-compatible	Standard
HMR saat test	✅ Ada	❌ Tidak ada
Setup untuk Vue 3	✅ Sangat mudah	⚠️ Perlu plugin babel

🔥

Fakta Menarik

Vitest diciptakan oleh tim yang sama dengan Vite dan Vue! Makanya integrasi keduanya terasa begitu mulus. Bahkan banyak developer bilang menulis test dengan Vitest di Vue 3 terasa "fun" — sesuatu yang jarang diucapkan soal testing. 😄

⚙️ Setup Vitest di Proyek Vue 3 (Step by Step)

Oke, cukup teorinya. Mari kita langsung praktik! Berikut langkah-langkah menyiapkan environment testing Vue 3 dengan Vitest dari nol.

1

Install dependensi yang diperlukan

Pastikan kamu sudah punya proyek Vue 3 + Vite. Kemudian install Vitest dan Vue Test Utils:

npm install --save-dev vitest @vue/test-utils happy-dom
# atau pakai pnpm:
pnpm add -D vitest @vue/test-utils happy-dom

2

Konfigurasi Vitest di vite.config.js

Tambahkan konfigurasi test ke file vite.config.js yang sudah ada:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    // Simulasi browser environment
    environment: 'happy-dom',
    // Biar tidak perlu import describe/it/expect tiap file
    globals: true,
  }
})

3

Tambahkan script di package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "test": "vitest",                 // mode watch
  "test:run": "vitest run"        // sekali jalan (CI/CD)
}

💡

Tips Pro

Gunakan npm test saat development (mode watch — otomatis re-run setiap file berubah) dan npm run test:run saat push ke repository atau CI/CD pipeline.

✍️ Menulis Test Pertama dengan Vue Test Utils

Sekarang bagian paling seru — menulis test sungguhan! Kita akan test sebuah komponen tombol sederhana yang menampilkan counter. Ini adalah skenario paling umum saat belajar vue test utils.

4

Buat komponen yang ingin di-test: Counter.vue

<template>
  <div>
    <p data-testid="count">{{ count }}</p>
    <button @click="increment">Tambah</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>

5

Buat file test: Counter.test.js

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

describe('Counter.vue', () => {

  it('render count awal = 0', () => {
    const wrapper = mount(Counter)
    const count = wrapper.find('[data-testid="count"]')
    expect(count.text()).toBe('0')
  })

  it('count bertambah setelah klik tombol', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.find('[data-testid="count"]').text()).toBe('1')
  })

})

⚡

Insight Penting

Perhatikan penggunaan async/await saat men-trigger event. Vue perlu satu "tick" untuk memperbarui DOM setelah state berubah. Tanpa await, test kamu mungkin akan selalu gagal meski kode komponen sudah benar!

🏗️ Jenis-Jenis Test yang Perlu Kamu Tahu di Ekosistem Vitest Vue

Dunia testing itu luas. Biar nggak bingung, bayangkan testing seperti quality control di pabrik mobil. Ada yang ngecek tiap baut (unit test), ada yang ngecek satu mesin rakitan (component test), dan ada yang test mobil jalan di jalanan (end-to-end test).

🗂️ Tiga Lapisan Testing di Vue 3

🔩

Unit Test

Test fungsi/logika kecil secara terisolasi. Contoh: test fungsi formatCurrency, validasi form, composable.

🧩

Component Test

Test komponen Vue (render, event, props). Dibantu oleh Vue Test Utils. Inilah fokus artikel ini!

🚗

E2E Test

Simulasi pengguna nyata di browser. Pakai tool seperti Cypress atau Playwright. Level lanjutan.

📨 Testing Props, Emits, dan Composable di Vue 3

Komponen Vue 3 nyata biasanya punya props dan emit event. Berikut cara test keduanya menggunakan vue test utils:

📌 Test menerima props dengan benar:

// WelcomeMessage.test.js
import { mount } from '@vue/test-utils'
import WelcomeMessage from './WelcomeMessage.vue'

it('menampilkan nama dari props', () => {
  const wrapper = mount(WelcomeMessage, {
    props: { name: 'Budi' }
  })
  expect(wrapper.text()).toContain('Budi')
})

📌 Test emit event saat tombol diklik:

it('emit event "submit" saat tombol diklik', async () => {
  const wrapper = mount(MyForm)
  await wrapper.find('button[type="submit"]').trigger('click')

  // Cek apakah event 'submit' sudah di-emit
  expect(wrapper.emitted().submit).toBeTruthy()
  expect(wrapper.emitted().submit[0]).toEqual([{ email: 'test@mail.com' }])
})

⚠️

Perhatian

Hindari menggunakan selektor CSS yang bergantung pada styling (seperti class utility Tailwind) untuk mencari elemen di test. Gunakan data-testid sebagai attribute khusus testing — lebih stabil dan tidak terpengaruh perubahan tampilan.

💡

Testing Composable

Untuk test composable (useCounter, useFetch, dll.), cukup panggil fungsinya langsung tanpa perlu mount komponen. Contoh: const { count, increment } = useCounter() lalu assert hasilnya. Sederhana dan super cepat!

📚

Seri Lengkap

Vue from Zero to Zorro — 16 Artikel Belajar Vue 3

Dari pengenalan dasar hingga deploy ke internet — semua ada di seri ini. Lihat daftar lengkap seluruh artikelnya!

→ Lihat Semua Artikel Seri Vue from Zero to Zorro

✅ Kesimpulan

Kode Solid Dimulai dari Test yang Baik 🏆

Di artikel ini, kita sudah menyelami dunia testing Vue 3 bersama-sama. Berikut rangkuman perjalanan kita:

✦

Vitest adalah test runner modern yang native untuk ekosistem Vite + Vue 3, lebih cepat dan lebih mudah dikonfigurasi dibanding Jest.

✦

Vue Test Utils menyediakan fungsi mount(), find(), trigger(), dan emitted() yang memudahkan test komponen.

✦

Selalu gunakan async/await saat trigger event dan gunakan data-testid sebagai selektor testing yang stabil.

✦

Ada tiga lapisan testing: unit test, component test, dan E2E test. Mulailah dari unit dan component test untuk coverage yang efisien.

Dengan membiasakan testing Vue 3 sejak dini, kamu sedang membangun fondasi yang kokoh sebagai developer profesional. Satu artikel lagi dan kita selesaikan seri Vue from Zero to Zorro ini dengan deploy ke internet! 🚀

💬 Yuk Diskusi!

Sudah pernah nulis test untuk komponen Vue kamu? Atau baru mau mulai? Ceritakan pengalaman atau pertanyaan kamu di kolom komentar di bawah! Dan kalau artikel ini membantu, share ke teman-teman yang juga lagi belajar Vue 3. 🙌

#TestingVue3 #VitestVue #VueTestUtils #BelajarVue

🗺️ Navigasi Seri

← Artikel Sebelumnya

Performa & Best Practice Vue 3 — Lazy Loading, Code Splitting

→ Baca Artikel Sebelumnya

Artikel Selanjutnya →

Build & Deploy Vue 3 — Dari Laptop ke Internet

→ Baca Artikel Selanjutnya

vue 3 performance

Artikel 14 dari 16 · Seri Vue from Zero to Zorro

Performa & Best Practice Vue 3 — Lazy Loading, Code Splitting,
dan Kebiasaan Coding yang Benar

Aplikasi Vue 3 kamu sudah jalan — tapi seberapa cepat dan efisien? Pelajari teknik lazy loading, code splitting, dan best practice yang bikin app kamu terasa roket, bukan kereta uap.

#PerformaVue3 #BestPracticeVue3 #LazyLoadingVue #BelajarVue #VueFrontEnd

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2025 / 2026

📚 Bagian dari Seri Lengkap

Seri Belajar Vue: Vue from Zero to Zorro

16 artikel lengkap dari nol sampai jago — terstruktur & gratis!

Lihat Daftar Seri →

Bayangkan kamu membangun rumah megah — desain keren, furniture mewah, taman indah. Tapi saat tamu datang, pintu masuknya sempit dan tangga-nya lambat. Hasilnya? Tamu frustrasi dan langsung balik kanan. Persis seperti itu kondisi aplikasi Vue 3 yang tidak dioptimasi. Fitur lengkap, tapi lambat — dan pengguna kabur sebelum sempat menikmatinya.

Di artikel ke-14 dari seri Vue from Zero to Zorro ini, kita akan membahas performa Vue 3 secara praktis: mulai dari lazy loading Vue, code splitting, hingga best practice Vue 3 yang langsung bisa kamu terapkan hari ini. Ini bukan teori kosong — setiap teknik di sini sudah teruji dan dipakai di production.

Siap bikin aplikasi kamu terbang? Mari mulai! 🚀

💎 Konsep Kunci

Performa = Kecepatan × Efisiensi × Pengalaman Pengguna

Aplikasi yang bagus bukan hanya yang bisa berjalan, tapi yang berjalan cepat, ringan, dan nyaman di semua kondisi jaringan. Vue 3 memberikan alat yang luar biasa — tugas kita adalah memakainya dengan benar.

01. Lazy Loading Vue — Muat Hanya Yang Dibutuhkan

Analogi: kamu lagi belanja di supermarket. Apakah kamu langsung ambil semua barang di rak begitu masuk? Tentu tidak — kamu ambil hanya yang kamu butuhkan saat itu. Lazy loading bekerja persis seperti itu pada aplikasi Vue 3: komponen dan halaman hanya dimuat saat benar-benar dibutuhkan pengguna.

Tanpa lazy loading, browser kamu memuat semua JavaScript di awal — meski pengguna hanya mengunjungi satu halaman. Hasilnya: loading pertama lambat, pengguna ilfeel, dan bounce rate meroket.

🔥 Fakta Menarik

Menurut Google, setiap 100ms keterlambatan loading dapat menurunkan konversi hingga 7%. Artinya, performa bukan sekadar teknis — ini soal uang dan pengguna.

Lazy Loading Komponen dengan defineAsyncComponent

Vue 3 menyediakan defineAsyncComponent untuk memuat komponen secara lazy. Contoh langsung:

📄 App.vue

import { defineAsyncComponent } from 'vue'

// ✅ Komponen ini TIDAK dimuat saat aplikasi pertama jalan
// Hanya dimuat saat komponen benar-benar dirender
const HeavyDashboard = defineAsyncComponent(() =>
  import('./components/HeavyDashboard.vue')
)

// ✅ Dengan loading state dan error handling
const SmartComponent = defineAsyncComponent({
  loader: () => import('./components/SmartComponent.vue'),
  loadingComponent: LoadingSpinner,   // tampil saat loading
  errorComponent: ErrorDisplay,      // tampil saat error
  delay: 300,                       // delay sebelum loading state
  timeout: 5000                     // timeout jika gagal load
})

Lazy Loading Route di Vue Router

Ini adalah teknik paling umum dan paling berdampak. Setiap halaman hanya dimuat saat pengguna mengunjunginya:

📄 router/index.js

const routes = [
  {
    path: '/',
    // ✅ HomeView dimuat lazy — bukan import biasa di atas
    component: () => import('../views/HomeView.vue')
  },
  {
    path: '/dashboard',
    // ✅ Dashboard hanya dimuat saat user buka /dashboard
    component: () => import('../views/DashboardView.vue')
  },
  {
    path: '/profile',
    // ✅ Named chunk — berguna untuk debugging bundle
    component: () => import(/* webpackChunkName: "profile" */ '../views/ProfileView.vue')
  }
]

💡 Tips Pro

Gunakan webpackChunkName (atau Vite rollupOptions) untuk memberi nama pada chunk. Ini mempermudah debugging di DevTools dan memastikan file chunk mudah diidentifikasi saat production build.

02. Code Splitting — Pecah Besar Jadi Kecil-Kecil

Analogi lagi: daripada mengirim satu koper besar yang berat ke tamu, lebih baik kirim beberapa tas kecil — ringan, cepat sampai, dan tamu bisa pakai duluan sambil nunggu yang lain. Code splitting memecah bundle JavaScript besar menjadi chunk-chunk kecil yang dimuat sesuai kebutuhan.

Vue 3 dengan Vite (atau Webpack) mendukung code splitting otomatis via dynamic import. Tapi kamu bisa mengontrolnya lebih lanjut:

📄 vite.config.js — Manual Chunk Configuration

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // ✅ Pisahkan vendor library dari kode aplikasi
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-libs': ['@headlessui/vue', 'lucide-vue-next'],
          'utils': ['axios', 'dayjs', 'lodash-es']
        }
      }
    }
  }
})

⚡ Insight Penting

Memisahkan vendor chunk (vue, vue-router, dll.) dari kode aplikasi sangat penting karena library ini jarang berubah. Browser bisa meng-cache vendor chunk lebih lama, sehingga deploy baru tidak memaksa pengguna re-download semua aset.

03. Best Practice Vue 3 — Kebiasaan yang Membedakan Junior dan Senior

Kode yang bekerja dan kode yang baik adalah dua hal berbeda. Best practice Vue 3 bukan soal aturan kaku — ini soal kebiasaan yang bikin kode kamu mudah dibaca, mudah di-maintain, dan tentunya lebih performant.

1

Gunakan v-memo untuk List Besar

Directive v-memo adalah fitur Vue 3.2+ yang mencegah re-render komponen di dalam list jika dependency tidak berubah.

<!-- ✅ Hanya re-render jika item.id atau selected berubah -->
<div v-for="item in list"
     :key="item.id"
     v-memo="[item.id, selected === item.id]">
  {{ item.name }}
</div>

2

Manfaatkan computed dan Hindari Logic di Template

Computed property di-cache berdasarkan dependency-nya. Jangan taruh logika berat langsung di template — ini bikin Vue re-hitung setiap render.

// ❌ Buruk: logika berat di template
<!-- {{ users.filter(u => u.active).sort(...).slice(0, 10) }} -->

// ✅ Baik: gunakan computed
const topActiveUsers = computed(() =>
  users.value
    .filter(u => u.active)
    .sort((a, b) => b.score - a.score)
    .slice(0, 10)
)

3

Selalu Gunakan :key yang Unik dan Stabil

Vue menggunakan :key untuk mengidentifikasi elemen di virtual DOM. Key yang salah = bug aneh yang susah dilacak.

// ❌ Buruk: pakai index sebagai key
<li v-for="(item, index) in items" :key="index">

// ✅ Baik: pakai ID unik dari data
<li v-for="item in items" :key="item.id">

4

Cleanup di onUnmounted — Hindari Memory Leak

Event listener, interval, atau subscription yang tidak di-cleanup akan menyebabkan memory leak parah, terutama di SPA (Single Page Application).

import { onMounted, onUnmounted } from 'vue'

const handleResize = () => { /* ... */ }

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

// ✅ Wajib cleanup saat komponen di-unmount!
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

5

Gunakan shallowRef dan shallowReactive untuk Data Besar

ref() dan reactive() membuat semua nested property reaktif — mahal untuk objek besar. Gunakan versi shallow jika kamu tidak butuh deep reactivity.

import { shallowRef, shallowReactive } from 'vue'

// ✅ Untuk array/objek besar yang hanya butuh reaktivitas di level atas
const bigDataset = shallowRef([])
const config = shallowReactive({ theme: 'dark', lang: 'id' })

⚠️ Perhatian

Jangan gunakan v-if dan v-for pada elemen yang sama. Ini menyebabkan Vue memproses v-for dulu baru v-if, yang bisa jadi bug tersembunyi. Gunakan <template v-for> dengan v-if di dalam, atau gunakan computed yang sudah difilter.

04. Performa Vue 3 — Ringkasan Teknik & Kapan Pakainya

Banyak teknik yang bisa dipakai, tapi tidak semuanya relevan di setiap situasi. Berikut ringkasan kapan harus memakai teknik apa:

Teknik	Kapan Dipakai	Dampak
Lazy Route Loading	Semua aplikasi multi-halaman	⭐⭐⭐ Tinggi
defineAsyncComponent	Komponen berat / jarang tampil	⭐⭐⭐ Tinggi
computed property	Kalkulasi yang bergantung state	⭐⭐ Menengah
v-memo	List panjang dengan kondisi tertentu	⭐⭐ Menengah
shallowRef/shallowReactive	Objek/array besar tanpa deep reactivity	⭐⭐ Menengah
manualChunks (Vite)	Production build dengan banyak vendor lib	⭐⭐⭐ Tinggi

📊 Analisis: Urutan Prioritas Optimasi

Jika kamu baru memulai optimasi, lakukan dalam urutan ini agar effort minimum, dampak maksimum:

1. Lazy loading semua route — dampak paling besar, mudah dilakukan
2. Pisahkan vendor chunks — optimalkan cache browser
3. Pindahkan logika ke computed — kode lebih bersih sekaligus performant
4. Cleanup event listener — cegah memory leak sebelum jadi masalah
5. v-memo dan shallowRef — hanya jika profiling menunjukkan bottleneck

⚡ Insight: Profiling Sebelum Optimasi

Jangan optimasi yang belum bermasalah. Gunakan Vue DevTools (tab Performance) dan Lighthouse untuk mengidentifikasi bottleneck nyata. Optimasi prematur adalah akar dari semua kejahatan — kata Donald Knuth, dan ini berlaku di Vue juga.

🏁 Kesimpulan Artikel 14

Aplikasi Cepat Dimulai dari Kebiasaan yang Benar

Di artikel ini, kita sudah menyelami tiga pilar utama performa Vue 3: lazy loading yang mengurangi beban awal, code splitting yang membagi bundle jadi potongan-potongan cerdas, dan best practice Vue 3 yang menjamin kode bersih sekaligus efisien.

Ingat: performa bukan tambalan di akhir — ini kebiasaan dari hari pertama. Mulai dengan lazy loading route, jaga computed tetap murni, dan selalu cleanup side effect. Tiga hal itu saja sudah membuat aplikasi Vue 3 kamu selangkah lebih baik dari rata-rata.

Yang Kamu Pelajari Hari Ini

• ✓ Lazy loading komponen dengan defineAsyncComponent
• ✓ Lazy loading route di Vue Router
• ✓ Code splitting manual dengan manualChunks Vite
• ✓ 5 best practice Vue 3 yang actionable
• ✓ Urutan prioritas optimasi yang efektif

Sudah coba lazy loading di project Vue 3 kamu? Berapa besar pengurangan bundle size-nya? Ceritakan di kolom komentar! Dan kalau artikel ini bermanfaat, bagikan ke teman developer lain yang sedang belajar Vue 3 — siapa tahu mereka juga butuh ini. 🙌

#PerformaVue3 #BestPracticeVue3 #LazyLoadingVue #BelajarVue #VueFrontEnd

📖 Navigasi Seri Vue from Zero to Zorro

← Artikel 13

Composables — Bikin Logika yang Bisa Dipakai Ulang di Banyak Komponen

→ Baca Artikel Sebelumnya

Artikel 15 →

Testing di Vue 3 — Cara Test Komponen

→ Baca Artikel Selanjutnya

Lihat semua artikel: 📚 Seri Belajar Vue: Vue from Zero to Zorro →