Module: import / export
Named vs default, dynamic import, tree shaking și barrel files.
Actualizat
Ce este un modul
Un modul e un fișier JS cu scope propriu: variabilele și funcțiile din el sunt private, până când le exporți explicit. Alt fișier le folosește prin import.
De ce: fără module, tot codul ar trăi în același spațiu global — conflicte de nume, dependențe ascunse, imposibil de întreținut. Cu module, fiecare fișier declară clar ce oferă și de ce are nevoie.
// math.js
const secret = 42 // privat — nu e exportat
export const sum = (a, b) => a + b // public
// app.js
import { sum } from './math.js'
sum(1, 2)Tipuri de export
| Tip | Sintaxă export | Sintaxă import | Câte pe fișier |
|---|---|---|---|
| named | export const sum = ... |
import { sum } from './math' |
oricâte |
| default | export default function Page() {} |
import Page from './page' (orice nume) |
unul |
| re-export | export { sum } from './math' |
— | — |
import multiply, { sum, avg as average } from './math.js' // default + named + redenumire
import * as math from './math.js' // tot, ca obiectNamed vs default — când
| Named | Default | |
|---|---|---|
| Numele la import | fix — același peste tot | îl alegi tu — poate diferi în fiecare fișier |
| Refactorizare, autocomplete, căutare | mai bune | mai slabe |
| Unde e obligatoriu | — | page.tsx, layout.tsx, next.config.ts în Next |
Recomandare: named exports pentru tot codul tău; default doar unde framework-ul îl cere.
Static vs dynamic import
import x from (static) |
await import() (dinamic) |
|
|---|---|---|
| Când se încarcă | la pornire, înainte de cod | la cerere, când ajungi la linia aceea |
| Unde | doar sus în fișier | oriunde (în funcții, condiții) |
| Pentru | aproape tot | cod greu folosit rar: editor, grafice, hărți |
button.onclick = async () => {
const { Chart } = await import('./chart.js') // descărcat doar la click
}În Next: next/dynamic face același lucru pentru componente — exact cum se încarcă editorul de cod din aplicația asta.
Tree shaking
Tree shaking = bundler-ul elimină din build exporturile pe care nu le importă nimeni. Funcționează doar cu import/export statice.
import { debounce } from 'lodash-es' // ✓ ajunge doar debounce
import _ from 'lodash' // ✗ ajunge toată librăriaBarrel files
Un barrel e un index.ts care doar re-exportă alte fișiere (export * from './a'). Pare comod, dar:
- importul unui singur lucru încarcă tot ce re-exportă barrel-ul;
- încetinește dev serverul și testele;
- creează ușor importuri circulare.
În proiectul nostru importăm direct din fișier — vezi Feature-Sliced Design.
ESM vs CommonJS
| ES Modules (ESM) | CommonJS (CJS) | |
|---|---|---|
| Sintaxă | import / export |
require() / module.exports |
| Unde | browser, Next, Node modern | Node vechi, unele librării |
| Static (tree shaking) | da | nu |
Scrii ESM. CJS îl întâlnești doar în configurări vechi.
Pe scurt
- Modul = fișier cu scope propriu; exporți ce e public.
- Named exports implicit; default doar unde e cerut.
- Dynamic import pentru cod greu; tree shaking doar cu importuri statice; evită barrel-urile.