Home-theater-designers
Mēs visi esam tur bijuši, jūs uzzinājāt kā izveidot lielisku vietni , bet, tiklīdz jūs to publicējat, tas ir neciešami lēns.
Javascript saīsināšana ir viens no veidiem, kā paātrināt vietnes reakcijas laiku (kopā ar saspiežot HTML ), un, par laimi, tas ir vienkāršs process. Šodien es jums parādīšu visu, kas jums jāzina.
Ko nozīmē samazināt?
Process minifikācija (vai minifikācija ) ir vienkāršs jēdziens. Rakstot kodu JavaScript vai kādā citā valodā, ir daudzas funkcijas, kas nepieciešamas tikai, lai cilvēkiem būtu vieglāk saprast kodu - datoriem ir vienalga, kā jūs nosaucat savus mainīgos, vai cik liela atstarpe ir iekavās, piemēram.
Samazinot kodu, varat krasi samazināt tā faila lielumu. Tādējādi mazāku failu lietotāji varēs lejupielādēt ātrāk. Ja jūs rakstāt tikai vienu vai divas JavaScript rindas, iespējams, uzlabojumu nebūs. Tomēr, ja rakstāt daudz koda vai izmantojat lielas bibliotēkas, piemēram, jQuery, ir viegli sasniedzams ievērojams veiktspējas pieaugums un krasi samazināti failu izmēri!
Ja ielādējat kodu no ārēja CDN, piemēram, Google mitinātās bibliotēkas , jūs izmantojāt saīsinātu kodu.
kā izveidot rindiņu vārdā
Kā izskatās saīsinātais kods?
Apskatīsim dažus piemērus. Ir grūti saprast, kā minifikācija ietekmē mazo kodu bāzi, tāpēc es jau iepriekš atvainojos par to lielo garumu.
Šeit ir daži neminificēts JavaScript no mūsu ceļveža par JSON lietošanu kopā ar Python un JavaScript:
// 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();
}Šeit ir minētais kods:
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()}};Šī saīsinātā koda versija ir 39 procenti mazāks. Šajā piemērā mainīgo nosaukumi paliek nemainīgi, bet visi atstarpes un komentāri ir noņemti.
Šeit ir vēl viens piemērs no mūsu ceļveža par 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');
});Šeit ir minētais kods:
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')});Šoreiz bija tikai a 26 procenti samazinājums - tas joprojām ir ļoti labi šādam nelielam koda blokam.
Šeit ir pēdējais piemērs no mūsu rokasgrāmatas par Javascript un 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);Ievērojiet, kā tur ir daudz komentārus un atstarpes. Minificētā versija samazināja faila lielumu par 52 procenti :
inicializējiet disku mbr vai gpt ssd
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);Tālāk ir norādīti dažu parasto JavaScript bibliotēku izmēri, salīdzinot ar to saīsinātajām versijām.
- Augstākās diagrammas: 1 MB> 201 KB
- jQuery: 270 KB> 90 KB
- MooTools: 164 KB> 93 KB
Dažas no šīm bibliotēkām saspiežot ievērojami samazina izmēru ( ~ 80 procenti ), bet citi nav tik labi ( ~ 40 procenti ). Tomēr jebkura ietaupīšana padarīs jūsu vietni lietotājiem ātrāku un samazinās jūsu tīmekļa servera slodzi.
Kā jūs samazināt?
Tagad jūs zināt, kā tas darbojas un kā tas izskatās, iedziļināsimies, kā to izdarīt. Neuztraucieties, kods nav jāmaina manuāli! Ir brīvi pieejami dažādi rīki, kas apstrādā šo procesu jūsu vietā.
Tie darbojas vairākos veidos. Lielākā daļa tiešsaistes rīku ļauj kopēt un ielīmēt kodu, ko pēc tam apstrādās un atgriezīs lapā. Šie rīki bieži ļauj augšupielādēt arī vairākus failus.
Šeit ir īss tiešsaistes rīku apkopojums. Tie lielākoties darbojas vienādi, tāpēc jums nav pārāk jāuztraucas par to, kuru izvēlēties.
JSCompress - Es personīgi visvairāk izmantoju šo vietni, ja tas ir tikai ātrs darbs. Tas ir ātri darbināms, un viņi pat parāda rīkus, ko viņi izmantoja tā izveidošanai.
JavaScript minifikators - Šis rīks darbojas labi, taču tas patiešām spīd kā API. Tas ļauj jums izveidot savu integrāciju vai pakalpojumu virs viņu esošās vietnes.
JavaScript minifier - vēl viena vietne ar tādu pašu nosaukumu, šis rīks ir tik vienkāršs, kā nāk. Nav iespēju vai izvēlņu, tikai viena poga.
Samazināt - Šī vietne izskatās pārsteidzoši, un izstrādātāji šeit ir skaidri pievērsuši uzmanību detaļām.
Šo sarakstu varētu turpināt mūžīgi. Tīmekļa vietņu mazināšanai ir tik daudz tiešsaistes rīku, ka ir grūti kļūdīties.
Samazināšanas rīki pastāv arī kā komandrindas rīki vai spraudņi JavaScript redaktors . Šie rīki bieži ir daudz ātrāk lietojami un “vienkārši darbojas” ar jūsu esošo kodu. Nav nepieciešams kopēt un ielīmēt, un jums nav jāizņem JavaScript no jebkura HTML vai CSS, kas var būt vienā failā.
Ja izmantojat Microsoft Visual Studio, Bundler un Minifier paplašinājumam no tirgus ir vairāk nekā 600 000 instalāciju! Ne tikai tas, bet tas tiek regulāri atjaunināts un pieejams vietnē GitHub .
Ja esat ventilators Cildens teksts kā es esmu, tad Samazināt pakete ir tāda, kādu vēlaties. Ar vairāk nekā 61 000 instalāciju tā ir ļoti populāra pakete, un tā arī ir pieejams vietnē GitHub , ja vēlaties piedalīties atklātā pirmkoda projektā.
Visbeidzot, ja jūs esat a PyCharm lietotājs, tu vari konfigurējiet to integrēšanai tieši ar daudziem izplatītiem saspiešanas rīkiem, piemēram YUI kompresors . Daudzi no šiem rīkiem tieši darbina iepriekš uzskaitītos tiešsaistes rīkus.
Atrunas
Tur ir būt par nozveju, vai ne? Nekas nekad nevar būt ideāls. Jā, ir viena problēma, taču tā ir diezgan neliela un viegli atrisināma:
Samazināto kodu nevar atjaunot sākotnējā stāvoklī.
Samazinot jebkuru kodu, tā sākotnējā forma tiek zaudēta. Jums ir jāsaglabā tā kopija, ja vēlaties cerēt uz vienkāršām izmaiņām - nepietiek ar versiju kontroli.
Kamēr tas ir iespējams neminificēt jūsu kods, tas nekad vairs nebūs tas pats. Pirmkārt, visi jūsu vērtīgie komentāri tiek zaudēti.
Šī nav milzīga problēma, taču kodēšanas laikā jums tas jāpatur prātā. Kā pamatnoteikums, nesaspiests > attīsta un saspiests > ražošana.
Tagad jūs zināt visu, kas jāzina par JavaScript samazināšanu! Koda samazināšana ir viens no veidiem, kā izspiest veiktspēju no servera, un visas lielās vietnes to dara.
Kādus rīkus jūs izmantojat, lai samazinātu kodu? Vai jūs pat apnikt? Paziņojiet mums zemāk esošajos komentāros!
padarīt zibatmiņas disku bootable Windows 7
Attēlu kredīts: NavinTar, izmantojot Shutterstock
Kopīgot Kopīgot Čivināt E -pasts Dzēsiet šos Windows failus un mapes, lai atbrīvotu vietu diskāVai jums ir jāatbrīvo vieta diskā Windows datorā? Šeit ir Windows faili un mapes, ko var droši izdzēst, lai atbrīvotu vietu diskā.
Lasīt Tālāk Saistītās tēmas- Programmēšana
- JavaScript
- Java
- Web dizains
Džo ir absolvējis datorzinātnes Linkolnas universitātē, Lielbritānijā. Viņš ir profesionāls programmatūras izstrādātājs, un, kad viņš nelido ar droniem un neraksta mūziku, viņu bieži var atrast, fotografējot vai veidojot video.
Vairāk no Džo KobērnaAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu