JavaScript মিনিফাই করুন

নাম বদলানো, মুছে ফেলা, আর যাতে কখনো হাত দেওয়া যাবে না

তিনটি জিনিস ঘটে — কতটা সাশ্রয় হয় আর আপনাকে কতটা মূল্য দিতে হয়, সেই ক্রমে। হোয়াইটস্পেস ও কমেন্ট বাদ যায়, যার কোনো মূল্য নেই। অকেজো কোড (ডেড কোড) বাদ যায় — এমন ব্রাঞ্চ যা কখনো চলবে না, এমন ভেরিয়েবল যাতে মান দেওয়া হয় কিন্তু কখনো পড়া হয় না। আর লোকাল নামগুলো ছোট করা হয়, ফলে যত্ন করে রাখা calculateMonthlyTotal হয়ে যায় একটি মাত্র অক্ষর। সাশ্রয়ের বেশিরভাগ এই শেষটিতেই, আর এটিই আউটপুটকে পড়ার অযোগ্য করে তোলে — প্রকাশের জন্য ঠিক আছে, ডিবাগের জন্য অকেজো।

বাইরের জগৎ যেসব জিনিসকে নাম ধরে খোঁজে, সেগুলোর নাম বদলানো যায় না, আর এখানে ভুল করেই মিনিফায়ার কোড ভেঙে ফেলে। এক্সপোর্ট করা ফাংশন, স্ট্রিং হিসেবে অ্যাক্সেস করা অবজেক্ট প্রপার্টি, window দিয়ে পৌঁছানো যেকোনো কিছু, আর eval-এ ব্যবহৃত নাম — সবই অক্ষত থাকতে হবে, কারণ অন্য কোথাও কিছু একটা আপনার লেখা নাম ধরেই সেগুলো খুঁজছে। বিশেষ করে প্রপার্টিগুলো ডিফল্টভাবে অক্ষত রাখা হয়: user.emailAddress-এর নাম বদলালে যে মুহূর্তে অবজেক্টটি JSON-এ সিরিয়ালাইজ হবে বা আলাদাভাবে মিনিফাই করা কোড এটি পড়বে, তখনই সব ভেঙে যাবে।

একটি সোর্স ম্যাপ বা মূল ফাইল রেখে দিন। নাম হারিয়ে গেলে একজন আসল ব্যবহারকারীর কাছ থেকে আসা স্ট্যাক ট্রেস দেখাবে ফাংশন t-এর ৪৮,২১৩ নম্বর অক্ষরে ত্রুটি — যা থেকে কিছুই বোঝা যায় না। সোর্স ম্যাপ ডিবাগার ও এরর রিপোর্টিংয়ে মূল নাম ও লাইন নম্বর ফিরিয়ে আনে, আর এটি তৈরিতে কোনো খরচ নেই, কারণ এটি আলাদা ফাইল হিসেবে থাকে এবং শুধু কেউ ডেভেলপার টুলস খুললেই লোড হয়।

লাইসেন্স কমেন্ট ডিফল্টভাবে রাখা হয়, আর এটি পছন্দের ব্যাপার নয়, আইনি অবস্থান। প্রচুর ওপেন-সোর্স কোড উদার লাইসেন্সে দেওয়া হয় একটিমাত্র শর্তে — কপিরাইট নোটিশটি কোডের সঙ্গে থাকতে হবে; MIT ও BSD দুটোই তা স্পষ্ট বলে। থার্ড-পার্টি কোডসহ বান্ডল থেকে ওই কমেন্টগুলো মুছে দিলে যে লাইসেন্স আপনাকে কোডটি ব্যবহারের অনুমতি দিয়েছে, সেটিই ভঙ্গ হয়। এগুলোর আকার মাত্র কয়েকশো বাইট।

অন্য কিছু দরকার হলে

এই কাজ ব্রাউজারের ট্যাবে নয়, বিল্ডের মধ্যে হওয়া উচিত, আর আধুনিক বান্ডলার তা নিয়মিতভাবেই করে। esbuild --minify এবং Rollup বা Vite বিল্ডের সময় মিনিফাই করে, নিজে থেকেই সোর্স ম্যাপ তৈরি করে, আর — এর চেয়ে অনেক বেশি জরুরি — ট্রি শেকিং করে, অর্থাৎ আপনার ডিপেনডেন্সির যেসব এক্সপোর্ট আপনি কখনো ইমপোর্ট করেন না, সেগুলো বাদ দেয়। একটি বাস্তব অ্যাপ্লিকেশনে এতে যা সাশ্রয় হয়, তৈরি ফাইল মিনিফাই করে তার ধারেকাছেও যাওয়া যায় না।

অপটিমাইজ করার আগে মেপে দেখুন। বান্ডল অ্যানালাইজার সাধারণত দেখিয়ে দেয় যে ফাইলের বেশিরভাগ জুড়ে আছে একটিমাত্র বড় ডিপেনডেন্সি — একটি ডেট লাইব্রেরি, একটি আইকন সেট, একটি চার্টের জন্য পুরোটা টেনে আনা চার্টিং প্যাকেজ। সেটি বদলে ফেলা বা দরকারের সময় লোড (লেজি লোড) করা যেকোনো পরিমাণ মিনিফাইয়ের চেয়ে ভালো, আর কোড স্প্লিটিং — যাতে প্রতিটি পেজ শুধু দরকারি অংশটুকু লোড করে — দুটোর চেয়েই ভালো।