Bundlere și build
Transpilare, graf de module, tree shaking, code splitting, hash; Turbopack și Vite.
Actualizat
Ce este un bundler
Codul pe care îl scrii nu e codul care ajunge în browser. Tu scrii sute de fișiere TypeScript și JSX, cu importuri între ele și din node_modules. Browserul ar trebui să facă sute de request-uri și nu înțelege nici TypeScript, nici JSX.
Un bundler ia tot acest cod și îl transformă în câteva fișiere optimizate:
cod sursăTS, JSX, CSS, importuritranspilare→JavaScript simplubundling→fișiere combinateoptimizare→buildminificat, împărțit, cu hashCe face, pas cu pas
| Pas | Ce înseamnă |
|---|---|
| transpilare | TS → JS (tipurile se șterg), JSX → apeluri de funcții, sintaxă nouă → compatibilă |
| rezolvarea importurilor | pornește de la un fișier de intrare și urmează toate import-urile — graful de module |
| tree shaking | elimină exporturile pe care nu le importă nimeni |
| code splitting | împarte codul în chunk-uri: fiecare pagină încarcă doar ce îi trebuie; import() dinamic = chunk separat |
| minificare | nume scurte, fără spații și comentarii |
| hash în numele fișierelor | app.3f2a9c.js — conținut nou = nume nou → browserul poate cache-ui fișierele pentru totdeauna |
Bundlerele de azi
| Unealtă | Unde o întâlnești | Caracteristică |
|---|---|---|
| Turbopack | Next.js (implicit din Next 16) | scris în Rust, incremental, foarte rapid în dev |
| Vite | React SPA, Vue, Svelte, Vitest | dev server instant pe ES modules native, build cu Rollup / Rolldown |
| webpack | proiecte mai vechi, Next înainte de 16 | cel mai configurabil, cel mai lent |
| esbuild, SWC | în interiorul celorlalte | transpilare ultra-rapidă |
În practică nu configurezi bundlerul de mână — framework-ul (Next, Vite) o face. Dar trebuie să înțelegi ce face, ca să știi de ce un import contează.
Dev vs build
npm run dev |
npm run build |
|
|---|---|---|
| Scop | viteză de lucru | viteză pentru useri |
| Optimizări | minime | toate (minificare, tree shaking, splitting) |
| Reîncărcare | HMR — modulul modificat se înlocuiește fără reload, cu state păstrat | — |
| Erori | detaliate, cu overlay | build-ul eșuează |
Ce poți face tu pentru un bundle mic
- Importuri named din librării care suportă tree shaking (
import { debounce } from 'lodash-es'). next/dynamic/import()pentru componente grele folosite rar (editor, grafice, hărți) — exact cum e încărcat editorul din aplicația asta.- Server Components pentru tot ce nu e interactiv — codul lor nu ajunge deloc în bundle.
- Verifică ce ocupă loc:
next buildarată mărimile, iar analyzer-ul de bundle arată ce le ocupă.
Pe scurt
- Bundler = transpilare + graf de importuri + tree shaking + code splitting + minificare + hash.
- Turbopack în Next, Vite în rest; nu le configurezi, dar le înțelegi.
- Bundle mic: importuri named,
import()pentru cod greu, Server Components.