Gearrann an dá cheann an JavaScript a íoslódálann úsáideoirí. Briseann code splitting an bundle ina chunks a lódáiltear ar éileamh; baineann tree shaking cód nach n-úsáideann tú riamh. Tá siad comhlántach: roinn cad a lódálann, croith amach cód marbh laistigh de gach chunk.
In ionad aon bundle mór amháin, roinntear an aip ionas gur chunk ar leith é gach route nó gné throm nach bhfaightear ach nuair a bhíonn sé ag teastáil:
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk
// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
const { openEditor } = await import("./editor"); // fetched on click
openEditor();
};
Is é an import() dinimiciúil an comhartha — astaíonn an bundler comhad ar leith ag an teorainn sin.
Déanann an bundler anailís statach ar import/export modúil ES agus scaoileann sé onnmhairí nach dtagraíonn aon rud dóibh. Ní oibríonn sé ach le ESM (statach, in-anailísithe) — ní le require CommonJS:
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
Braitheann sé ar "sideEffects": false i package.json agus ar iompórtálacha in aghaidh na feidhme; is féidir le comhaid bhairille nó modúil a bhfuil fo-iarmhairtí acu é a shárú.
Is iad seo an dá luamhán taobh thiar de "níos lú JS a sheoladh." Ba mhaith le hagallóirí go mbeadh a fhios agat go gcinneann code splitting cad a lódálann cathain, go gcinneann tree shaking cad atá ann ar chor ar bith, agus go mbraitheann tree shaking ar ESM statach — sonra a dheighleann daoine a chuir bundle i dtiúin i ndáiríre ó na daoine nár léigh ach faoi.
Leabharlann de cheisteanna agallaimh TF le freagraí mionsonraithe — ó Shóisearach go Sinsearach.
Síntiús