జావాస్క్రిప్ట్ కంప్రెషర్‌లు: మీ JS ని ఎలా మరియు ఎందుకు తగ్గించాలి

మేమంతా అక్కడ ఉన్నాము, మీరు నేర్చుకున్నారు అద్భుతమైన వెబ్‌సైట్‌ను ఎలా నిర్మించాలి , కానీ మీరు దానిని ప్రచురించిన తర్వాత, అది భరించలేని నెమ్మదిగా ఉంటుంది.

మీ జావాస్క్రిప్ట్‌ను కనిష్టీకరించడం అనేది వెబ్‌సైట్ ప్రతిస్పందన సమయాలను వేగవంతం చేయడానికి ఒక మార్గం (దానితో పాటు HTML కుదిస్తోంది ), మరియు అదృష్టవశాత్తూ మీ కోసం, ఇది సులభమైన ప్రక్రియ. మీరు తెలుసుకోవలసినవన్నీ ఈ రోజు నేను మీకు చూపిస్తాను.

మినిఫై అంటే ఏమిటి?

యొక్క ప్రక్రియ మినిఫికేషన్ (లేదా మినిఫైయింగ్ ) ఒక సాధారణ భావన. మీరు జావాస్క్రిప్ట్ లేదా మరే ఇతర భాషలో కోడ్ వ్రాసినప్పుడు, కోడ్‌ని మానవులు సులభంగా అర్థం చేసుకోవడానికి మాత్రమే అనేక ఫీచర్లు అవసరం - మీరు మీ వేరియబుల్స్‌ని ఏమని పిలుస్తున్నారో లేదా బ్రాకెట్‌ల చుట్టూ ఎంత ఖాళీ ఉందో కంప్యూటర్‌లు పట్టించుకోవు, ఉదాహరణకి.

కోడ్‌ను తగ్గించడం ద్వారా, మీరు దాని ఫైల్ పరిమాణాన్ని తీవ్రంగా తగ్గించవచ్చు. మీ వినియోగదారులు డౌన్‌లోడ్ చేసుకోవడానికి ఒక చిన్న ఫైల్ వేగంగా ఉంటుంది. మీరు జావాస్క్రిప్ట్ యొక్క ఒకటి లేదా రెండు పంక్తులు మాత్రమే వ్రాస్తుంటే, గమనించదగ్గ మెరుగుదల ఉండదు. అయితే, మీరు చాలా కోడ్‌ని వ్రాస్తుంటే, లేదా j క్వెరీ వంటి పెద్ద లైబ్రరీలను ఉపయోగిస్తుంటే, గుర్తించదగిన పనితీరు పెరుగుతుంది మరియు భారీగా తగ్గిన ఫైల్ సైజులు సులభంగా సాధించవచ్చు!

మీరు బాహ్య CDN నుండి కోడ్‌ను లోడ్ చేస్తే, వంటివి Google హోస్ట్ చేసిన లైబ్రరీలు , మీరు మినిఫైడ్ కోడ్ ఉపయోగించారు.

వర్డ్‌లో క్షితిజ సమాంతర రేఖను ఎలా చొప్పించాలి

మినిఫైడ్ కోడ్ ఎలా ఉంటుంది?

కొన్ని ఉదాహరణలు చూద్దాం. చిన్న కోడ్ బేస్‌లపై మినిఫికేషన్ ప్రభావాన్ని చూడటం చాలా కష్టం, కాబట్టి వాటి పొడవైన పొడవు కోసం నేను ముందుగానే క్షమాపణలు కోరుతున్నాను.

ఇక్కడ కొన్ని అపరిమితమైన పైథాన్ మరియు జావాస్క్రిప్ట్‌తో JSON ఉపయోగించడానికి మా గైడ్ నుండి జావాస్క్రిప్ట్:

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

ఇక్కడ చిన్న కోడ్ ఉంది:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

కోడ్ యొక్క ఈ చిన్న వెర్షన్ 39 శాతం చిన్నది. ఈ ఉదాహరణలో, వేరియబుల్ పేర్లు అలాగే ఉంటాయి, కానీ అన్ని వైట్‌స్పేస్ మరియు వ్యాఖ్యలు తొలగించబడ్డాయి.

మా గైడ్ నుండి j క్వెరీకి మరొక ఉదాహరణ ఇక్కడ ఉంది:

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

ఇక్కడ చిన్న కోడ్ ఉంది:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

ఈసారి కేవలం ఒక మాత్రమే ఉంది 26 శాతం తగ్గింపు - కోడ్ యొక్క అటువంటి చిన్న బ్లాక్‌కు ఇది ఇప్పటికీ చాలా మంచిది.

జావాస్క్రిప్ట్ మరియు DOM కి మా గైడ్ నుండి ఒక చివరి ఉదాహరణ ఇక్కడ ఉంది:

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

ఎలా ఉన్నాయో గమనించండి చాలా వ్యాఖ్యలు మరియు వైట్‌స్పేస్. మినిఫైడ్ వెర్షన్ ఫైల్‌సైజ్‌ను తగ్గించింది 52 శాతం :

