𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗜𝗺𝗲𝗳𝗮𝗳𝗮𝗻uliwa
Unatengeneza programu za React au Angular kwa kutumia faili nyingi. Una vipengele (components), huduma (services), na maktaba (libraries). Mpangilio huu unakusaidia.
Kivinjari (browser) hakijali kuhusu folda zako. Ukipakia faili 200, kivinjari hufanya maombi 200 ya mtandao (network requests). Hii inafanya programu yako iwe nzito.
Bundlers hutatua tatizo hili. Bundler huchukua kodi yako, import, na moduli. Inaziunganisha kuwa faili moja au chache ndogo. Hii inafanya upakiaji uwe wenye ufanisi.
Bundlers za kisasa hufanya zaidi ya kuunganisha faili tu:
• Minification: Huondoa nafasi za ziada na maoni (comments). Hupunguza majina ya vigezo (variable names) ili kufanya faili ziwe ndogo zaidi. • Tree shaking: Huondoa kodi ambayo huitumii kamwe. Huondoa kazi (functions) zisizotumika kutoka kwenye maktaba. • Code splitting: Hugawanya kodi katika vipande vidogo. Kivinjari hupakia tu kile ambacho mtumiaji anahitaji kwa sasa.
Faili ndogo huleta programu zenye kasi zaidi.
Kuna zana kuu mbili: Webpack na Vite.
Webpack huunganisha programu yako nzima kabla ya kuituma. Hii inafanya kazi vizuri kwa miradi mikubwa ya zamani (legacy projects). Ni rahisi kubadilika (flexible) lakini inaweza kuhisiwa kuwa nzito kwenye miradi mikubwa.
Vite ndicho chaguo la kisasa. Wakati wa maendeleo (development), hutuma faili moja kwa moja. Inahuisha (updates) faili unayobadilisha tu. Hii inafanya mabadiliko yawe ya papo hapo. Kwa ajili ya uzalishaji (production), Vite hutumia Rollup kutengeneza bundles zenye kasi.
Ulinganifu:
Webpack:
- Kasi ya maendeleo: Polepole zaidi
- Usanidi (Config): Tata
- Bora kwa: Miradi mikubwa ya zamani
Vite:
- Kasi ya maendeleo: Haraka
- Usanidi (Config): Rahisi
- Bora kwa: Miradi mipya ya kisasa
Tumia Vite kwa miradi mipya.
Kila bundler hufuata hatua tatu:
- Tengeneza grafu ya utegemezi (dependency graph): Inaonyesha jinsi kila faili inavyounganishwa na nyingine.
- Badili kodi: Inabadilisha TypeScript au JSX kuwa JavaScript ya kawaida.
- Toa bundle: Inaziunganisha na kuzifanya ziwe ndogo (minify) kila kitu kwenye folda kwa ajili ya kuweka hewani (deployment).
Fanya bundle yako iwe nyepesi kwa hatua hizi:
• Lazy loading: Pakia vipengele (components) tu wakati watumiaji wanapovihitaji. • Partial imports: Usi-import maktaba nzima. Import tu kazi (function) mahususi unayohitaji. • Analyze: Tumia zana kuona nini kinachochukua nafasi kwenye bundle yako. • Production builds: Kila mara weka hewani (deploy) matoleo ya uzalishaji (production builds). Matoleo ya maendeleo (development builds) ni makubwa sana.
Bundling inafanya programu yako ifanye kazi vizuri zaidi kwa kuipa kivinjari faili chache na ndogo zaidi.
Chanzo: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p