JavaScript మినిఫికేషన్ ఎలా పనిచేస్తుంది
Terser మీ కోడ్ Abstract Syntax Tree పై నాలుగు దశల్లో పని చేస్తుంది. ప్రతి దశ స్వతంత్రంగా ఉంటుంది, కాబట్టి మీరు ఇతరులను విచ్ఛిన్నం చేయకుండా ఏదైనా ఆన్ లేదా ఆఫ్ చేయవచ్చు.
- పార్స్. Terser మీ JavaScript ని AST లోకి పార్స్ చేస్తుంది. ఏ సింటాక్స్ ఎర్రర్ అయినా ఇక్కడ కారణమైన టోకెన్ మరియు లైన్తో కనిపిస్తుంది, కాబట్టి ఏ ట్రాన్స్ఫర్మేషన్ రన్ అవ్వడానికి ముందు మీరు నిజమైన సమస్య కనుగొంటారు. పార్సర్ తాజా స్టేజ్-4 ప్రపోజల్స్ వరకు ప్రతి స్టాండర్డ్ ECMAScript కన్స్ట్రక్ట్ అంగీకరిస్తుంది.
- కంప్రెస్. కంప్రెసర్ AST వాక్ చేసి డజన్ల సెమాంటిక్స్-ప్రిజర్వింగ్ ట్రాన్స్ఫారమ్లు వర్తిస్తుంది: కాన్స్టంట్ ఫోల్డింగ్, dead-branch elimination, చిన్న పురె ఫంక్షన్లు ఇన్లైనింగ్, సీక్వెన్షియల్
varడిక్లరేషన్లు కంప్రెస్ చేయడం, మరియు ఈక్వివలెంట్ స్టేట్మెంట్ ఫారమ్లు రీరైటింగ్ (if/elseని టెర్నరీలకు, కంపారిసన్-చెయిన్ షార్ట్నింగ్, కండిషనల్ రిటర్న్ కంప్రెస్). ప్రతి ట్రాన్స్ఫారమ్ రివర్సిబుల్; కంప్రెసర్ ఎప్పుడూ అబ్జర్వబుల్ బిహేవియర్ మార్చదు. - మాంగిల్. మాంగ్లర్ ప్రతి స్కోప్లో లోకల్ బైండింగ్లను అతి చిన్న యూనిక్ ఐడెంటిఫైయర్లకు (
a,b,c, …) రీనేమ్ చేస్తుంది. మాడ్యూల్ బౌండరీ వదిలిపోలేని పేర్లు మాత్రమే రీనేమ్ చేయబడతాయి, కాబట్టి ఎగ్జ్పోర్టెడ్ బైండింగ్లు, ప్రాపర్టీ కీలు, మరియు గ్లోబల్ రెఫరెన్సులు తాకబడకుండా నిలుస్తాయి. ఫలితం ఏ దశలోనైనా అతి పెద్ద సింగిల్ బైట్ సేవింగ్. - రెండర్. Terser ట్రాన్స్ఫార్మ్ చేయబడిన AST ని వైట్స్పేస్ కంప్రెస్ చేసి స్టేట్మెంట్ సెపరేటర్లు గ్రామర్ అంగీకరించే మినిమం కి తగ్గించి JavaScript స్ట్రింగ్గా ప్రింట్ చేస్తుంది. ప్రిజర్వ్-లైసెన్స్ టోగుల్
/*! … */బ్లాక్లు ఉంచకపోతే కామెంట్లు స్ట్రిప్ చేయబడతాయి.
JavaScript మినిఫై ఎందుకు చేయాలి
- వేగంగా పేజ్ లోడ్లు. చిన్న స్క్రిప్ట్లు త్వరగా పార్స్ మరియు ఎగ్జెక్యూట్ అవుతాయి. 4G మొబైల్ కనెక్షన్లో 40-శాతం బైట్ తగ్గింపు Time to Interactive నుండి నిజమైన సెకండ్లు తీసివేస్తుంది, Google PageSpeed Insights అత్యంత దూకుడుగా కొలిచే మెట్రిక్.
- తక్కువ CDN ఎగ్రెస్ ఖర్చులు. CloudFront, Cloudflare, మరియు Fastly ఎగ్రెస్ గిగాబైట్ కు బిల్ చేస్తాయి. నెలవారీ మిలియన్ల పేజ్ వ్యూలలో 40-శాతం స్క్రిప్ట్ తగ్గింపు gzip మరియు brotli తర్వాత కూడా నిజమైన సేవింగ్స్గా మారుతుంది.
- ఈ మినిఫైయర్ మీ పేజ్ను పన్ను వేయదు. Terser ~1 MB అన్కంప్రెస్డ్. చాలా ఆన్లైన్ మినిఫైయర్లు పేజ్ లోడ్లో మొత్తం లైబ్రరీ షిప్ చేస్తాయి, ఇది వాటి సొంత Lighthouse స్కోర్ను తగ్గిస్తుంది. ఈ పేజ్ మీరు మినిఫై క్లిక్ చేసినప్పుడు లేదా లైవ్ మోడ్ ఆన్ చేసినప్పుడు మాత్రమే Terser లేజీ-లోడ్ చేస్తుంది — కాబట్టి ప్రారంభ రెండర్ Core Web Vitals థ్రెషోల్డ్ కింద ఉంటుంది.
- Core Web Vitals పాస్ చేయడం. Lighthouse మరియు PageSpeed Insights పెద్ద JavaScript ని పేద Total Blocking Time కు నేరుగా దోహదపడేవిగా ఫ్లాగ్ చేస్తాయి. వెండర్ లైబ్రరీలు మరియు అప్లికేషన్ బండిళ్ళు మినిఫై చేయడం Lighthouse "Reduce unused JavaScript" మరియు "Remove duplicate modules" ఆడిట్లలో అత్యంత వేగవంతమైన విన్ — సాధారణంగా పది లేదా ఇరవై పాయింట్లు విలువైన వన్-షాట్ తగ్గింపు.
సాధారణ అప్లికేషన్లు
JavaScript మినిఫికేషన్ మోడర్న్ వెబ్ ప్రాజెక్ట్ యొక్క దాదాపు ప్రతి దశలో కనిపిస్తుంది.
- ప్రీ-కమిట్ హుక్లు: కమిట్ చేసిన ఆర్టిఫాక్ట్ ప్రొడక్షన్-రెడీగా ఉండేలా మరియు diff లాజిక్ మార్పులు చూపించేలా కమిట్ చేయడానికి ముందు వ్యక్తిగత యూటిలిటీ స్క్రిప్ట్లు మినిఫై చేయండి.
- థర్డ్-పార్టీ విడ్జెట్ ఆడిట్లు: వెండర్ ఎంబెడ్ స్నిప్పెట్ పేస్ట్ చేసి మిలియన్ల వినియోగదారులకు సర్వ్ చేయడానికి ముందు అది ఇప్పటికే మినిఫైడ్ అయిందా లేదా మరింత తగ్గించవచ్చా అని తనిఖీ చేయండి.
- లెగసీ స్క్రిప్ట్ క్లీనప్: మీ ప్రస్తుత బిల్డ్ పైప్లైన్కు ముందే ఉన్న పాత jQuery ప్లగిన్లు మరియు హ్యాండ్-రాసిన స్క్రిప్ట్లను సోర్స్ ట్రీ తాకకుండా కంప్రెస్ చేయండి.
పని చేసిన ఉదాహరణ
చిన్న ఫంక్షన్ తీసుకోండి: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — కామెంట్తో సహా దాదాపు 130 బైట్లు. మాంగిల్ మరియు కంప్రెస్ రెండూ ఆన్ చేసి పైన పేస్ట్ చేయండి. అవుట్పుట్ దాదాపు function add(n,o){return n+o}console.log(add(1,2)); కి చిన్నబడుతుంది — దాదాపు 55 బైట్లు, 58-శాతం తగ్గింపు. ఫంక్షన్ పేరు add నిలుస్తుంది ఎందుకంటే ఇది console.log కాల్లో రెఫరెన్స్ చేయబడుతుంది; పారామీటర్ పేర్లు firstNumber మరియు secondNumber సింగిల్ అక్షరాలకు చిన్నబడతాయి ఎందుకంటే అవి ఫంక్షన్ బాడీకి లోకల్. చదవగలిగే పారామీటర్ పేర్లు నిలుపుకుంటూ వైట్స్పేస్ కంప్రెస్ చేసి కామెంట్ తొలగించడానికి మాంగిల్ ఆఫ్ చేయండి.
FAQ
ఇది నా బ్రౌజర్లో రన్ అవుతుందా?
అవును. మీరు మొదటిసారి మినిఫై క్లిక్ చేసినప్పుడు లేదా లైవ్ మోడ్ ఎనేబుల్ చేసినప్పుడు Terser లేజీ-లోడ్ అవుతుంది — దాదాపు 200 KB కంప్రెస్ చేయబడింది మీ బ్రౌజర్ క్యాచ్లో ల్యాండ్ అవుతుంది, అప్పుడు మరేదీ డౌన్లోడ్ కాదు. మీ కోడ్ ఎప్పుడూ పేజ్ వదిలిపోదు.
నేమ్ మాంగ్లింగ్ అంటే ఏమిటి మరియు అది సురక్షితమా?
మాంగ్లింగ్ లోకల్ వేరియబుల్స్ ని బైట్లు సేవ్ చేయడానికి సింగిల్ అక్షరాలకు రీనేమ్ చేస్తుంది. స్వయం-నిహితమైన స్క్రిప్ట్లు మరియు IIFE బండిళ్ళకు సురక్షితం. పేరు ద్వారా గ్లోబల్లను ఎక్స్పోజ్ చేసే స్క్రిప్ట్లకు సురక్షితం కాదు (ఉదా. window.myLib = …). నిశ్చయంగా తెలియనప్పుడు మాంగిల్ ఆఫ్ చేయండి.
మినిఫికేషన్ తర్వాత నా కోడ్ ఎందుకు విచ్ఛిన్నమైంది?
మూడు సాధారణ అనుమానితులు: స్ట్రింగ్ ద్వారా వేరియబుల్స్ రెఫరెన్స్ చేసే eval లేదా with; అసలు ఐడెంటిఫైయర్పై ఆధారపడే Function.name లేదా arguments.callee రీడ్లు; లేదా రీనేమ్ చేయబడిన పేరు ద్వారా ఎక్స్పోజ్ చేయబడిన గ్లోబల్లు. రీనేమింగ్ కారణమా లేదా కంప్రెస్ ట్రాన్స్ఫారమ్ కారణమా అని ఐసోలేట్ చేయడానికి మొదట మాంగిల్ ఆఫ్ చేయండి.
ఇది మోడర్న్ సింటాక్స్ (ES2020+) సపోర్ట్ చేస్తుందా?
అవును. ECMAScript టార్గెట్ను ES2020 లేదా Next కి సెట్ చేయండి మరియు Terser optional chaining, nullish coalescing, top-level await, మరియు logical-assignment ఆపరేటర్లు నిలుపుతుంది. ES5 కి సెట్ చేసినప్పుడు Terser సాధ్యమైన చోట డౌన్-కంపైల్ చేస్తుంది, కానీ ఇది ఫుల్ ట్రాన్స్పైలర్ కాదు — ES5 అస్సలు రిప్రెజెంట్ చేయలేని సింటాక్స్ కోసం Babel ఉపయోగించండి.
Terser తో బ్రౌజర్-సైడ్ JavaScript మినిఫికేషన్ బిల్డ్ టూల్ జోడించకుండా ప్రొడక్షన్-క్వాలిటీ అవుట్పుట్ ఇస్తుంది. స్క్రిప్ట్ పేస్ట్ చేయండి, ECMAScript టార్గెట్ ఎంచుకోండి, ఫలితం కాపీ లేదా డౌన్లోడ్ చేయండి. అప్లోడ్లు లేవు, అకౌంట్ లేదు, బిల్డ్ పైప్లైన్ లేదు. మినిఫైయర్ మీరు అడిగినప్పుడే లోడ్ అవుతుంది — కాబట్టి ఈ పేజ్ తెరవడం మీకు మెగాబైట్ కాకుండా కొన్ని కిలోబైట్లు మాత్రమే ఖర్చు అవుతుంది.