𝗛𝗼𝘄 𝘁𝗼 𝗥𝗲𝗱𝘂𝗰𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗲 𝗦𝗶𝘇𝗲 𝗯𝘆 𝟳𝟬%
મોટાભાગની વેબ એપ્સ ખૂબ વધારે કોડ મોકલે છે. સરેરાશ પેજ 1.7 MB JavaScript લોડ કરે છે. ડેવલપર્સ તેમના દ્વારા મોકલવામાં આવતા કોડનો માત્ર 35% ભાગ જ વાપરે છે.
નાની બંડલ સાઈઝ તમારી સ્પીડ સુધારે છે. તમે Largest Contentful Paint અને Time to Interactive માં સુધારો કરી શકો છો.
સાઈઝ ઘટાડવા માટે આ 10 સ્ટેપ્સ અનુસરો.
Tree shaking બિનઉપયોગી exports દૂર કરો. ES Module syntax નો ઉપયોગ કરો. તમારા package.json માં "sideEffects": false ઉમેરો. આનાથી લગભગ 18% બિનઉપયોગી કોડ દૂર થાય છે.
Code splitting તમારા કોડને નાના chunks માં વિભાજિત કરો.
Dynamic imports જ્યારે યુઝર્સને જરૂર હોય ત્યારે જ કોડ લોડ કરો. routes માટે lazy loading નો ઉપયોગ કરો. આનાથી શરૂઆતની બંડલ સાઈઝ 28% સુધી ઘટાડી શકાય છે.
Image optimization CDN માંથી URL-આધારિત ટ્રાન્સફોર્મ્સનો ઉપયોગ કરો. મોટા inline SVGs નો ઉપયોગ કરવાનું બંધ કરો.
Dependency auditing npx bundle-phobia સાથે પેકેજ સાઈઝ તપાસો. • moment.js (67KB) ને બદલે date-fns (13KB) નો ઉપયોગ કરો. • lodash ને બદલે lodash-es નો ઉપયોગ કરો. • સાદી તારીખો માટે dayjs (2KB) નો ઉપયોગ કરો.
Minification વધારાની જગ્યા (spaces) અને કેરેક્ટર્સ દૂર કરો. મોટાભાગના bundlers આ કામ આપમેળે કરે છે.
Compression Gzip ને બદલે Brotli નો ઉપયોગ કરો. ફાઇલોને નાની કરવામાં Brotli 15% થી 25% વધુ સારું છે.
Dead code elimination એવો કોડ દૂર કરો જે સુધી કમ્પ્યુટર ક્યારેય પહોંચી શકતું નથી.
Lazy loading components પેજના એવા ભાગોનું લોડિંગ મોડું કરો જે 'below the fold' (સ્ક્રીન પર દેખાતા નથી) છે.
Polyfill pruning @babel/preset-env નો ઉપયોગ કરો. ફક્ત એવા બ્રાઉઝર્સ માટે જ polyfills મોકલો જે તમારા યુઝર્સ ખરેખર વાપરે છે.
આ ભૂલો કરવાનું બંધ કરો:
- Development builds મોકલવી. હંમેશા NODE_ENV=production નો ઉપયોગ કરો.
- આખી લાઈબ્રેરી ઈમ્પોર્ટ કરવી. તેના બદલે ચોક્કસ ફંક્શન્સ ઈમ્પોર્ટ કરો.
- એનાલિસિસ કરવાનું છોડી દેવું. તમારા મોટા chunks જોવા માટે webpack-bundle-analyzer નો ઉપયોગ કરો.
- કોમ્પ્રેશન ભૂલી જવું. અનકમ્પ્રેસ્ડ ફાઇલો Brotli ફાઇલો કરતા 5 ગણી મોટી હોય છે.
આ લક્ષ્યો સાથે તમારી પ્રગતિ ટ્રેક કરો:
- કુલ JS સાઈઝ: 120 KB થી ઓછી.
- LCP: 2.5s થી ઓછું.
- TTI: 3.5s થી ઓછું.
સૌ પ્રથમ tree shaking, code splitting અને auditing પર ધ્યાન આપો. આ ત્રણ સ્ટેપ્સ ઘણીવાર એક જ સ્પ્રિન્ટમાં 50% થી 70% ઘટાડો લાવી શકે છે.
Source: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g