JavaScript মিনিফিকেশন কীভাবে কাজ করে
Terser আপনার কোডের Abstract Syntax Tree-এর উপর চার ধাপে কাজ করে। প্রতিটি ধাপ স্বাধীন, তাই অন্যগুলো না ভেঙে যেকোনোটি চালু বা বন্ধ করা যায়।
- পার্স. Terser আপনার JavaScript একটি AST-এ পার্স করে। যেকোনো সিনট্যাক্স ত্রুটি এখানে টোকেন ও লাইন সহ সামনে আসে, তাই কোনো রূপান্তর চলার আগে আসল সমস্যা খুঁজে পাওয়া যায়। পার্সার সর্বশেষ stage-4 প্রস্তাবনা পর্যন্ত প্রতিটি স্ট্যান্ডার্ড ECMAScript কনস্ট্রাক্ট গ্রহণ করে।
- কম্প্রেস. কম্প্রেসার AST স্ক্যান করে ডজনখানেক সিম্যান্টিক্স-প্রিজার্ভিং ট্রান্সফর্ম প্রয়োগ করে: কনস্ট্যান্ট ফোল্ডিং, ডেড-ব্র্যাঞ্চ ইলিমিনেশন, সংক্ষিপ্ত বিশুদ্ধ ফাংশনের ইনলাইনিং, পর্যায়ক্রমিক
varডিক্লারেশন সংকুচিত করা, এবং সমতুল্য স্টেটমেন্ট ফর্ম পুনর্লিখন। - ম্যাঙ্গেল. ম্যাঙ্গেলার প্রতিটি স্কোপের মধ্যে লোকাল বাইন্ডিং সবচেয়ে ছোট অনন্য আইডেন্টিফায়ারে (
a,b,c, …) পুনরায় নামকরণ করে। শুধুমাত্র মডিউল সীমানা থেকে বের হতে পারে না এমন নামগুলো পুনরায় নামকরণ হয়, তাই এক্সপোর্টেড বাইন্ডিং, প্রপার্টি কী ও গ্লোবাল রেফারেন্স অক্ষুণ্ণ থাকে। - রেন্ডার. Terser ট্রান্সফর্ম করা AST হোয়াইটস্পেস সংকুচিত করে ও স্টেটমেন্ট বিভাজক ব্যাকরণ গ্রহণ করে এমন ন্যূনতমে কমিয়ে একটি JavaScript স্ট্রিংয়ে প্রিন্ট করে। প্রিজার্ভ-লাইসেন্স টগল
/*! … */ব্লক না রাখলে মন্তব্য সরানো হয়।
JavaScript মিনিফাই কেন করবেন
- দ্রুত পেজ লোড. ছোট স্ক্রিপ্ট তাড়াতাড়ি পার্স ও এক্সিকিউট হয়। ৪G মোবাইল সংযোগে ৪০ শতাংশ বাইট হ্রাস Time to Interactive থেকে বাস্তব সেকেন্ড কমায়, যা Google-এর PageSpeed Insights সবচেয়ে আক্রমণাত্মকভাবে পরিমাপ করে।
- কম CDN ইগ্রেস বিল. CloudFront, Cloudflare ও Fastly প্রতি গিগাবাইট ইগ্রেসে বিল করে। মাসে লক্ষ লক্ষ পেজ ভিউতে ৪০ শতাংশ স্ক্রিপ্ট হ্রাস ইনভয়েসে বাস্তব সাশ্রয়ে পরিণত হয়।
- এই মিনিফায়ার আপনার পেজকে ভার দেয় না. Terser ~১ MB আনকম্প্রেসড। বেশিরভাগ অনলাইন মিনিফায়ার পেজ লোডে পুরো লাইব্রেরি শিপ করে, যা তাদের নিজস্ব Lighthouse স্কোর ক্ষতি করে। এই পেজ Terser লেজি-লোড করে শুধুমাত্র আপনি Minify ক্লিক করলে বা Live মোড চালু করলে।
- Core Web Vitals পাস করা. Lighthouse ও PageSpeed Insights বড় JavaScript-কে খারাপ Total Blocking Time-এর সরাসরি অবদানকারী হিসেবে চিহ্নিত করে। ভেন্ডর লাইব্রেরি ও অ্যাপ্লিকেশন বান্ডেল মিনিফাই করা Lighthouse-এ সবচেয়ে দ্রুত জয় — সাধারণত দশ বা বিশ পয়েন্ট মূল্যের একবারের হ্রাস।
সাধারণ ব্যবহার
JavaScript মিনিফিকেশন একটি আধুনিক ওয়েব প্রজেক্টের প্রায় প্রতিটি ধাপে দেখা যায়।
- প্রি-কমিট হুক: রিপোতে কমিট করার আগে পৃথক ইউটিলিটি স্ক্রিপ্ট মিনিফাই করুন যাতে কমিট করা আর্টিফ্যাক্ট প্রোডাকশন-রেডি হয় এবং ডিফ হোয়াইটস্পেস পরিবর্তনের পরিবর্তে লজিক পরিবর্তন দেখায়।
- তৃতীয় পক্ষের উইজেট অডিট: একটি ভেন্ডরের এম্বেড স্নিপেট পেস্ট করুন এবং লক্ষ লক্ষ ব্যবহারকারীকে পরিবেশন করার আগে এটি ইতিমধ্যেই মিনিফাই কিনা বা আরও সংকুচিত করা যায় কিনা পরীক্ষা করুন।
- লিগেসি স্ক্রিপ্ট পরিষ্কার: পুরানো jQuery প্লাগইন ও হাতে লেখা স্ক্রিপ্ট কম্প্রেস করুন যা আপনার বর্তমান বিল্ড পাইপলাইনের আগের, সোর্স ট্রি না ছুঁয়ে।
একটি কাজের উদাহরণ
একটি ছোট ফাংশন নিন: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — মন্তব্য সহ প্রায় ১৩০ বাইট। Mangle ও Compress উভয় চালু করে উপরে পেস্ট করুন। আউটপুট প্রায় function add(n,o){return n+o}console.log(add(1,2));-এ সংক্ষিপ্ত হয় — প্রায় ৫৫ বাইট, ৫৮ শতাংশ হ্রাস। ফাংশন নাম add টিকে থাকে কারণ এটি console.log কলে রেফারেন্সড; প্যারামিটার নামগুলো এককে সংক্ষিপ্ত হয় কারণ এগুলো ফাংশন বডিতে স্থানীয়।
FAQ
এটি কি আমার ব্রাউজারে চলে?
হ্যাঁ। Terser প্রথমবার আপনি Minify ক্লিক করলে বা Live মোড সক্ষম করলে লেজি-লোড হয় — প্রায় ২০০ KB কম্প্রেসড আপনার ব্রাউজার ক্যাশে আসে, তারপর আর কিছু ডাউনলোড হয় না। আপনার কোড পেজ ছেড়ে যায় না।
নাম ম্যাঙ্গেলিং কী এবং এটি কি নিরাপদ?
ম্যাঙ্গেলিং বাইট বাঁচাতে লোকাল ভেরিয়েবল এককে পুনরায় নামকরণ করে। স্ব-সম্পূর্ণ স্ক্রিপ্ট ও IIFE বান্ডেলের জন্য নিরাপদ কারণ নামকরণ স্কোপ কখনও ছাড়ে না। র্যাপার ছাড়া নাম দিয়ে গ্লোবাল এক্সপোজ করা স্ক্রিপ্টের জন্য (যেমন window.myLib = …) নিরাপদ নয়। অনিশ্চিত থাকলে Mangle বন্ধ রাখুন।
মিনিফিকেশনের পরে আমার কোড কেন ভেঙে গেল?
তিনটি সাধারণ সন্দেহভাজন: স্ট্রিং দিয়ে ভেরিয়েবল রেফারেন্স করা eval বা with; মূল আইডেন্টিফায়ারের উপর নির্ভরকারী Function.name বা arguments.callee পড়া; বা পুনরায় নামকরণ করা নাম দিয়ে এক্সপোজ করা গ্লোবাল। পুনরায় নামকরণ বা Compress ট্রান্সফর্ম কারণ কিনা আলাদা করতে প্রথমে Mangle বন্ধ করুন।
এটি কি আধুনিক সিনট্যাক্স (ES2020+) সমর্থন করে?
হ্যাঁ। ECMAScript লক্ষ্য ES2020 বা Next-এ সেট করুন এবং Terser অপশনাল চেইনিং, nullish coalescing, টপ-লেভেল await ও লজিক্যাল-অ্যাসাইনমেন্ট অপারেটর সংরক্ষণ করে। ES5-এ সেট করলে Terser যতটুকু পারে ডাউন-কম্পাইল করে, কিন্তু এটি একটি সম্পূর্ণ ট্রান্সপাইলার নয় — ES5 যে সিনট্যাক্স একেবারে উপস্থাপন করতে পারে না তার জন্য Babel ব্যবহার করুন।
Terser দিয়ে ব্রাউজার-সাইড JavaScript মিনিফিকেশন একটি বিল্ড টুল না যোগ করেই প্রোডাকশন-মানের আউটপুট দেয়। একটি স্ক্রিপ্ট পেস্ট করুন, ECMAScript লক্ষ্য বেছে নিন, ফলাফল কপি বা ডাউনলোড করুন। কিছুই আপলোড হয় না, কোনো অ্যাকাউন্ট নেই, কোনো বিল্ড পাইপলাইন নেই।