Frontend Academy · Pelajaran

Konsep Pembundlean: tree shaking dan pemisahan kod

Fahami cara pembundle membuang export yang tidak digunakan melalui tree shaking dan memisahkan output kepada cebisan untuk pemuatan halaman awal yang lebih pantas.

Pelajaran 4 daripada 413 langkah

Konsep Pembundlean: tree shaking dan pemisahan kod ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang Dilakukan oleh Penggabung?

Penggabung (Vite, webpack, Rollup, Parcel) membaca fail sumber anda, menyelesaikan import, mengubah kod (transpilasi, peminimuman, pengoptimuman) dan menghasilkan fail yang boleh dimuatkan oleh pelayar dengan cekap.

Graf Modul

Penggabung bermula daripada titik masukan dan mengikuti setiap import untuk membina graf modul — peta lengkap bagi semua kod yang digunakan oleh aplikasi anda. Graf ini menjadi asas kepada semua pengoptimuman.

Pengguguran Pepohon — Penghapusan Kod Mati

Pengguguran pepohon menganalisis graf modul dan mengalih keluar eksport yang tidak pernah diimport. Hanya import statik modul ES membolehkan pengguguran pepohon — CommonJS require() adalah dinamik dan tidak boleh dianalisis secara statik.

// 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));

Kesan Sampingan dan sideEffects: false

Jika pustaka anda tidak mempunyai kesan sampingan (eksport semula tulen), tambahkan "sideEffects": false pada package.json. Ini memberitahu penggabung bahawa mereka boleh mengalih keluar mana-mana fail daripada pakej anda yang tidak diimport dengan selamat.

// package.json of a library:
{
  "sideEffects": false
  // or list files with side effects:
  "sideEffects": ["./src/polyfills.js"]
}

Pemecahan Kod

Pemecahan kod membahagikan bundel kepada beberapa serpihan yang dimuatkan mengikut permintaan. Serpihan utama kekal kecil untuk pemuatan awal yang pantas. Serpihan sekunder hanya dimuatkan apabila diperlukan (laluan tertunda, togol ciri).

Pemecahan Titik Masukan

Aplikasi berbilang halaman mempunyai beberapa titik masukan, setiap satu menghasilkan bundelnya sendiri. Kod yang dikongsi (contohnya React) diekstrak secara automatik ke dalam serpihan dikongsi.

Pemecahan Import Dinamik

Setiap panggilan dinamik import() menghasilkan titik pemisahan. Penggabung menjana serpihan berasingan untuk modul yang dimuatkan secara tertunda serta semua kebergantungan uniknya.

// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));

Serpihan Pihak Ketiga

Kod node_modules jarang berubah. Ekstraknya ke dalam serpihan pihak ketiga dengan TTL cache yang panjang. Pengguna yang telah menyimpan serpihan pihak ketiga dalam cache hanya perlu memuat turun semula serpihan aplikasi apabila terdapat kemas kini.

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: { vendor: ['react', 'react-dom'] }
    }
  }
}

Peminimuman

Alat peminimum (esbuild, terser) mengalih keluar ruang kosong, menamakan semula pemboleh ubah kepada huruf tunggal dan menggunakan pengurangan lain. Aplikasi React lazimnya mengecil sebanyak 60–70% selepas peminimuman.

Pencincangan Berasaskan Kandungan

Penggabung menambahkan cincangan kandungan fail pada nama fail: index-a1b2c3.js. Apabila kandungan berubah, cincangan berubah, nama fail berubah dan pelayar mengambil fail baharu. Serpihan yang tidak berubah dicache tanpa had.

Peta Sumber

Peta sumber memetakan hasil yang diminimumkan kembali kepada kod sumber asal anda. Peta ini dijana secara berasingan (tidak dihantar kepada pengguna) dan digunakan oleh DevTools untuk penyahpepijatan. Dayakannya dengan build.sourcemap: true.

Semakan Pantas

Apakah keperluan utama untuk pengguguran pepohon berfungsi?

Jawab dalam pelajaran interaktif

Ringkasan: Konsep Pembundelan

Penggabung menyelesaikan graf modul, melakukan pengguguran pepohon terhadap eksport yang tidak digunakan (memerlukan ESM statik), membahagikan kod kepada serpihan untuk pemuatan tertunda, mengekstrak kod pihak ketiga untuk caching, meminimumkan hasil dan menambahkan cincangan kandungan untuk membatalkan cache. Peta sumber membolehkan penyahpepijatan kod yang diminimumkan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Konsep Pembundlean: tree shaking dan pemisahan kod” percuma?

Ya — teks penuh “Konsep Pembundlean: tree shaking dan pemisahan kod” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Konsep Pembundlean: tree shaking dan pemisahan kod”?

Fahami cara pembundle membuang export yang tidak digunakan melalui tree shaking dan memisahkan output kepada cebisan untuk pemuatan halaman awal yang lebih pantas. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Konsep Pembundlean: tree shaking dan pemisahan kod” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Modul ES: import export dan dynamic import
npm dan package.json: kebergantungan skrip
Vite: pelayan pembangunan dan binaan
Konsep Pembundlean: tree shaking dan pemisahan kod

← Kembali ke Frontend Academy