మీపై నిఘా వేసే వ్యక్తిని ఎలా పట్టుకోవాలి

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

ఇక్కడ కొన్ని సాధారణ జావాస్క్రిప్ట్ లైబ్రరీల పరిమాణాలు వాటి మినిఫైడ్ వెర్షన్‌లతో పోలిస్తే:

ఈ లైబ్రరీలలో కొన్ని కంప్రెస్ చేసినప్పుడు గణనీయమైన పరిమాణ తగ్గింపును చూపుతాయి ( ~ 80 శాతం ), ఇతరులు అంత మంచిది కాదు ( ~ 40 శాతం ). ఏదైనా పొదుపు మీ వెబ్‌సైట్‌ను మీ వినియోగదారుల కోసం వేగవంతం చేస్తుంది మరియు మీ వెబ్ సర్వర్‌లో ఒత్తిడిని తగ్గిస్తుంది.

మీరు ఎలా కనిష్టీకరిస్తారు?

ఇది ఎలా పనిచేస్తుందో మరియు ఎలా ఉంటుందో ఇప్పుడు మీకు తెలుసు, దీన్ని ఎలా చేయాలో తెలుసుకుందాం. చింతించకండి, మీ కోడ్‌ను మాన్యువల్‌గా సవరించాల్సిన అవసరం లేదు! మీ కోసం ప్రక్రియను నిర్వహించే అనేక రకాల టూల్స్ ఉచితంగా అందుబాటులో ఉన్నాయి.

ఇవి అనేక విధాలుగా పనిచేస్తాయి. చాలా ఆన్‌లైన్ టూల్స్ కోడ్‌ను కాపీ చేసి పేస్ట్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి, తర్వాత అవి ప్రాసెస్ చేయబడతాయి మరియు పేజీలో మీకు తిరిగి వస్తాయి. ఈ టూల్స్ తరచుగా బహుళ ఫైల్‌లను అప్‌లోడ్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి.

ఆన్‌లైన్ సాధనాల యొక్క చిన్న రౌండ్ అప్ ఇక్కడ ఉంది. అవి ఎక్కువగా ఒకే విధంగా పనిచేస్తాయి కాబట్టి ఏది ఎంచుకోవాలో మీరు ఎక్కువగా ఆందోళన చెందాల్సిన అవసరం లేదు.

JSCompress - ఈ వెబ్‌సైట్ కేవలం త్వరిత పని అయితే నేను వ్యక్తిగతంగా ఎక్కువగా ఉపయోగిస్తాను. ఇది వేగంగా నడుస్తుంది మరియు వారు దానిని నిర్మించడానికి ఉపయోగించిన సాధనాలను కూడా మీకు చూపుతారు.

జావాస్క్రిప్ట్ మినిఫైయర్ - ఈ సాధనం బాగా పనిచేస్తుంది, కానీ ఇది నిజంగా API గా మెరుస్తుంది. ఇది ఇప్పటికే ఉన్న వెబ్‌సైట్ పైన మీ స్వంత ఇంటిగ్రేషన్ లేదా సర్వీస్‌ను రూపొందించడానికి మిమ్మల్ని అనుమతిస్తుంది.

జావాస్క్రిప్ట్ మినిఫైయర్ - అదే పేరుతో మరొక వెబ్‌సైట్, ఈ టూల్ వచ్చినంత సులభం. ఎంపికలు లేదా మెనూలు లేవు, కేవలం ఒక బటన్.

కనిష్టీకరించు - ఈ వెబ్‌సైట్ అద్భుతంగా ఉంది, మరియు డెవలపర్లు ఇక్కడ వివరాలపై స్పష్టంగా దృష్టి పెట్టారు.

ఈ జాబితా ఎప్పటికీ కొనసాగవచ్చు. వెబ్‌సైట్‌లను కనిష్టీకరించడానికి చాలా ఆన్‌లైన్ టూల్స్ ఉన్నాయి, అది తప్పు కావడం కష్టం.

మీ కోసం కమాండ్ లైన్ టూల్స్ లేదా ప్లగిన్‌లుగా మినిఫైయింగ్ టూల్స్ కూడా ఉన్నాయి జావాస్క్రిప్ట్ ఎడిటర్ . ఈ టూల్స్ తరచుగా ఉపయోగించడానికి చాలా వేగంగా ఉంటాయి మరియు మీ ప్రస్తుత కోడ్‌తో 'పని చేస్తాయి'. కాపీ చేసి అతికించాల్సిన అవసరం లేదు మరియు మీరు ఒకే ఫైల్‌లో ఉండే ఏ HTML లేదా CSS నుండి మీ జావాస్క్రిప్ట్‌ని సేకరించాల్సిన అవసరం లేదు.

మీరు మైక్రోసాఫ్ట్ విజువల్ స్టూడియోని ఉపయోగిస్తుంటే, ది బండ్లర్ మరియు మినిఫైయర్ మార్కెట్ ప్లేస్ నుండి పొడిగింపు 600,000 ఇన్‌స్టాల్‌లను కలిగి ఉంది! అది మాత్రమే కాదు, క్రమం తప్పకుండా అప్‌డేట్ చేయబడుతుంది మరియు GitHub లో అందుబాటులో ఉంది .

