Kedua-duanya memotong JavaScript yang pengguna muat turun. Code splitting memecahkan bundle kepada chunk yang dimuatkan atas permintaan; tree shaking membuang kod yang anda tidak pernah guna. Ia saling melengkapi: pecahkan apa yang dimuatkan, goncang keluar kod mati dalam setiap chunk.
Daripada satu bundle besar, aplikasi dipecahkan supaya setiap route atau ciri berat menjadi chunk berasingan yang diambil hanya apabila diperlukan:
// Pecahan berasaskan-route: kod dashboard tidak dimuat turun sehingga anda melawatnya
const Dashboard = lazy(() => import("./routes/Dashboard")); // chunk tersendiri
// Pecahan berasaskan-komponen: editor berat dimuatkan atas interaksi
button.onclick = async () => {
const { openEditor } = await import("./editor"); // diambil semasa klik
openEditor();
};
import() dinamik ialah isyaratnya — bundler memancarkan fail berasingan pada sempadan itu.
Bundler menganalisis import/export modul ES secara statik dan menggugurkan export yang tiada apa-apa merujuknya. Ia hanya berfungsi dengan ESM (statik, boleh dianalisis) — bukan require CommonJS:
import { debounce } from "utils"; // hanya debounce dikekalkan; throttle, dll. digoncang keluar
Ia bergantung pada "sideEffects": false dalam package.json dan import setiap-fungsi; barrel file atau modul dengan kesan-sampingan boleh mengalahkannya.
Inilah dua tuas di sebalik "hantar JS yang lebih sedikit." Penemu duga mahu anda tahu code splitting menentukan apa yang dimuatkan bila, tree shaking menentukan apa yang ada di dalamnya langsung, dan bahawa tree shaking bergantung pada ESM statik — butiran yang membezakan orang yang benar-benar pernah menala bundle daripada mereka yang hanya membacanya.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma