Vue Academy · Pelajaran

Mengoptimalkan Proses Build

Hasilkan build produksi yang dioptimalkan.

Mengoptimalkan Proses Build adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Dari Pengembangan ke Produksi

Selama pengembangan, Anda menjalankan server pengembangan dengan pemuatan ulang otomatis. Untuk merilis aplikasi, Anda membuat versi produksi yang dioptimalkan: sekumpulan berkas statis yang disesuaikan agar cepat dan berukuran kecil, siap diterapkan ke server mana pun.

Menjalankan Proses Pembuatan

Perintah standar membuat aplikasi Anda untuk produksi. Vite (perangkat pengembangan bawaan Vue 3) mengompilasi, menggabungkan, dan mengoptimalkan semuanya.

npm run build

Hasil Pembuatan

Proses pembuatan menulis berkas yang dioptimalkan ke dalam folder dist: sebuah index.html, bundel JavaScript dan CSS dengan nama berbasis hash, serta aset statis Anda. Folder inilah yang Anda terapkan.

dist/
  index.html
  assets/
    index-a1b2c3.js
    index-d4e5f6.css

Minifikasi

Minifikasi menghapus spasi kosong dan komentar, serta mempersingkat nama variabel agar berkas dapat diunduh lebih cepat. Versi produksi secara otomatis melakukan minifikasi pada JavaScript dan CSS.

Penghapusan Kode Tak Terpakai

Penghapusan kode tak terpakai menghapus kode yang tidak pernah Anda gunakan. Jika Anda mengimpor satu fungsi dari sebuah pustaka, penggabung berkas akan membuang sisanya. Gunakan impor bernama dari modul ES agar penghapusan kode tak terpakai dapat berjalan.

// only what you use is bundled
import { debounce } from "lodash-es"

Pemberian Hash pada Konten

Nama berkas hasil pembuatan menyertakan hash konten seperti index-a1b2c3.js. Saat kode berubah, hash juga berubah, sehingga peramban mengambil berkas baru dan tetap menyimpan berkas yang tidak berubah secara agresif.

Menganalisis Ukuran Bundel

Untuk melihat hal yang mengisi bundel Anda, gunakan pengaya visualisasi. Pengaya ini menghasilkan diagram interaktif yang menunjukkan modul mana yang memakan ruang paling besar dan membantu mengarahkan pengoptimalan Anda.

npm install -D rollup-plugin-visualizer

Membaca Hasil Analisis

Dependensi besar yang hampir tidak Anda gunakan merupakan tanda bahaya. Analisis mungkin mengungkap pustaka tanggal atau pembuatan grafik yang berat dan dapat Anda ganti dengan alternatif yang lebih kecil atau muat secara tertunda.

Variabel Lingkungan

Vite menyediakan variabel lingkungan yang diawali VITE_ melalui import.meta.env. Gunakan variabel tersebut untuk mengonfigurasi alamat layanan dan penanda fitur sesuai lingkungan.

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

const apiUrl = import.meta.env.VITE_API_URL

Pembuatan Khusus Lingkungan

Vite memuat .env.production selama npm run build dan .env.development selama npm run dev, sehingga setiap lingkungan otomatis mendapatkan konfigurasi yang tepat.

// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production  -> VITE_API_URL=https://api.example.com

Melihat Pratinjau Hasil Pembuatan

Sebelum menerapkan aplikasi, jalankan pratinjau lokal dari versi produksi untuk memastikan semuanya bekerja sesuai harapan dengan berkas nyata yang telah dioptimalkan.

npm run build
npm run preview

Uji Cepat

Uji pemahaman Anda tentang proses pembuatan.

Ringkasan

Jalankan npm run build untuk menghasilkan folder dist yang dioptimalkan, dengan aset yang telah diminifikasi, dibersihkan dari kode tak terpakai, dan diberi hash konten. Analisis ukuran bundel untuk mengurangi dependensi yang berat, lalu gunakan variabel lingkungan VITE_ bersama berkas .env untuk konfigurasi tiap lingkungan. Lihat pratinjaunya sebelum dirilis. Selanjutnya Anda akan menerapkan versi ini ke platform hosting.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengoptimalkan Proses Build” gratis?

Ya — teks lengkap “Mengoptimalkan Proses Build” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Mengoptimalkan Proses Build”?

Hasilkan build produksi yang dioptimalkan. Kamu berlatih Vue 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 Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue 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 3.

Berapa lama pelajaran “Mengoptimalkan Proses 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 Vue Academy ini?

Ya. Setiap pelajaran Vue 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 Vue Academy