మీరు అభిమాని అయితే ఉత్కృష్ట వచనం నేను ఉన్నట్లే, అప్పుడు కనిష్టీకరించు ప్యాకేజీ మీకు కావలసినది. 61,000 ఇన్‌స్టాల్‌లతో, ఇది చాలా ప్రజాదరణ పొందిన ప్యాకేజీ, మరియు అది కూడా ఒకటి GitHub లో అందుబాటులో ఉంది , మీరు ఓపెన్ సోర్స్ ప్రాజెక్ట్‌కు సహకరించాలనుకుంటున్నారా.

చివరగా, మీరు ఒక అయితే పైచార్మ్ వినియోగదారు, మీరు చేయవచ్చు ఇంటిగ్రేట్ చేయడానికి దీన్ని కాన్ఫిగర్ చేయండి వంటి అనేక సాధారణ కుదింపు సాధనాలతో నేరుగా YUI కంప్రెసర్ . ఈ టూల్స్‌లో చాలావరకు పైన జాబితా చేయబడిన ఆన్‌లైన్ టూల్స్‌కి నేరుగా శక్తినిస్తాయి.

హెచ్చరికలు

అక్కడ ఉంది క్యాచ్ కాదా? ఏదీ ఎప్పుడూ పరిపూర్ణంగా ఉండదు. బాగా, అవును, ఒక సమస్య ఉంది, కానీ ఇది చాలా చిన్నది మరియు సులభంగా పని చేస్తుంది:

మినిఫైడ్ కోడ్ దాని అసలు స్థితికి పునరుద్ధరించబడదు.

మీరు ఏదైనా కోడ్‌ని కనిష్టీకరించినప్పుడు, దాని అసలు రూపం పోతుంది. మీరు పెద్ద మార్పులను సులభంగా చేయాలనే ఆశ ఏదైనా కావాలంటే మీరు దాని కాపీని ఉంచుకోవాలి - వెర్షన్ నియంత్రణను ఉపయోగించడం సరిపోదు.

ఇది సాధ్యమే అయితే తగ్గించు మీ కోడ్, ఇది మళ్లీ ఒకేలా ఉండదు. మీ విలువైన వ్యాఖ్యలన్నీ ఒక విషయం కోసం పోతాయి.

ఇది పెద్ద సమస్య కాదు, కానీ కోడింగ్ చేసేటప్పుడు మీరు దానిని గుర్తుంచుకోవాలి. ప్రాథమిక నియమంగా, కుదించబడలేదు > అభివృద్ధి మరియు కంప్రెస్ చేయబడింది > ఉత్పత్తి.

జావాస్క్రిప్ట్‌ను కనిష్టీకరించడం గురించి తెలుసుకోవలసిన ప్రతిదీ ఇప్పుడు మీకు తెలుసు! మినిఫైయింగ్ కోడ్ అనేది సర్వర్ నుండి పనితీరును బయటకు తీయడానికి ఒక మార్గం, మరియు అన్ని పెద్ద వెబ్‌సైట్‌లు దీన్ని చేస్తున్నాయి.

మీ కోడ్‌ని తగ్గించడానికి మీరు ఏ సాధనాలను ఉపయోగిస్తారు? మీరు కూడా ఇబ్బంది పడుతున్నారా? దిగువ వ్యాఖ్యలలో మాకు తెలియజేయండి!

కొత్త కంట్రోలర్‌ని xbox one కి ఎలా కనెక్ట్ చేయాలి

చిత్ర క్రెడిట్: షట్టర్‌స్టాక్ ద్వారా నావింటార్

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ డిస్క్ స్థలాన్ని ఖాళీ చేయడానికి ఈ విండోస్ ఫైల్స్ మరియు ఫోల్డర్‌లను తొలగించండి

మీ విండోస్ కంప్యూటర్‌లో డిస్క్ స్థలాన్ని క్లియర్ చేయాలా? డిస్క్ స్థలాన్ని ఖాళీ చేయడానికి సురక్షితంగా తొలగించగల విండోస్ ఫైల్‌లు మరియు ఫోల్డర్‌లు ఇక్కడ ఉన్నాయి.

తదుపరి చదవండి సంబంధిత అంశాలు

ప్రోగ్రామింగ్
జావాస్క్రిప్ట్
జావా
వెబ్ డిజైన్

రచయిత గురుంచి జో కోబర్న్(136 కథనాలు ప్రచురించబడ్డాయి)

జో UK లోని లింకన్ విశ్వవిద్యాలయం నుండి కంప్యూటర్ సైన్స్‌లో గ్రాడ్యుయేట్. అతను ఒక ప్రొఫెషనల్ సాఫ్ట్‌వేర్ డెవలపర్, మరియు అతను డ్రోన్‌లను ఎగురవేయనప్పుడు లేదా సంగీతం వ్రాయనప్పుడు, అతను తరచుగా ఫోటోలు తీయడం లేదా వీడియోలను ఉత్పత్తి చేయడం చూడవచ్చు.

జో కోబర్న్ నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి