Bundle Size का विश्लेषण
Bundle Size क्यों मायने रखता है
एक बड़ा JavaScript bundle आपके app के interactive होने से पहले download और parse होने में ज़्यादा समय लेता है, directly load performance को hurt करते हुए, खासकर slower connections या devices पर।
यह समझना कि actually आपके bundle के अंदर क्या है इसे वहां trim करने की तरफ पहला step है जहां मायने रखता है।
उदाहरण: Why Bundle Size Matters
// Run in your local React project (npm install required)
// Vite example: install and configure a visualizer plugin
// npm install --save-dev rollup-plugin-visualizer
// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';
export default { plugins: [visualizer({ open: true })] };⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
एक Bundle Visualization पढ़ना
एक bundle visualizer typically एक interactive treemap produce करता है, जहां हर rectangle की size represent करती है कि वह specific module final bundle में कितनी space लेता है।
यह immediately obvious बना देता है कि कौन सी dependencies (या आपके अपने code के parts) bundle size में सबसे बड़े contributors हैं।
Bundle Size कम करना
एक बड़ा contributor spot करने के बाद common fixes में शामिल हैं: एक बड़ी library से सिर्फ उस specific function को import करना जिसकी ज़रूरत है (पूरी library के बजाय), एक heavy dependency को एक lighter alternative से replace करना, और non-critical code को React.lazy के पीछे move करना ताकि यह initial bundle का हिस्सा बिल्कुल न हो।
import debounce from 'lodash/debounce')।उदाहरण: Reducing Bundle Size
// Run in your local React project (npm install required)
// Importing the whole library (larger bundle impact):
// import _ from 'lodash';
// _.debounce(fn, 300);
// Importing just what's needed (smaller bundle impact):
import debounce from 'lodash/debounce';
debounce(() => {}, 300);⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- पूरी library import करना जब इससे सिर्फ एक छोटा function actually उपयोग होता है, bundle को unnecessarily bloat करते हुए।
- यह notice न करना कि एक single large dependency bundle को dominate करती है जब तक actually इसे visualize न किया जाए।
- यह भूल जाना कि कुछ libraries common use cases के लिए smaller, tree-shakeable alternatives या lighter-weight substitutes offer करती हैं।
- Bundle analysis tools visualize करते हैं कि आपके app के final JavaScript bundle में actually क्या है, और हर piece कितनी space लेता है।
- एक common tool rollup-plugin-visualizer या webpack-bundle-analyzer है, एक interactive treemap generate करते हुए।
- बड़ी, rarely-used dependencies lazy-loading या lighter alternative से replacement के लिए prime candidates हैं।
- Tree-shaking (dead-code elimination) ES module imports और इसे properly support करने वाली libraries के साथ सबसे अच्छा काम करता है।
Build-tool feature (Vite/webpack के साथ काम करता है); कोई specific React version requirement नहीं।
Chapter Quiz — Complete all 13 topics to unlock
0/13 topics done
Complete these topics first:
- Why Performance Matters
- Optimizing with React.memo
- Avoiding Unnecessary Re-renders
- Using the React Profiler
- Analyzing Bundle Size
- Image Optimization Techniques
- React as a PWA
- Creating a Production Build
- Environment Variables in React
- Deploying to Netlify
- Deploying to Vercel
- Basic CI/CD for React Apps
- SEO Basics for React SPAs