জাভাস্ক্রিপ্ট বান্ডেল সাইজ ৭০% কমিয়ে আনার উপায়
বেশিরভাগ ওয়েব অ্যাপ প্রয়োজনের তুলনায় অনেক বেশি কোড পাঠায়। একটি গড় পেজ ১.৭ MB জাভাস্ক্রিপ্ট লোড করে। ডেভেলপাররা তাদের পাঠানো কোডের মাত্র ৩৫% ব্যবহার করেন।
ছোট বান্ডেল আপনার স্পিড বাড়ায়। এটি Largest Contentful Paint এবং Time to Interactive উন্নত করতে সাহায্য করে।
সাইজ কমানোর জন্য এই ১০টি ধাপ অনুসরণ করুন।
Tree shaking অব্যবহৃত exports গুলো সরিয়ে ফেলুন। ES Module syntax ব্যবহার করুন। আপনার
package.json-এ"sideEffects": falseযোগ করুন। এটি প্রায় ১৮% অব্যবহৃত কোড সরিয়ে ফেলে।Code splitting আপনার কোডকে ছোট ছোট চাঙ্কে (chunks) বিভক্ত করুন।
Dynamic imports ব্যবহারকারীর প্রয়োজন হলেই কেবল কোড লোড করুন। রাউটের (routes) জন্য lazy loading ব্যবহার করুন। এটি প্রাথমিক বান্ডেল সাইজ ২৮% পর্যন্ত কমাতে পারে।
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 ব্যবহার করুন। ফাইল ছোট করার ক্ষেত্রে Brotli ১৫% থেকে ২৫% বেশি কার্যকর।
Dead code elimination এমন কোড সরিয়ে ফেলুন যা কম্পিউটার কখনোই রান করতে পারবে না।
Lazy loading components পেজের যে অংশগুলো স্ক্রিনের নিচে (below the fold) থাকে, সেগুলো লোড হতে দেরি করান।
Polyfill pruning
@babel/preset-envব্যবহার করুন। আপনার ব্যবহারকারীরা আসলে যে ব্রাউজারগুলো ব্যবহার করেন, শুধুমাত্র সেগুলোর জন্যই polyfills পাঠান।
এই ভুলগুলো করা বন্ধ করুন:
- Development build পাঠানো। সবসময়
NODE_ENV=productionব্যবহার করুন। - পুরো লাইব্রেরি ইম্পোর্ট করা। পরিবর্তে নির্দিষ্ট ফাংশন ইম্পোর্ট করুন।
- অ্যানালাইসিস এড়িয়ে যাওয়া। আপনার বড় চাঙ্কগুলো দেখতে
webpack-bundle-analyzerব্যবহার করুন। - কম্প্রেশন ভুলে যাওয়া। আনকম্প্রেসড ফাইল Brotli ফাইলের চেয়ে ৫ গুণ বড় হয়।
এই লক্ষ্যগুলো দিয়ে আপনার অগ্রগতি ট্র্যাক করুন:
- মোট JS সাইজ: ১২০ KB-এর নিচে।
- LCP: ২.৫ সেকেন্ডের নিচে।
- TTI: ৩.৫ সেকেন্ডের নিচে।
প্রথমে tree shaking, code splitting এবং auditing-এর দিকে মনোযোগ দিন। এই তিনটি ধাপ প্রায়ই একটি স্প্রিন্টেই ৫০% থেকে ৭০% পর্যন্ত সাইজ কমিয়ে দিতে পারে।
উৎস: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g