Konsep Bundling: tree shaking dan pemisahan kode
Pahami cara bundler menghapus export yang tidak digunakan melalui tree shaking dan membagi output menjadi chunk agar pemuatan awal halaman lebih cepat.
Konsep Bundling: tree shaking dan pemisahan kode adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 yang Dilakukan Pengemas?
Pengemas (Vite, webpack, Rollup, Parcel) membaca berkas sumber Anda, menyelesaikan impor, mengubah kode (mentranspilasi, meminifikasi, mengoptimalkan), dan menghasilkan berkas yang dapat dimuat peramban secara efisien.
Graf Modul
Pengemas dimulai dari sebuah titik masuk dan mengikuti setiap impor untuk membangun graf modul — peta lengkap seluruh kode yang digunakan aplikasi Anda. Graf ini menjadi dasar semua pengoptimalan.
Pembersihan Pohon — Eliminasi Kode Mati
Pembersihan pohon menganalisis graf modul dan menghapus ekspor yang tidak pernah diimpor. Hanya impor statis modul ES yang memungkinkan pembersihan pohon — require() CommonJS bersifat dinamis dan tidak dapat dianalisis secara statis.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Efek Samping dan sideEffects: false
Jika pustaka Anda tidak memiliki efek samping (ekspor ulang murni), tambahkan "sideEffects": false ke package.json. Hal ini memberi tahu pengemas bahwa mereka dapat dengan aman menghapus berkas apa pun dari paket Anda yang tidak diimpor.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Pemisahan Kode
Pemisahan kode membagi bundel menjadi beberapa chunk yang dimuat sesuai kebutuhan. Chunk utama tetap kecil agar pemuatan awal berlangsung cepat. Chunk sekunder hanya dimuat saat diperlukan (rute yang dimuat sesuai kebutuhan, pengalih fitur).
Pemisahan Titik Masuk
Aplikasi multipage memiliki beberapa titik masuk, dan masing-masing menghasilkan bundelnya sendiri. Kode bersama (misalnya, React) secara otomatis diekstrak ke dalam chunk bersama.
Pemisahan Impor Dinamis
Setiap pemanggilan import() dinamis membuat titik pemisahan. Pengemas membuat chunk terpisah untuk modul yang dimuat sesuai kebutuhan beserta semua dependensi uniknya.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Pemisahan Chunk Vendor
Kode Node_modules jarang berubah. Ekstrak kode tersebut ke dalam chunk vendor dengan TTL cache yang panjang. Pengguna yang telah menyimpan chunk vendor dalam cache hanya perlu mengunduh ulang chunk aplikasi saat ada pembaruan.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minifikasi
Alat minifikasi (esbuild, terser) menghapus spasi kosong, mengganti nama variabel menjadi satu huruf, dan menerapkan pengurangan lainnya. Aplikasi React biasa menyusut 60–70% setelah minifikasi.
Hash Berdasarkan Konten
Pengemas menambahkan hash isi berkas ke nama berkas: index-a1b2c3.js. Saat isi berubah, hash berubah, nama berkas berubah, dan peramban mengambil berkas baru. Chunk yang tidak berubah disimpan dalam cache tanpa batas waktu.
Peta Sumber
Peta sumber memetakan keluaran yang telah diminifikasi kembali ke kode sumber asli Anda. Peta ini dibuat secara terpisah (tidak dikirim kepada pengguna) dan digunakan oleh DevTools untuk men-debug. Aktifkan dengan build.sourcemap: true.
Pemeriksaan Singkat
Apa persyaratan utama agar pembersihan pohon dapat berfungsi?
Ringkasan: Konsep Penggabungan
Pengemas menyelesaikan graf modul, membersihkan ekspor yang tidak digunakan (memerlukan ESM statis), memisahkan kode menjadi chunk untuk pemuatan sesuai kebutuhan, mengekstrak kode vendor untuk caching, meminifikasi keluaran, dan menambahkan hash konten untuk membatalkan cache. Peta sumber memungkinkan pen-debug-an kode yang telah diminifikasi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Konsep Bundling: tree shaking dan pemisahan kode” gratis?
Ya — teks lengkap “Konsep Bundling: tree shaking dan pemisahan kode” 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 “Konsep Bundling: tree shaking dan pemisahan kode”?
Pahami cara bundler menghapus export yang tidak digunakan melalui tree shaking dan membagi output menjadi chunk agar pemuatan awal halaman lebih cepat. 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 4 dari 4.
Berapa lama pelajaran “Konsep Bundling: tree shaking dan pemisahan kode” 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