वेब डेवलपमेंट

JS Minify / Beautify

प्रोडक्शन के लिए JavaScript संकुचित करें या संकुचित कोड को पढ़ने योग्य रूप में फ़ॉर्मेट करें।


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

इस टूल के बारे में लेख: JavaScript मिनिफ़िकेशन: मिनिफ़ाई और ऑब्फ़स्केट में फ़र्क़

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

मिनिफायर पर्दे के पीछे किस टूल का इस्तेमाल करता है?

यह terser का इस्तेमाल करता है, जो व्यापक रूप से इस्तेमाल होने वाला JavaScript मिनिफायर और कंप्रेसर है जो आधुनिक सिंटैक्स भी समझता है।

मिनिफ़ाई किया गया JavaScript डीबग करना कठिन क्यों है?

Terser वेरिएबल और फ़ंक्शन नामों को छोटा करता है और व्हाइटस्पेस व कमेंट्स हटाता है, और चूंकि यह टूल सोर्स मैप जनरेट नहीं करता, ब्राउज़र डेव टूल्स मिनिफ़ाई किए गए कोड को पठनीय मूल लाइनों से मैप नहीं कर सकते।

क्या मिनिफ़ाई करने से मेरा कोड टूट जाएगा?

सिंटैक्टिकली वैध JavaScript के लिए, मिनिफ़िकेशन व्यवहार को बनाए रखता है; अगर कोई सिंटैक्स एरर है, तो टूल लाइन और कॉलम बताता है ताकि आप मिनिफ़ाई करने से पहले उसे ठीक कर सकें — सब कुछ आपका कोड अपलोड किए बिना स्थानीय रूप से चलता है।

Tree shaking, मिनिफ़िकेशन से कैसे अलग है?

Tree shaking बिल्ड टाइम पर मॉड्यूल डिपेंडेंसी ग्राफ़ एनालाइज़ करके बंडल से वह कोड हटाती है जो कहीं इस्तेमाल ही नहीं होता, जबकि मिनिफ़िकेशन सिर्फ़ पहले से मौजूद कोड की टेक्स्चुअल रिप्रेज़ेंटेशन छोटी करती है — यह कोई ऐसा फ़ंक्शन नहीं हटाती जो असल में एक्ज़िक्यूट होता हो।

क्या बिना एक्स्ट्रा टेस्टिंग के प्रोडक्शन में मिनिफ़ाइड JavaScript इस्तेमाल करना सुरक्षित है?

हां, मिनिफ़िकेशन एक शुद्ध सिंटैक्टिक ट्रांसफ़ॉर्मेशन है जो प्रोग्राम के बर्ताव को बिल्कुल वैसा ही रखती है; मिनिफ़ाई करने के बाद बर्ताव में कोई भी फ़र्क़ मिनिफ़ायर के ख़ुद के बग की तरफ़ इशारा करता है, लॉजिक में जानबूझकर किए बदलाव की तरफ़ नहीं।

लेख: वेब डेवलपमेंट

HEX, RGB, HSL: रंग लिखने के इतने तरीक़े क्यों हैं

हाथ से कलर शेड चुनते वक़्त डिज़ाइनर अक्सर HEX की बजाय HSL क्यों चुनते हैं।

CSS मिनिफ़िकेशन: फ़ाइल से वाक़ई क्या हटाया जाता है, और क्यों

मिनिफ़ाइड CSS ब्राउज़र में बिल्कुल वैसे ही काम क्यों करता है, भले ही यह इंसान के लिए अनरीडेबल हो जाए।

HTML मिनिफ़िकेशन: मार्कअप में स्पेस का मतलब क्यों होता है

<pre> या textarea के अंदर स्पेस हटाना पेज का लुक क्यों बिगाड़ सकता है, जबकि लगभग हर दूसरी जगह ऐसा नहीं होता।

CSS ग्रेडिएंट: linear, radial और conic से कैसे अलग है

conic-gradient पाई चार्ट के लिए क्यों सही है, जबकि radial-gradient लाइट-स्पॉट इफ़ेक्ट देता है।

Luhn एल्गोरिदम: कार्ड नंबर की सटीकता कैसे जाँची जाती है

Luhn चेक पास करने वाला कार्ड नंबर इसका मतलब क्यों नहीं कि वह कार्ड वाक़ई मौजूद है।

IBAN: इंटरनेशनल बैंक अकाउंट नंबर की संरचना कैसी होती है

IBAN के पहले दो अक्षर अकाउंट नंबर का हिस्सा नहीं, बल्कि कंट्री कोड क्यों होते हैं।

QR कोड: पिक्सल के एक चौकोर में लिंक कैसे समा जाता है

बीच में लोगो वाला QR कोड डिज़ाइन का हिस्सा ढका होने के बावजूद अभी भी स्कैन क्यों हो जाता है।

बारकोड: Code 128, EAN-13 से कैसे अलग है

स्टोर की शेल्फ़ पर प्रोडक्ट लगभग हमेशा Code 128 की बजाय EAN-13 क्यों इस्तेमाल करते हैं।

Placeholder इमेज: डेवलपमेंट के दौरान नक़ली इमेज क्यों मायने रखती हैं

लेआउट अभी बन ही रहा हो, तो डेवलपर जानबूझकर असली फ़ोटो की जगह ग्रे बॉक्स क्यों डालते हैं।