JavaScript modulok – import és export
ES modulok: import/export, module graph, static analysis, code splitting és miért fontos a module boundary modern bundlerek és Next.js mellett.
Röviden
Az ES module fájl explicit exportokat adhat, más modul pedig statikus `import` deklarációval függhet tőlük. A module graph lehetővé teszi, hogy bundler és runtime megértse a függőségeket és bizonyos optimalizálásokat végezzen.
Mit jelent a javascript modulok – import és export?
Az ES module fájl explicit exportokat adhat, más modul pedig statikus `import` deklarációval függhet tőlük. A module graph lehetővé teszi, hogy bundler és runtime megértse a függőségeket és bizonyos optimalizálásokat végezzen.
Module graph
01
page
02
components
03
domain
04
utilities
05
vendor
Hogyan működik a gyakorlatban?
Static import korán ismert dependencyt hoz; dynamic `import()` futásidőben tölthet modult és code splitting alapja lehet. Browserben a module script saját module scope-ot kap és strict mode szemantikával fut.
- Named és default export eltérő import szintaxist ad.
- Ciklikus dependency technikailag lehetséges, de könnyen nehezen követhető inicializálást hoz.
- Dynamic import nem egyenlő automatikusan jó UX-szel: loading állapot kellhet.
- Server/client boundarynál egy import gráf meghatározhatja, mi kerül kliensbundle-ba.
Gyakorlati fejlesztői szemlélet
Tarts modulokat felelősség szerint. Egy `utils.js` szemétfiók helyett domain-specifikus modulok jobban mutatják a dependency irányt és könnyebben bonthatók kliens/szerver határnál.
Gyakori hibák és félreértések
- Barrel exportból észrevétlenül túl nagy dependency gráfot importálni.
- Dynamic importot minden komponensre mechanikusan alkalmazni.
- Module boundaryt csak fájlszervezési kérdésnek tekinteni.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy