मेरे टूल

JS और CSS मिनिफ़ाई

कोड पेस्ट करें और मिनिफ़ाई संस्करण टाइप करते ही दिखता है — बचे कैरेक्टरों के साथ।

इसका उपयोग कैसे करें

  1. JavaScript या CSS बॉक्स में पेस्ट करें — मिनिफ़ाई संस्करण टाइप करते ही दिखता है, कोई बटन नहीं दबाना है।
  2. सिंटैक्स को ऑटो पर छोड़ें, या पहचान ग़लत हो तो JavaScript / CSS खुद चुनें; परिणाम तुरंत फिर से बनता है।
  3. हेडर कैरेक्टर बचत पहले → बाद में दिखाता है। आउटपुट कॉपी करें या .js / .css फ़ाइल के रूप में डाउनलोड करें।

उदाहरण

इनपुट

// Cart total with the free-shipping badge
const TAX = 0.08;

function total(items, coupon) {
  let sum = 0;
  for (const item of items) {
    sum += item.price * item.qty;
  }
  if (coupon) {
    sum -= coupon;
  }
  return { amount: sum * (1 + TAX), freeShipping: sum > 50 };
}

मिनिफ़ाई

const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}

कमेंट चला गया और व्हाइटस्पेस सिमट गया, पर हर आइडेंटिफ़ायर अपना नाम रखता है और हर लिटरल अपनी ठीक वर्तनी। रीडिंग 279 → 177 कैरेक्टर (−37%) बताती है।

नियम, सीमाएँ और ज्ञात समस्याएँ

  • सिर्फ़ व्हाइटस्पेस और कमेंट। कुछ नाम नहीं बदलता, कोई स्टेटमेंट नहीं सिकुड़ता और कोई कोड नहीं हटता — इसलिए मिनिफ़ाई आउटपुट मूल जैसा व्यवहार करता है, पर Terser के उत्पादन से बड़ा है।
  • /*! या //! से शुरू होने वाले कमेंट, और @license या @preserve का ज़िक्र करने वाले कमेंट रखे जाते हैं; बाकी हर कमेंट हट जाता है।
  • लाइन ब्रेक वहीं रहते हैं जहाँ हटाने से प्रोग्राम बदल जाता: return / throw / break / continue / yield / async के बाद, और दो स्टेटमेंट के बीच जहाँ JavaScript अपने आप सेमीकोलन डालता (a\nb, x={}\nfoo())। बाकी ज़्यादातर कोड एक पंक्ति में आता है।
  • JavaScript टोकनाइज़ होता है, पार्स नहीं: स्ट्रिंग, रेगुलर एक्सप्रेशन या टेम्पलेट लिटरल के अंदर "/*" कभी नहीं छुआ जाता। भाग और रेगुलर एक्सप्रेशन पिछले टोकन से अलग पहचाने जाते हैं; पंक्ति में फैला regex भाग माना जाता है।
  • CSS सिर्फ़ वह व्हाइटस्पेस खोता है जिसका कोई अर्थ नहीं हो सकता: { } ; , > ~ ! के आसपास और ":" के बाद, और "}" से पहले का अंतिम ";"। वंशज स्पेस रहते हैं (.a .b, .a.b नहीं बनता), ":" से पहले का स्पेस रहता है (a :hover, a:hover नहीं बनता), और calc(100% - 10px) अपने स्पेस रखता है क्योंकि वे सिंटैक्स का हिस्सा हैं।
  • कोई नाम बदलना (mangle) नहीं, कोई डेड-कोड हटाना नहीं, कोई drop_console नहीं: वे व्यवहार बदलते हैं, जो «मिनिफ़ाई» बटन को चुपचाप नहीं करना चाहिए।
  • समर्थित नहीं: HTML/SVG (वहाँ व्हाइटस्पेस <pre>, <textarea> और इनलाइन एलिमेंट पर निर्भर है), TypeScript टाइप-स्तरीय बदलाव, JSX/TSX इनपुट, सोर्स मैप और बहु-फ़ाइल मिलाना। JSX पहचाना जाता है और चेतावनी मिलती है।
  • इनपुट के अंत में अनबंद स्ट्रिंग, टेम्पलेट, कमेंट या url( चेतावनी है, त्रुटि नहीं: बाकी कोड फिर भी मिनिफ़ाई होता है। असंतुलित ब्रैकेट भी चेतावनी हैं — यह वैलिडेटर नहीं है।
  • रीडिंग Unicode कोड पॉइंट गिनती है, बाइट नहीं और UTF-16 यूनिट नहीं; प्रतिशत पूरे अंक तक गोल होते हैं और आउटपुट बढ़ने पर +n% के रूप में दिखते हैं। सब कुछ आपके ब्राउज़र में चलता है: कुछ अपलोड, संग्रहीत या URL में नहीं जोड़ा जाता।
  • 2,00,000 कैरेक्टर से ऊपर परिणाम टाइप करना रोकने के लगभग 0.6 s बाद अपडेट होता है; टेक्स्ट कभी काटा नहीं जाता। आउटपुट LF का उपयोग करता है और अंत में नया लाइन ब्रेक नहीं होता।

कोड छोटा हो जाने के बाद लोग आमतौर पर यह चाहते हैं।

कोड फ़ॉर्मेटर (beautifier)

JSON टूलबॉक्स

XML फ़ॉर्मेटर