क्या मिनिफिकेशन से कोड बिगड़ सकता है?

Terser डिफ़ॉल्ट रूप से एहतियात बरतता है और अर्थ कायम रखता है। mangle केवल वही वेरिएबल बदलता है जो एक्सपोर्ट नहीं हुए, और compress उन परिवर्तनों से बचता है जिनकी सुरक्षा वह सिद्ध नहीं कर सकता। यदि कोड Function.name पर निर्भर है या स्रोत पर eval करता है, तो उस फ़ाइल के लिए mangle बंद कर दें।

आम तौर पर कितनी कमी मिल जाती है?

JavaScript आम तौर पर 40 से 70% तक छोटा हो जाता है। लंबी टिप्पणियों, बड़े नामों या बिना उपयोग वाली शाखाओं वाला कोड ज़्यादा घटता है। पहले से कसा हुआ या जिसमें मुख्यतः स्ट्रिंग साहित्य हो, वैसा कोड कम घटता है। gzip लगाने के बाद यह अंतर और घट जाता है।

minify, compress और mangle में क्या अंतर है?

minify छाता शब्द है। compress कोड स्तर पर बदलाव करता है जैसे कि स्थिरांक मिलाना और बेकार शाखाएँ हटाना। mangle पहचानकर्ताओं को छोटे नाम देता है। हर एक को अलग चलाया जा सकता है, पर तीनों मिलकर आमतौर पर सबसे छोटा आउटपुट देते हैं।

जब सर्वर पहले से gzip या brotli लगाता है, तो क्या minify ज़रूरी है?

ज़रूरी है। gzip टेक्स्ट की पुनरावृत्ति घटाता है, पर लंबे वेरिएबल नाम नहीं बदलता और बेकार शाखाएँ नहीं हटाता। मिनिफ़ाई किया गया कोड gzip के बाद भी छोटा रहता है और लोड होने पर तेज़ी से पार्स होता है। दोनों चरण जुड़ते हैं, दोहराते नहीं।

क्या यह TypeScript या ES2022 जैसे नए सिंटैक्स पर भी काम करता है?

शुद्ध TypeScript को पहले कंपाइल करना पड़ता है क्योंकि Terser केवल JavaScript समझता है। ES2022 तक के आधुनिक सिंटैक्स (प्राइवेट फ़ील्ड, टॉप-लेवल await, ऑप्शनल चेनिंग) सीधे पार्स हो जाते हैं, Babel की ज़रूरत नहीं।

JS मिनिफायर

फ़ाइल साइज़ कम करने के लिए JavaScript कोड को मिनिफाई करें

मूल आकार

