JavaScript সাজান, অথবা মিনিফাই করে দেখুন কত বাইট কমল
আপনার ব্রাউজারে চলে। আপনি যা লেখেন তা কোথাও পাঠানো হয় না।JavaScript ফরম্যাট করলে ইনডেন্ট যোগ হয় এবং স্টেটমেন্টগুলো পড়ার মতো জায়গায় বসে; মিনিফাই করলে প্রোডাকশনের জন্য নাম ও স্পেস বাদ যায়। কত বাইট বাদ গেল তা দেখানো হয়, তাই 50 KB বান্ডেলে সাশ্রয়টা প্রকাশের আগেই দেখা যায়। আপনার কোড ব্রাউজারে পার্স হয় এবং কখনো আপলোড হয় না।
এই পৃষ্ঠাটি ইংরেজি মূল লেখা থেকে যন্ত্রের সাহায্যে অনুবাদ করা হয়েছে। এই অনুবাদটি এখনও কোনো মানুষ পর্যালোচনা করেননি, তাই ইংরেজি সংস্করণটিকেই নির্ভরযোগ্য ধরুন। ইংরেজি মূল লেখাটি পড়ুন
JavaScript বা JSX বক্সে পেস্ট করুন, অথবা একটি উদাহরণ দেখুন চাপুন; TypeScript সমর্থিত নয়।
Prettier দিয়ে নতুন করে সাজাতে সাজান রাখুন, অথবা terser দিয়ে ছোট করতে মিনিফাই বেছে নিন।
সাজান মোডে ইনডেন্ট, র্যাপ করুন, সেমিকোলন ও একক উদ্ধৃতিচিহ্ন সেট করুন, অথবা মিনিফাই মোডে দেখানো অপশনগুলো।
ফলাফল নিতে কপি বা ডাউনলোড চাপুন।
এই JavaScript ফরম্যাটার একটি স্ক্রিপ্ট ফাইল থেকে মানুষ যে দুটি জিনিস চায় তা করে। সাজান মোড কোডটি Prettier দিয়ে চালিয়ে একই কোড আপনার মতো করে সাজিয়ে দেয়: দুই স্পেস, চার স্পেস বা একটি Tab, সেমিকোলনসহ বা ছাড়া, একক বা দ্বৈত উদ্ধৃতিচিহ্ন, আর আপনার বেছে নেওয়া লাইনের প্রস্থ। মিনিফাই মোড terser চালিয়ে সমতুল্য সবচেয়ে ছোট ফাইল দেয়, সঙ্গে আগের সাইজ, পরের সাইজ ও কত শতাংশ বাঁচল।
দিনের মাঝে আসা ছোট কাজগুলোর জন্য এটি উপযুক্ত। অনলাইনের কোনো উত্তর থেকে কপি করা স্নিপেট এমন স্টাইলে লেখা যা আপনার প্রকল্পে নেই। উত্তরাধিকার সূত্রে পাওয়া একটি ফাইলে প্রতি লাইনে তিনটি স্টেটমেন্ট। নিজে লেখার সিদ্ধান্ত নেওয়ার আগে একটি সহায়ক ফাংশন প্রকাশের পর মোটামুটি কত বড় হবে তা দেখতে চান। আর কখনো দরকার হয় উল্টোটা: একটি মিনিফাই করা বান্ডেল এতটা খুলে দেখা যাতে বোঝা যায় তৃতীয় পক্ষের স্ক্রিপ্ট কী করছে।
মিনিফাইয়ের দুটি সুইচ আছে। লোকাল ভেরিয়েবলের নাম একক অক্ষরে বদলানো থেকেই বেশিরভাগ সাশ্রয় আসে, আর বাইরে থেকে দেখা যায় এমন কিছুই বদলায় না। ফাংশনের নাম রাখলে কয়েক বাইট খরচ হয়, কিন্তু স্ট্যাক ট্রেস এবং ফাংশনের নাম পড়ে এমন সবকিছু পড়ার উপযোগী থাকে, যা গুরুত্বপূর্ণ যদি আপনি ত্রুটি কোনো মনিটরিং সার্ভিসে পাঠান।
টুলটি সাধারণ JavaScript ও JSX পড়ে। TypeScript সমর্থিত নয়: পেস্ট করলে পার্স ত্রুটি কোনো কাজে আসত না, তাই পেজটি আগে যাচাই করে জানায় কোন TypeScript গঠন পাওয়া গেছে, যেমন টাইপ অ্যালিয়াস বা টাইপযুক্ত প্যারামিটার। সবকিছু আপনার ব্রাউজারে চলে, তাই অপ্রকাশিত কোড এবং কী থাকা যেকোনো কিছু কখনো আপনার ডিভাইস ছেড়ে যায় না।
হ্যাঁ। কোনো সাইন-আপ নেই, সাইজের সীমা নেই, কতগুলো ফাইল চালাবেন তারও সীমা নেই। টুলের বাইরে দেখানো কয়েকটি বিজ্ঞাপনে পেজটির খরচ চলে, আর আপনার কোডে কিছুই ঢোকানো হয় না।
না। Prettier ও terser দুটোই আপনার ব্রাউজারে চলে। অপ্রকাশিত কোড, অভ্যন্তরীণ এন্ডপয়েন্ট বা কনফিগ অবজেক্টে থাকা API কী কখনো আপনার ডিভাইস ছেড়ে যায় না, আর ট্যাব বন্ধ করলে কিছুই রাখা হয় না।
না। এটি সাধারণ JavaScript ও JSX পড়ে। TypeScript পেস্ট করলে, কিছুই না বোঝানো পার্স ত্রুটির বদলে পেজটি জানায় কোন গঠন পাওয়া গেছে, যেমন টাইপ অ্যালিয়াস বা টাইপযুক্ত প্যারামিটার। আগে টাইপগুলো সরান, অথবা TypeScript বোঝে এমন এডিটর ব্যবহার করুন।
কমেন্টসহ পড়ার মতো সোর্স কোড সাধারণত 40 থেকে 60 শতাংশ ছোট হয়, আর লম্বা ভেরিয়েবল নাম ও ফাঁকা লাইন থাকলে আরও অনেক বেশি। আগে থেকে মিনিফাই করা কোড প্রায় বদলায় না। সঠিক বাইট সংখ্যা দেখানো হয়, যাতে আপনি তুলনা করতে পারেন।
Mangling লোকাল ভেরিয়েবল ও ফাংশনের আর্গুমেন্টের নাম একক অক্ষরে বদলে দেয়। ফাইলের বাইরের কিছুই সেই নাম দেখতে পায় না, তাই আচরণ বদলায় না, আর সাধারণত এটিই একক সবচেয়ে বড় সাশ্রয়। এক্সপোর্ট করা নাম ও অবজেক্টের প্রপার্টি অক্ষত থাকে।
লেআউট ফেরানো যায়, নাম নয়। সাজান মোড লাইন ব্রেক, ইনডেন্ট ও ফাঁক যোগ করে কোড পড়ার উপযোগী করে, কিন্তু মিনিফায়ার মূল ভেরিয়েবল নাম ও কমেন্ট বাদ দিয়ে দেয়, আর কোনো টুলই সেগুলো ফিরিয়ে আনতে পারে না।
এখনও আটকে আছেন? JavaScript ফরম্যাটার ও মিনিফায়ার সম্পর্কে প্রশ্ন করুন আর যিনি জানেন তিনিই উত্তর দিতে পারেন। কোনো অ্যাকাউন্ট লাগবে না।