તમારી JavaScript બંડલ સાઈઝ 70% કેવી રીતે ઘટાડવી

મોટાભાગની વેબ એપ્લિકેશન્સમાં જરૂર કરતાં વધુ કોડ હોય છે. સરેરાશ વેબ પેજ 1.7 MB JavaScript લોડ કરે છે. ડેવલપર્સ તેમના દ્વારા ડિપ્લોય કરવામાં આવેલા કોડનો માત્ર 35% ભાગ જ વાપરે છે.

નાની બંડલ સાઈઝ તમારા Core Web Vitals માં સુધારો કરે છે. તમને ઝડપી Largest Contentful Paint અને ઝડપી Time to Interactive સ્કોર્સ મળે છે.

તમારી બંડલ સાઈઝ ઘટાડવા માટે આ 10 સ્ટેપ્સ અનુસરો:

  • Tree shaking: બિનઉપયોગી કોડ દૂર કરે છે. આને કામ કરવા માટે ES Module સિન્ટેક્સનો ઉપયોગ કરો.
  • Code splitting: તમારા કોડને નાના ટુકડાઓમાં વિભાજિત કરે છે.
  • Dynamic imports: જ્યારે યુઝરને જરૂર હોય ત્યારે જ કોડ લોડ કરો.
  • Image optimization: મોટી લાઇબ્રેરીઓને બદલે URL-આધારિત ટ્રાન્સફોર્મ્સનો ઉપયોગ કરો.
  • Dependency auditing: ભારે લાઇબ્રેરીઓને હળવી લાઇબ્રેરીઓ સાથે બદલો.
  • Minification: તમારી કોડ ફાઇલોનું કદ ઘટાડો.
  • Compression: Gzip કરતા વધુ સારા પરિણામો માટે Brotli નો ઉપયોગ કરો.
  • Dead code elimination: પહોંચી ન શકાય તેવા કોડ બ્રાન્ચિસ દૂર કરો.
  • Lazy loading: બિન-મહત્વપૂર્ણ ઘટકોને પછીથી લોડ કરવા માટે મોકૂફ રાખો.
  • Polyfill pruning: તમારા યુઝર્સને જરૂર હોય તેવા જ polyfills મોકલો.

ત્રણ ટેકનિકો સાથે મળીને શ્રેષ્ઠ કામ કરે છે. Lazy loading, polyfill pruning, અને dead code elimination તમારી સાઈઝ 15-30% ઘટાડી શકે છે.

તમારી ડિપેન્ડન્સીઝ ઇન્સ્ટોલ કરતા પહેલા તેનું ઓડિટ કરો. સાઈઝ તપાસવા માટે npx bundle-phobia નો ઉપયોગ કરો.

ઉદાહરણ તરીકે: • date-fns (13KB) એ moment.js (67KB) કરતા વધુ સારું છે. • date formatting માટે dayjs (2KB) એક ઉત્તમ વિકલ્પ છે. • સંપૂર્ણ lodash લાઇબ્રેરીને બદલે lodash-es નો ઉપયોગ કરો.

આ લક્ષ્યો સાથે તમારી પ્રગતિ તપાસો: • કુલ JS સાઈઝ: 120 KB થી ઓછી રાખવાનો લક્ષ્ય રાખો. • LCP: 2.5s થી ઓછું રાખવાનો લક્ષ્ય રાખો. • TTI: 3.5s થી ઓછું રાખવાનો લક્ષ્ય રાખો.

આ ભૂલો ટાળો: • Production builds ને બદલે development builds ડિપ્લોય કરવા. • જ્યારે તમને માત્ર એક જ ફંક્શનની જરૂર હોય ત્યારે આખી લાઇબ્રેરી ઇમ્પોર્ટ કરવી. • તમારા સર્વર પર Brotli compression ઇનેબલ કરવાનું ભૂલી જવું.

જો તમે tree shaking, code splitting, અને dependency auditing નો ઉપયોગ કરો છો, તો તમે એક સ્પ્રીન્ટમાં તમારો પેલોડ 50-70% ઘટાડી શકો છો.

સ્ત્રોત: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g