// Utility library — helper functions
(function () {
  "use strict";

/**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

// Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

// Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

console.log("Utilities loaded");

window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

// Utility library — helper functions
(function () {
  "use strict";

  /**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

  // Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

  // Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

  console.log("Utilities loaded");

  window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

सेटिंग्स

उदाहरणलक्ष्य संस्करण

चरों को अस्पष्ट करेंसंपीड़ित करेंconsole.log हटाएँक्लास नाम बनाए रखेंफ़ंक्शन नाम बनाए रखें

Ctrl+Enter से मिनिफाई करें

JS मिनिफायर क्या है?

JS Minifier Terser इंजन का उपयोग करके JavaScript कोड से व्हाइटस्पेस और कमेंट हटाकर एवं वेरिएबल नाम छोटे करके कोड को संपीड़ित करता है। इससे पेज लोड तेज़ होता है और बैंडविड्थ लागत कम होती है, जबकि कोड की कार्यक्षमता पूरी तरह सुरक्षित रहती है।

मिनिफायर आपके कोड पर स्थानीय रूप से Terser चलाता है: सफेद जगहें और टिप्पणियाँ हटाता है, mangle चालू होने पर लोकल वेरिएबल को एक-अक्षर के नाम देता है, compress चालू होने पर सुरक्षित AST बदलाव करता है, और console.log कॉल हटा सकता है। मूल आकार, छोटा किया गया आकार और बचत प्रतिशत दिखाता है ताकि लाइव करने से पहले फायदा पुष्ट किया जा सके।

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

इनपुट एडिटर में अपना JavaScript कोड पेस्ट करें या .js फ़ाइल अपलोड करें।
मिनिफिकेशन विकल्प चुनें: मैंगलिंग (वेरिएबल नाम छोटा करना), कम्प्रेशन और console.log हटाने को टॉगल करें।
कोड प्रोसेस करने के लिए Minify क्लिक करें। आकार कमी जाँचें, फिर मिनिफाइड फ़ाइल डाउनलोड करें या क्लिपबोर्ड पर कॉपी करें।

कब उपयोग करें

ऐसे CDN पर अपलोड करने से पहले JS बंडल को छोटा करना, जिसमें कोई बिल्ड स्टेप नहीं है।
CMS थीम में चिपकाने से पहले लाइब्रेरी से टिप्पणियाँ और console स्टेटमेंट हटाना।
चैट विजेट, ऐड पिक्सेल या किसी थर्ड-पार्टी स्क्रिप्ट टैग के लिए एक-बार का छोटा संस्करण तैयार करना।

परिणाम

आपके पास लंबे कमेंट और वेरिएबल नामों वाली 45KB की यूटिलिटी लाइब्रेरी है। इसे पेस्ट करें, मैंगलिंग और कम्प्रेशन सक्षम करें और 12KB का आउटपुट पाएं — 73% की कमी, प्रोडक्शन डिप्लॉयमेंट के लिए तैयार।

अक्सर पूछे जाने वाले प्रश्न

क्या मिनिफिकेशन से कोड बिगड़ सकता है?: Terser डिफ़ॉल्ट रूप से एहतियात बरतता है और अर्थ कायम रखता है। mangle केवल वही वेरिएबल बदलता है जो एक्सपोर्ट नहीं हुए, और compress उन परिवर्तनों से बचता है जिनकी सुरक्षा वह सिद्ध नहीं कर सकता। यदि कोड Function.name पर निर्भर है या स्रोत पर eval करता है, तो उस फ़ाइल के लिए mangle बंद कर दें।
आम तौर पर कितनी कमी मिल जाती है?: JavaScript आम तौर पर 40 से 70% तक छोटा हो जाता है। लंबी टिप्पणियों, बड़े नामों या बिना उपयोग वाली शाखाओं वाला कोड ज़्यादा घटता है। पहले से कसा हुआ या जिसमें मुख्यतः स्ट्रिंग साहित्य हो, वैसा कोड कम घटता है। gzip लगाने के बाद यह अंतर और घट जाता है।
minify, compress और mangle में क्या अंतर है?: minify छाता शब्द है। compress कोड स्तर पर बदलाव करता है जैसे कि स्थिरांक मिलाना और बेकार शाखाएँ हटाना। mangle पहचानकर्ताओं को छोटे नाम देता है। हर एक को अलग चलाया जा सकता है, पर तीनों मिलकर आमतौर पर सबसे छोटा आउटपुट देते हैं।
जब सर्वर पहले से gzip या brotli लगाता है, तो क्या minify ज़रूरी है?: ज़रूरी है। gzip टेक्स्ट की पुनरावृत्ति घटाता है, पर लंबे वेरिएबल नाम नहीं बदलता और बेकार शाखाएँ नहीं हटाता। मिनिफ़ाई किया गया कोड gzip के बाद भी छोटा रहता है और लोड होने पर तेज़ी से पार्स होता है। दोनों चरण जुड़ते हैं, दोहराते नहीं।
क्या यह TypeScript या ES2022 जैसे नए सिंटैक्स पर भी काम करता है?: शुद्ध TypeScript को पहले कंपाइल करना पड़ता है क्योंकि Terser केवल JavaScript समझता है। ES2022 तक के आधुनिक सिंटैक्स (प्राइवेट फ़ील्ड, टॉप-लेवल await, ऑप्शनल चेनिंग) सीधे पार्स हो जाते हैं, Babel की ज़रूरत नहीं।

JS मिनिफायर

मूल आकार

सेटिंग्स

JS मिनिफायर क्या है?

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

कब उपयोग करें

परिणाम

अक्सर पूछे जाने वाले प्रश्न

संबंधित उपकरण

स्ट्रक्चर्ड डेटा जेनरेटर

वेबपेज से PDF

प्राइवेसी पॉलिसी जनरेटर

सेवा की शर्तें जनरेटर

कुकी सहमति जनरेटर

CSS मिनिफायर

JS मिनिफायर

मूल आकार

सेटिंग्स