JavaScript kompresszorok: hogyan és miért csökkenthető a JS

JavaScript kompresszorok: hogyan és miért csökkenthető a JS

Mindannyian ott voltunk, megtanulta hogyan készíts egy fantasztikus weboldalt , de ha egyszer közzéteszed, elviselhetetlenül lassú lesz.





A javascript kicsinyítése az egyik módja annak, hogy felgyorsítsa a webhely válaszidejét (együtt HTML tömörítése ), és szerencsére ez egyszerű folyamat. Ma mindent megmutatok, amit tudnod kell.



Mit jelent a Minify?

A folyamata minifikáció (vagy kicsinyítő ) egyszerű fogalom. Amikor JavaScript vagy más nyelven írja a kódot, számos olyan funkcióra van szüksége, amelyek csak azért szükségesek, hogy az emberek könnyebben megértsék a kódot - a számítógépeket nem érdekli, hogy hogyan nevezi a változókat, vagy mekkora távolság van a zárójelek körül, például.





A kód kicsinyítésével drasztikusan csökkentheti a fájl méretét. Ezért egy kisebb fájl gyorsabban letölthető a felhasználók számára. Ha csak egy vagy két sor JavaScriptet ír, valószínűleg nem lesz észrevehető javulás. Ha azonban sok kódot ír, vagy olyan nagy könyvtárakat használ, mint a jQuery, észrevehető teljesítménynövekedés és drasztikusan csökkentett fájlméret könnyen elérhető!

Ha kódot tölt be egy külső CDN -ből, mint pl A Google által tárolt könyvtárak , kicsinyített kódot használt.



hogyan lehet megmondani, hogy letiltották -e az instagramon

Hogyan néz ki a minimalizált kód?

Nézzünk néhány példát. Nehéz belátni a minifikáció hatását a kis kódbázisokra, ezért előre is elnézést kérek a hosszúságukért.

Íme néhány kicsinyítetlen JavaScript az útmutatónkból a JSON használatához Python és JavaScript használatával:



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

Itt a kicsinyített kód:

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()}};

A kódnak ez a kicsinyített változata 39 százalék kisebb. Ebben a példában a változók neve ugyanaz marad, de az összes szóköz és megjegyzés eltávolításra került.



Íme egy másik példa a jQuery útmutatójából:

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

Itt a kicsinyített kód:

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')});

Ezúttal csak a 26 százalék csökkentés - ez még mindig nagyon jó egy ilyen kisebb kódblokkhoz.

Íme egy utolsó példa a Javascript és a DOM útmutatójából:

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

Vedd észre, hogy vannak nagyon megjegyzéseket és a szóközöket. A kicsinyített verzió a fájl méretét csökkentette 52 százalék :

hogyan kell átutalni az alma készpénzt a bankba
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Íme néhány közös JavaScript -könyvtár mérete a kicsinyített változatokhoz képest:

  1. Highcharts: 1 MB> 201 KB
  2. jQuery: 270 KB> 90 KB
  3. MooTools: 164 KB> 93 KB

Ezen könyvtárak némelyike ​​jelentős méretcsökkenést mutat tömörítve ( ~ 80 százalék ), míg mások nem annyira jók ( ~ 40 százalék ). Ennek ellenére minden megtakarítás gyorsabbá teszi webhelyét a felhasználók számára, és csökkenti a webszerver terhelését.

Hogyan minimalizálod?

Most már tudja, hogyan működik, és hogyan néz ki, nézzük meg, hogyan kell csinálni. Ne aggódjon, egyáltalán nem kell manuálisan módosítania a kódot! Számos szabadon elérhető eszköz áll rendelkezésre, amelyek kezelik a folyamatot az Ön számára.

Ezek többféleképpen működnek. A legtöbb online eszköz lehetővé teszi a kód másolását és beillesztését, amelyet aztán feldolgoznak és visszaküldenek Önnek az oldalon. Ezek az eszközök gyakran lehetővé teszik több fájl feltöltését is.

Íme egy rövid összefoglaló az online eszközökről. Többnyire ugyanúgy működnek, így nem kell túl sokat aggódnia, hogy melyiket válassza.

