𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱

તમે ઘણા ફાઇલોનો ઉપયોગ કરીને React અથવા Angular એપ્સ લખો છો. તમારી પાસે components, services અને libraries હોય છે. આ વ્યવસ્થા તમને મદદ કરે છે.

બ્રાઉઝરને તમારા ફોલ્ડર્સ સાથે કોઈ લેવાદેવા નથી. જો તમે 200 ફાઇલો લોડ કરો છો, તો બ્રાઉઝર 200 નેટવર્ક રિક્વેસ્ટ કરે છે. આનાથી તમારી એપ ધીમી બને છે.

Bundlers આ સમસ્યાનું નિરાકરણ લાવે છે. એક bundler તમારો કોડ, imports અને modules લે છે. તે તેમને એક અથવા થોડી નાની ફાઇલોમાં જોડે છે. આ લોડિંગને કાર્યક્ષમ બનાવે છે.

આધુનિક bundlers માત્ર ફાઇલો જોડવાનું જ કામ નથી કરતા:

• Minification: તે વધારાની જગ્યા (spaces) અને કોમેન્ટ્સ દૂર કરે છે. તે ફાઇલોને નાની બનાવવા માટે variable ના નામો ટૂંકા કરે છે. • Tree shaking: તે એવો કોડ દૂર કરે છે જેનો તમે ક્યારેય ઉપયોગ નથી કરતા. તે libraries માંથી બિનઉપયોગી functions ને દૂર કરે છે. • Code splitting: તે કોડને નાના ટુકડાઓમાં વિભાજિત કરે છે. બ્રાઉઝર ફક્ત તે જ લોડ કરે છે જેની યુઝરને અત્યારે જરૂર છે.

નાની ફાઇલોથી એપ્સ ઝડપી બને છે.

બે મુખ્ય સાધનો અસ્તિત્વમાં છે: Webpack અને Vite.

Webpack તમારી આખી એપને સર્વ કરતા પહેલા bundle કરે છે. આ મોટા legacy પ્રોજેક્ટ્સ માટે સારું કામ કરે છે. તે લવચીક (flexible) છે પરંતુ મોટા પ્રોજેક્ટ્સમાં ધીમું લાગી શકે છે.

Vite એ આધુનિક પસંદગી છે. ડેવલપમેન્ટ દરમિયાન, તે ફાઇલો સીધી સર્વ કરે છે. તે ફક્ત તમે બદલેલી ફાઇલને જ અપડેટ કરે છે. આનાથી અપડેટ્સ ત્વરિત (instant) બને છે. Production માટે, Vite ઝડપી bundles બનાવવા માટે Rollup નો ઉપયોગ કરે છે.

તુલના:

Webpack:

  • Dev speed: ધીમું
  • Config: જટિલ
  • શ્રેષ્ઠ ઉપયોગ: મોટા legacy પ્રોજેક્ટ્સ માટે

Vite:

  • Dev speed: ઝડપી
  • Config: સરળ
  • શ્રેષ્ઠ ઉપયોગ: નવા આધુનિક પ્રોજેક્ટ્સ માટે

નવા પ્રોજેક્ટ્સ માટે Vite નો ઉપયોગ કરો.

દરેક bundler ત્રણ સ્ટેપ્સ અનુસરે છે:

  1. Build a dependency graph: તે દરેક ફાઇલ અન્ય ફાઇલો સાથે કેવી રીતે જોડાયેલી છે તેનું મેપિંગ કરે છે.
  2. Transform code: તે TypeScript અથવા JSX ને સાદા JavaScript માં રૂપાંતરિત કરે છે.
  3. Output the bundle: તે ડિપ્લોયમેન્ટ માટે બધું જ એક ફોલ્ડરમાં જોડે છે અને minify કરે છે.

આ સ્ટેપ્સ દ્વારા તમારા bundle ને હળવું (lean) રાખો:

• Lazy loading: જ્યારે યુઝર્સ તે તરફ જાય ત્યારે જ components લોડ કરો. • Partial imports: આખી library ઇમ્પોર્ટ ન કરો. ફક્ત તમને જરૂરી ચોક્કસ function ને જ ઇમ્પોર્ટ કરો. • Analyze: તમારા bundle માં કઈ વસ્તુ જગ્યા રોકે છે તે જોવા માટે સાધનોનો ઉપયોગ કરો. • Production builds: હંમેશા production builds ડિપ્લોય કરો. Development builds ખૂબ મોટી હોય છે.

Bundling બ્રાઉઝરને ઓછી અને નાની ફાઇલો આપીને તમારી એપનું પરફોર્મન્સ સુધારે છે.

સ્ત્રોત: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p