JavaScript মিনিফায়ার

JavaScript পেস্ট করে Terser দিয়ে ছোট করুন: অব্যবহৃত কোড সরে যায়, নাম সংক্ষিপ্ত হয় আর হোয়াইটস্পেস উধাও হয়। সিনট্যাক্স ত্রুটি ঠিক কোন লাইন ও কলামে তা দেখায়।

ব্রাউজারেই চলেসাইন-আপ লাগে নাকিছুই আপলোড হয় না

মিনিফাইড আউটপুট

JavaScript মিনিফায়ার কীভাবে ব্যবহার করবেন

  1. আপনার JavaScript পেস্ট করুন বা একটি .js ফাইল খুলুন।
  2. অপশন বেছে নিন: নাম ছোট করুন লোকাল ভেরিয়েবল সংক্ষিপ্ত করে, কমপ্রেস কোডকে ছোট সমতুল্য রূপে পুনর্লিখন করে, ES মডিউল টপ-লেভেল import/export চালু করে।
  3. আপনার ব্যবহারকারীদের ব্রাউজার যে ECMAScript টার্গেট সমর্থন করে তা বেছে নিন। সব evergreen ব্রাউজারের জন্য ES2020 নিরাপদ।
  4. আউটপুটের নিচে সাইজ, সাশ্রয় ও gzip অনুমান দেখুন।
  5. মিনিফাইড কোড কপি করুন বা output.min.js হিসেবে ডাউনলোড করুন।

JavaScript মিনিফায়ার কী করে?

মিনিফিকেশন JavaScript-এর কাজ না বদলে এটিকে ছোট করে। এই টুল Terser ব্যবহার করে, যা webpack, Vite ও Rollup-এর পেছনের মিনিফায়ার, এবং তিন ধরনের পরিবর্তন করে:

  • হোয়াইটস্পেস ও কমেন্ট অপসারণ: ইনডেন্টেশন, নতুন লাইন ও কমেন্ট JavaScript ইঞ্জিনের প্রয়োজন হয় না।
  • Mangling: subtotal-এর মতো লোকাল ভেরিয়েবল ও ফাংশন প্যারামিটারের নাম এক অক্ষরে পরিণত হয়। গ্লোবাল নাম ও অবজেক্ট প্রপার্টিতে হাত দেওয়া হয় না, তাই আপনার পাবলিক API কাজ করতে থাকে।
  • কমপ্রেশন: ধ্রুবক এক্সপ্রেশন আগেই গণনা করা হয়, অপ্রাপ্য কোড বাদ যায়, if স্টেটমেন্ট ternary হয়ে যায় আর ছোট ফাংশন ইনলাইন করা হয়।

মিনিফাই বনাম gzip: দুটোই কি লাগে?

হ্যাঁ। Gzip ও Brotli নেটওয়ার্কে পুনরাবৃত্ত বাইট-প্যাটার্ন কমপ্রেস করে, আর মিনিফিকেশন সেই বাইটগুলো সরিয়ে দেয় যা ব্রাউজারকে অন্যথায় ডাউনলোড, পার্স ও কম্পাইল করতে হতো। একটি সাধারণ স্ক্রিপ্ট মিনিফিকেশনে ৪০–৬০% এবং তারপর gzip-এ আরও ৬০–৭০% ছোট হয়। এখানে দেখানো gzip সাইজ আপনার সার্ভার আসলে কত পাঠাবে তার ভালো অনুমান।

লাইসেন্স কমেন্ট রাখা

অনেক ওপেন-সোর্স লাইসেন্স (MIT, BSD, Apache) কোডের সাথে কপিরাইট নোটিশ রাখতে বাধ্য করে। প্রচলিত রীতি অনুযায়ী, /*! দিয়ে শুরু হওয়া বা @license অথবা @preserve যুক্ত কমেন্টগুলো রাখা হয়, যখন লাইসেন্স কমেন্ট রাখুন চালু থাকে।

কখন হাতে মিনিফাই করবেন না

আপনার প্রজেক্টে আগে থেকেই bundler থাকলে প্রোডাকশন বিল্ড মিনিফাই করা ও ডিবাগিংয়ের জন্য source map তৈরির কাজ তাকেই করতে দিন। অনলাইন মিনিফায়ার আদর্শ এককালীন স্ক্রিপ্ট, CMS বা ট্যাগ ম্যানেজারের স্নিপেট, bookmarklet, এবং কোনো কোড কতটা ছোট হতে পারে তা দেখার জন্য।

সচরাচর জিজ্ঞাসিত প্রশ্ন

আমার কোড কি সার্ভারে আপলোড হয়?
না। Terser আপনার ব্রাউজার ট্যাবের ভেতরে চলে, তাই আপনার নিজস্ব কোড কখনো আপনার মেশিন ছেড়ে যায় না।
মিনিফিকেশন কি আমার কোড ভেঙে দিতে পারে?
Terser শুধু এমন রূপান্তর করে যা বৈধ JavaScript-এর আচরণ হুবহু একই রাখে। যে কোড Function.prototype.toString()-এর ওপর বা eval-এর মাধ্যমে লোকাল ভেরিয়েবলের নামের ওপর নির্ভর করে, তা প্রভাবিত হতে পারে; সেক্ষেত্রে নাম ছোট করুন বন্ধ করুন।
async/await, class ও optional chaining-এর মতো আধুনিক সিনট্যাক্স কি সমর্থিত?
হ্যাঁ। Terser ES2022+ সিনট্যাক্স পার্স করে। টার্গেট সেটিং শুধু নির্ধারণ করে আউটপুটে কোন সিনট্যাক্স ব্যবহার করা যাবে; এটি নতুন ফিচারকে পুরনো রূপে ট্রান্সপাইল করে না।
minify আর uglify-এর পার্থক্য কী?
দুটোর মানে একই। UglifyJS ছিল ক্লাসিক টুল; Terser হলো এর রক্ষণাবেক্ষণকৃত fork, যাতে ES2015+ সম্পূর্ণ সমর্থিত।

সম্পর্কিত টুল