JSCompress - Én személy szerint ezt a weboldalt használom a legtöbbet, ha ez csak egy gyors munka. Gyorsan futtatható, és még azokat az eszközöket is megmutatják, amelyekkel építették.

JavaScript Minifier - Ez az eszköz jól működik, de valóban API-ként ragyog. Ez lehetővé teszi, hogy saját integrációját vagy szolgáltatását a meglévő webhelyükre építse.

JavaScript Minifier - Egy másik, azonos nevű webhely, ez az eszköz olyan egyszerű, mint amilyenek. Nincs lehetőség vagy menü, csak egy gomb.

Kicsinyítés - Ez a weboldal csodálatosnak tűnik, és a fejlesztők egyértelműen figyeltek az itteni részletekre.

Ezt a listát örökké lehetne folytatni. Annyi online eszköz létezik a webhelyek kicsinyítésére, hogy nehéz hibázni.

A kicsinyítő eszközök parancssori eszközként vagy bővítményként is használhatók JavaScript szerkesztő . Ezek az eszközök gyakran sokkal gyorsabban használhatók, és „csak működnek” a meglévő kóddal. Nincs szükség másolásra és beillesztésre, és nem kell kibontania a JavaScriptet egyetlen HTML vagy CSS fájlból sem, amelyek ugyanabban a fájlban lehetnek.

Ha Microsoft Visual Studio -t használ, a Bundler és Minifier a piactérről érkező bővítmény több mint 600 000 telepítéssel rendelkezik! Nem csak, de rendszeresen frissítik és elérhető a GitHubon .

Ha rajongója vagy Magasztos szöveg mint én, akkor a Kicsinyítés a csomag az, amit szeretne. Több mint 61 000 telepítéssel nagyon népszerű csomag, és az is elérhető a GitHubon , ha szeretne hozzájárulni egy nyílt forráskódú projekthez.

Végül, ha a PyCharm felhasználó, megteheti konfigurálja integrálásra közvetlenül számos általános tömörítési eszközzel, mint pl YUI kompresszor . Sok ilyen eszköz közvetlenül táplálja a fent felsorolt ​​online eszközöket.

Figyelmeztetések

Ott van fogásnak lenni ugye? Soha semmi sem lehet tökéletes. Nos, igen, van egy probléma, de ez meglehetősen kicsi és könnyen megoldható:

A kicsinyített kód nem állítható vissza eredeti állapotába.

Amikor kicsinyít egy kódot, az eredeti formája elveszik. Meg kell őriznie annak másolatát, ha reményei vannak a nagy változtatások egyszerű végrehajtására - nem elég a verziókezelés használata.

Miközben lehetséges kicsinyíteni a kódod, soha többé nem ugyanaz. Minden értékes megjegyzése elveszett, egy dolog miatt.

Ez nem nagy probléma, de ezt szem előtt kell tartani a kódolás során. Alapszabályként, tömörítetlen > fejlődő és tömörítve > termelés.

Most már mindent tud a JavaScript kicsinyítéséről! A kód kicsinyítése az egyik módja annak, hogy kiszorítsuk a teljesítményt a szerverről, és ezt minden nagy weboldal teszi.

Milyen eszközöket használ a kód kicsinyítésére? Te is zavarod? Tudassa velünk az alábbi megjegyzésekben!

az akkumulátor ikonom eltűnt Windows 10

Kép jóváírása: NavinTar a Shutterstockon keresztül

Részvény Részvény Csipog Email Törölje ezeket a Windows fájlokat és mappákat a lemezterület felszabadításához

Törölnie kell a lemezterületet a Windows számítógépen? Íme a Windows fájlok és mappák, amelyek biztonságosan törölhetők a lemezterület felszabadítása érdekében.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • JavaScript
  • Jáva
  • Web Design
A szerzőről Joe Coburn(136 megjelent cikk)

Joe az Egyesült Királyságban, a Lincoln Egyetemen végzett informatikából. Professzionális szoftverfejlesztő, és amikor nem repül drónokkal és nem ír zenét, gyakran előfordul, hogy fényképeket készít vagy videókat készít.

Joe Coburn további alkotásai

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide