আপনার JavaScript Bundle Size কীভাবে ৭০% কমিয়ে আনবেন
বেশিরভাগ ওয়েব অ্যাপ্লিকেশন প্রয়োজনের তুলনায় অনেক বেশি কোড শিপ করে। একটি গড় ওয়েব পেজ ১.৭ MB JavaScript লোড করে। ডেভেলপাররা তাদের ডেপ্লয় করা কোডের মাত্র প্রায় ৩৫% ব্যবহার করেন।
ছোট বান্ডেল আপনার Core Web Vitals উন্নত করে। এর ফলে আপনি দ্রুততর Largest Contentful Paint এবং দ্রুততর Time to Interactive স্কোর পাবেন।
আপনার বান্ডেল সাইজ ছোট করতে এই ১০টি ধাপ অনুসরণ করুন:
- Tree shaking: অব্যবহৃত কোড সরিয়ে ফেলে। এটি কার্যকর করতে ES Module সিনট্যাক্স ব্যবহার করুন।
- Code splitting: আপনার কোডকে ছোট ছোট অংশে বিভক্ত করে।
- Dynamic imports: ব্যবহারকারীর প্রয়োজন অনুযায়ী কোড লোড করে।
- Image optimization: বড় লাইব্রেরির পরিবর্তে URL-ভিত্তিক ট্রান্সফর্ম ব্যবহার করুন।
- Dependency auditing: ভারী লাইব্রেরির পরিবর্তে হালকা লাইব্রেরি ব্যবহার করুন।
- Minification: আপনার কোড ফাইলগুলোর আকার ছোট করে।
- Compression: Gzip-এর চেয়ে ভালো ফলাফলের জন্য Brotli ব্যবহার করুন।
- Dead code elimination: কোডের অপ্রয়োজনীয় বা unreachable অংশগুলো সরিয়ে ফেলে।
- Lazy loading: অপ্রয়োজনীয় বা non-critical কম্পোনেন্টগুলোকে পরে লোড হওয়ার জন্য স্থগিত রাখে।
- Polyfill pruning: শুধুমাত্র প্রয়োজনীয় polyfill-গুলো শিপ করে।
তিনটি কৌশল একসাথে সবচেয়ে ভালো কাজ করে। Lazy loading, polyfill pruning এবং dead code elimination আপনার সাইজ ১৫-৩০% কমিয়ে আনতে পারে।
কোনো ডিপেন্ডেন্সি ইনস্টল করার আগে তা অডিট করে নিন। সাইজ চেক করতে npx bundle-phobia ব্যবহার করুন।
উদাহরণস্বরূপ: • date-fns (13KB), moment.js (67KB)-এর চেয়ে ভালো। • ডেট ফরম্যাটিংয়ের জন্য dayjs (2KB) একটি চমৎকার বিকল্প। • সম্পূর্ণ lodash লাইব্রেরির পরিবর্তে lodash-es ব্যবহার করুন।
এই টার্গেটগুলোর মাধ্যমে আপনার অগ্রগতি যাচাই করুন: • Total JS size: ১২০ KB-এর নিচে রাখার লক্ষ্য রাখুন। • LCP: ২.৫ সেকেন্ডের নিচে রাখার লক্ষ্য রাখুন। • TTI: ৩.৫ সেকেন্ডের নিচে রাখার লক্ষ্য রাখুন।
এই ভুলগুলো এড়িয়ে চলুন: • Production build-এর পরিবর্তে development build ডেপ্লয় করা। • যখন মাত্র একটি ফাংশন প্রয়োজন, তখন পুরো লাইব্রেরি ইম্পোর্ট করা। • সার্ভারে Brotli compression চালু করতে ভুলে যাওয়া।
আপনি যদি tree shaking, code splitting এবং dependency auditing ব্যবহার করেন, তবে মাত্র একটি স্প্রিন্টে আপনার পেলোড ৫০-৭০% কমিয়ে আনতে পারেন।
উৎস: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g