𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗲 𝗦𝗶𝘇𝗲 ਨੂੰ 𝟳𝟬% ਤੱਕ ਕਿਵੇਂ ਘਟਾਓ
ਜ਼ਿਆਦਾਤਰ ਵੈੱਬ ਐਪਸ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕੋਡ ਭੇਜਦੀਆਂ ਹਨ। ਇੱਕ ਔਸਤ ਪੇਜ 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 ਵਾਧੂ ਸਪੇਸ ਅਤੇ ਅੱਖਰਾਂ ਨੂੰ ਹਟਾਓ। ਜ਼ਿਆਦਾਤਰ ਬੰਡਲਰ ਇਹ ਕੰਮ ਆਪਣੇ ਆਪ ਕਰਦੇ ਹਨ।
Compression Gzip ਦੀ ਬਜਾਏ Brotli ਦੀ ਵਰਤੋਂ ਕਰੋ। ਫਾਈਲਾਂ ਨੂੰ ਸੁੰਗੜਨ (shrinking) ਵਿੱਚ Brotli 15% ਤੋਂ 25% ਬਿਹਤਰ ਹੈ।
Dead code elimination ਉਹ ਕੋਡ ਹਟਾਓ ਜਿਸ ਤੱਕ ਕੰਪਿਊਟਰ ਕਦੇ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦਾ।
Lazy loading components ਪੇਜ ਦੇ ਉਹਨਾਂ ਹਿੱਸਿਆਂ ਦੀ ਲੋਡਿੰਗ ਵਿੱਚ ਦੇਰੀ ਕਰੋ ਜੋ 'below the fold' (ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਲੇ ਹਿੱਸੇ) ਵਿੱਚ ਹਨ।
Polyfill pruning @babel/preset-env ਦੀ ਵਰਤੋਂ ਕਰੋ। ਸਿਰਫ਼ ਉਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ polyfills ਭੇਜੋ ਜੋ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾ ਅਸਲ ਵਿੱਚ ਵਰਤਦੇ ਹਨ।
ਇਹਨਾਂ ਗਲਤੀਆਂ ਨੂੰ ਕਰਨਾ ਬੰਦ ਕਰੋ:
- Development builds ਭੇਜਣਾ। ਹਮੇਸ਼ਾ NODE_ENV=production ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਪੂਰੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੂੰ ਇੰਪੋਰਟ ਕਰਨਾ। ਇਸਦੀ ਬਜਾਏ ਖਾਸ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਇੰਪੋਰਟ ਕਰੋ।
- ਵਿਸ਼ਲੇਸ਼ਣ (analysis) ਨੂੰ ਛੱਡਣਾ। ਆਪਣੇ ਵੱਡੇ chunks ਦੇਖਣ ਲਈ webpack-bundle-analyzer ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਕੰਪਰੈਸ਼ਨ (compression) ਨੂੰ ਭੁੱਲ ਜਾਣਾ। ਅਣ-ਕੰਪ੍ਰੈਸਡ ਫਾਈਲਾਂ Brotli ਫਾਈਲਾਂ ਨਾਲੋਂ 5 ਗੁਣਾ ਵੱਡੀਆਂ ਹੁੰਦੀਆਂ ਹਨ।
ਇਹਨਾਂ ਟੀਚਿਆਂ ਨਾਲ ਆਪਣੀ ਪ੍ਰਗਤੀ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ:
- ਕੁੱਲ JS ਸਾਈਜ਼: 120 KB ਤੋਂ ਘੱਟ।
- LCP: 2.5s ਤੋਂ ਘੱਟ।
- TTI: 3.5s ਤੋਂ ਘੱਟ।
ਪਹਿਲਾਂ tree shaking, code splitting, ਅਤੇ auditing 'ਤੇ ਧਿਆਨ ਦਿਓ। ਇਹ ਤਿੰਨ ਕਦਮ ਅਕਸਰ ਇੱਕ sprint ਵਿੱਚ 50% ਤੋਂ 70% ਤੱਕ ਦੀ ਕਮੀ ਲਿਆਉਂਦੇ ਹਨ।
ਸਰੋਤ: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g