ஜாவாஸ்கிரிப்ட் அமுக்கிகள்: எப்படி மற்றும் ஏன் உங்கள் JS ஐ குறைக்க வேண்டும்

நாங்கள் அனைவரும் அங்கு இருந்தோம், நீங்கள் கற்றுக்கொண்டீர்கள் ஒரு அற்புதமான வலைத்தளத்தை உருவாக்குவது எப்படி , ஆனால் நீங்கள் அதை வெளியிட்டவுடன், அது தாங்கமுடியாத அளவிற்கு மெதுவாக உள்ளது.

உங்கள் ஜாவாஸ்கிரிப்டை சிறியதாக்குவது வலைத்தள மறுமொழி நேரங்களை விரைவுபடுத்துவதற்கான ஒரு வழியாகும் HTML ஐ அழுத்துகிறது ), மற்றும் அதிர்ஷ்டவசமாக உங்களுக்கு, இது எளிதான செயல்முறை. நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும் இன்று நான் உங்களுக்குக் காண்பிக்கிறேன்.

---

---

மினிஃபை என்றால் என்ன?

என்ற செயல்முறை குறைத்தல் (அல்லது குறைத்தல் ) ஒரு எளிய கருத்து. நீங்கள் ஜாவாஸ்கிரிப்ட் அல்லது வேறு எந்த மொழியிலும் குறியீட்டை எழுதும்போது, ​​குறியீட்டை மனிதர்களுக்கு எளிதாகப் புரிந்துகொள்ள மட்டுமே பல அம்சங்கள் தேவைப்படுகின்றன - உங்கள் மாறிகள் என்று நீங்கள் அழைப்பதை கணினிகள் பொருட்படுத்தாது, அல்லது அடைப்புக்குறிக்குள் எவ்வளவு இடைவெளி இருக்கிறது, உதாரணத்திற்கு.

குறியீட்டைக் குறைப்பதன் மூலம், நீங்கள் அதன் கோப்பின் அளவைக் கடுமையாகக் குறைக்கலாம். எனவே ஒரு சிறிய கோப்பு உங்கள் பயனர்களுக்கு விரைவாக பதிவிறக்கம் செய்யப்படும். நீங்கள் ஜாவாஸ்கிரிப்ட்டின் ஒன்று அல்லது இரண்டு வரிகளை மட்டுமே எழுதுகிறீர்கள் என்றால், குறிப்பிடத்தக்க முன்னேற்றம் இருக்காது. இருப்பினும், நீங்கள் நிறைய குறியீடுகளை எழுதுகிறீர்கள் அல்லது jQuery போன்ற பெரிய நூலகங்களைப் பயன்படுத்தினால், குறிப்பிடத்தக்க செயல்திறன் அதிகரிப்பு மற்றும் கடுமையாக குறைக்கப்பட்ட கோப்பு அளவுகள் எளிதில் அடையக்கூடியவை!

வெளிப்புற CDN இலிருந்து குறியீட்டை நீங்கள் ஏற்றினால் கூகுள் வழங்கும் நூலகங்கள் நீங்கள் சிறிய குறியீட்டைப் பயன்படுத்தியுள்ளீர்கள்.

முரண்பாட்டில் செய்ய வேண்டிய அருமையான விஷயங்கள்

மினிஃபைட் கோட் எப்படி இருக்கும்?

சில உதாரணங்களைப் பார்ப்போம். சிறிய குறியீடு தளங்களில் மினிஃபிகேஷனின் தாக்கத்தைப் பார்ப்பது கடினம், எனவே அவற்றின் நீண்ட நீளத்திற்கு நான் முன்கூட்டியே மன்னிப்பு கேட்கிறேன்.

இங்கே சில unminified பைதான் மற்றும் ஜாவாஸ்கிரிப்டுடன் 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 சதவீதம் சிறிய இந்த எடுத்துக்காட்டில், மாறக்கூடிய பெயர்கள் அப்படியே இருக்கின்றன, ஆனால் அனைத்து வெளிறிய இடங்களும் கருத்துகளும் அகற்றப்பட்டன.

---

---

எங்கள் வழிகாட்டியிலிருந்து jQuery க்கான மற்றொரு எடுத்துக்காட்டு இங்கே:

// 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);

சில பொதுவான ஜாவாஸ்கிரிப்ட் நூலகங்களின் அளவுகள் அவற்றின் சிறிய பதிப்புகளுடன் ஒப்பிடும்போது இங்கே உள்ளன:

1. உயர் விளக்கப்படங்கள்: 1 எம்பி> 201 கேபி
2. jQuery: 270 KB> 90 KB
3. MooTools: 164 KB> 93 KB

இந்த நூலகங்களில் சில சுருக்கப்படும் போது குறிப்பிடத்தக்க அளவு குறைப்பைக் காட்டுகின்றன ( ~ 80 சதவீதம் ), மற்றவர்கள் அவ்வளவு நன்றாக இல்லை ( ~ 40 சதவீதம் ) அதாவது, எந்த சேமிப்பும் உங்கள் வலைத்தளத்தை உங்கள் பயனர்களுக்கு வேகமாக்கும், மேலும் உங்கள் வலை சேவையகத்தில் உள்ள அழுத்தத்தைக் குறைக்கும்.

நீங்கள் எப்படி குறைக்கிறீர்கள்?

இப்போது அது எப்படி வேலை செய்கிறது மற்றும் எப்படி இருக்கிறது என்று உங்களுக்குத் தெரியும், அதை எப்படி செய்வது என்று பார்ப்போம். கவலைப்பட வேண்டாம், உங்கள் குறியீட்டை கைமுறையாக மாற்ற வேண்டிய அவசியமில்லை! உங்களுக்காக செயல்முறையை கையாளும் பல்வேறு கருவிகள் இலவசமாக கிடைக்கின்றன.

இவை பல வழிகளில் வேலை செய்கின்றன. பெரும்பாலான ஆன்லைன் கருவிகள் குறியீட்டை நகலெடுத்து ஒட்ட உங்களை அனுமதிக்கின்றன, பின்னர் அவை செயலாக்கப்பட்டு பக்கத்தில் உங்களிடம் திரும்பும். இந்த கருவிகள் பெரும்பாலும் பல கோப்புகளை பதிவேற்ற உங்களை அனுமதிக்கும்.

ஆன்லைன் கருவிகளின் ஒரு குறுகிய சுற்று இங்கே. அவை பெரும்பாலும் ஒரே மாதிரியாக வேலை செய்கின்றன, எனவே நீங்கள் எதை தேர்வு செய்வது என்று அதிகம் கவலைப்பட தேவையில்லை.

JSC Compress - விரைவான வேலை என்றால் நான் தனிப்பட்ட முறையில் இந்த வலைத்தளத்தைப் பயன்படுத்துகிறேன். இது வேகமாக இயங்குகிறது மற்றும் அதை உருவாக்க அவர்கள் பயன்படுத்திய கருவிகளையும் கூட அவர்கள் உங்களுக்குக் காட்டுகிறார்கள்.

ஜாவாஸ்கிரிப்ட் மினிஃபையர் - இந்த கருவி நன்றாக வேலை செய்கிறது, ஆனால் அது உண்மையில் ஒரு API ஆக பிரகாசிக்கிறது. இது ஏற்கனவே இருக்கும் வலைத்தளத்தின் மேல் உங்கள் சொந்த ஒருங்கிணைப்பு அல்லது சேவையை உருவாக்க உதவுகிறது.

ஜாவாஸ்கிரிப்ட் மினிஃபையர் - அதே பெயரில் மற்றொரு வலைத்தளம், இந்த கருவி அவர்கள் வருவது போல் எளிது. விருப்பங்கள் அல்லது மெனுக்கள் இல்லை, ஒரே ஒரு பொத்தான்.

மினிஃபை - இந்த வலைத்தளம் ஆச்சரியமாக இருக்கிறது, மேலும் இங்குள்ள விவரங்களுக்கு டெவலப்பர்கள் தெளிவாக கவனம் செலுத்தியுள்ளனர்.

இந்த பட்டியல் எப்போதும் நீடிக்கலாம். வலைத்தளங்களைக் குறைக்க பல ஆன்லைன் கருவிகள் உள்ளன, அது தவறு செய்வது கடினம்.

உங்களுக்கான கட்டளை வரி கருவிகள் அல்லது செருகுநிரல்களாக மினிஃபைங் கருவிகள் உள்ளன ஜாவாஸ்கிரிப்ட் எடிட்டர் . இந்த கருவிகள் பெரும்பாலும் பயன்படுத்த மிகவும் வேகமாக இருக்கும், மேலும் உங்கள் ஏற்கனவே உள்ள குறியீட்டில் 'வேலை' செய்யவும். நகலெடுத்து ஒட்ட வேண்டிய அவசியமில்லை, அதே கோப்பில் இருக்கும் எந்த HTML அல்லது CSS இலிருந்தும் உங்கள் ஜாவாஸ்கிரிப்டை பிரித்தெடுக்க வேண்டியதில்லை.

நீங்கள் மைக்ரோசாஃப்ட் விஷுவல் ஸ்டுடியோவைப் பயன்படுத்துகிறீர்கள் என்றால் பன்டர் மற்றும் மினிஃபையர் சந்தையில் இருந்து நீட்டிப்பு 600,000 நிறுவல்களைக் கொண்டுள்ளது! அது மட்டுமல்ல, அது தொடர்ந்து புதுப்பிக்கப்படும் மற்றும் கிட்ஹப்பில் கிடைக்கிறது .

நீங்கள் ஒரு ரசிகர் என்றால் உன்னத உரை நான் இருப்பது போல், பிறகு மினிஃபை தொகுப்பு நீங்கள் விரும்பும் ஒன்றாகும். 61,000 க்கும் அதிகமான நிறுவல்களுடன், இது மிகவும் பிரபலமான தொகுப்பாகும் கிட்ஹப்பில் கிடைக்கிறது , நீங்கள் ஒரு திறந்த மூல திட்டத்திற்கு பங்களிக்க விரும்பினால்.

இறுதியாக, நீங்கள் ஏ பைசார்ம் பயனர், உங்களால் முடியும் ஒருங்கிணைக்க அதை கட்டமைக்கவும் போன்ற பல பொதுவான சுருக்க கருவிகளுடன் நேரடியாக YUI அமுக்கி . இவற்றில் பல கருவிகள் நேரடியாக மேலே பட்டியலிடப்பட்டுள்ள ஆன்லைன் கருவிகளை இயக்குகின்றன.

எச்சரிக்கைகள்

அங்கு உள்ளது ஒரு பிடிப்பு சரியா? எதுவும் எப்போதும் சரியாக இருக்க முடியாது. சரி, ஆமாம், ஒரு பிரச்சனை இருக்கிறது, ஆனால் அது மிகவும் சிறியது மற்றும் சுலபமாக வேலை செய்கிறது:

சிறிய குறியீட்டை அதன் அசல் நிலைக்கு மீட்டெடுக்க முடியாது.

நீங்கள் எந்த குறியீட்டையும் குறைக்கும்போது, ​​அதன் அசல் வடிவம் இழக்கப்படும். பெரிய மாற்றங்களை எளிதாகச் செய்ய வேண்டும் என்ற நம்பிக்கை இருந்தால், அதன் நகலை நீங்கள் வைத்திருக்க வேண்டும் - பதிப்புக் கட்டுப்பாட்டைப் பயன்படுத்துவது போதாது.

அது சாத்தியம் என்றாலும் unminify உங்கள் குறியீடு, அது மீண்டும் ஒருபோதும் ஒரே மாதிரியாக இருக்காது. உங்கள் மதிப்புமிக்க கருத்துகள் அனைத்தும் ஒரு விஷயத்திற்காக இழக்கப்படுகின்றன.

இது ஒரு பெரிய பிரச்சனை அல்ல, ஆனால் குறியிடும்போது நீங்கள் அதை மனதில் கொள்ள வேண்டும். ஒரு அடிப்படை விதியாக, சுருக்கப்படாத > வளரும் மற்றும் சுருக்கப்பட்ட > உற்பத்தி.

ஜாவாஸ்கிரிப்டை மினிஃபைட் செய்வது பற்றி தெரிந்து கொள்ள வேண்டிய அனைத்தும் இப்போது உங்களுக்குத் தெரியும்! மினிஃபைங் குறியீடானது ஒரு சேவையகத்திலிருந்து செயல்திறனை வெளியேற்றுவதற்கான வழிகளில் ஒன்றாகும், மேலும் அனைத்து பெரிய வலைத்தளங்களும் அதைச் செய்கின்றன.

உங்கள் குறியீட்டைக் குறைக்க நீங்கள் என்ன கருவிகளைப் பயன்படுத்துகிறீர்கள்? நீங்கள் கூட தொந்தரவு செய்கிறீர்களா? கீழேயுள்ள கருத்துகளில் எங்களுக்குத் தெரியப்படுத்துங்கள்!

மானிட்டரில் பிரகாசத்தை எப்படி மாற்றுவது

பட வரவு: ஷட்டர்ஸ்டாக் வழியாக NavinTar

பகிர் பகிர் ட்வீட் மின்னஞ்சல் வட்டு இடத்தை விடுவிக்க இந்த விண்டோஸ் கோப்புகள் மற்றும் கோப்புறைகளை நீக்கவும்

உங்கள் விண்டோஸ் கணினியில் வட்டு இடத்தை அழிக்க வேண்டுமா? வட்டு இடத்தை விடுவிக்க பாதுகாப்பாக நீக்கக்கூடிய விண்டோஸ் கோப்புகள் மற்றும் கோப்புறைகள் இங்கே.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• ஜாவாஸ்கிரிப்ட்
• ஜாவா
• வலை வடிவமைப்பு

எழுத்தாளர் பற்றி ஜோ கோபர்ன்(136 கட்டுரைகள் வெளியிடப்பட்டன)

ஜோ இங்கிலாந்தின் லிங்கன் பல்கலைக்கழகத்தில் கணினி அறிவியலில் பட்டதாரி. அவர் ஒரு தொழில்முறை மென்பொருள் டெவலப்பர், அவர் ட்ரோன்களை பறக்காதபோது அல்லது இசை எழுதாதபோது, ​​அவர் அடிக்கடி புகைப்படம் எடுப்பதை அல்லது வீடியோக்களை தயாரிப்பதை காணலாம்.

ஜோ கோபர்னிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்