14 Instrumente pentru Minificarea Javascript

Javascript minification este o tehnică care condensează scriptul într-o amprentă mult mai mică. Pierdeți lizibilitatea omului, dar vă conservați o lățime de bandă considerabilă - în cele din urmă, Javascript este menit pentru browserul dvs. nu pentru utilizatorii dvs..

Majoritatea site-urilor de producție utilizează minispatch-ul Javascript, dar modul în care se realizează acest lucru variază foarte mult. De la convertoarele simple online la instrumentele GUI mai cuprinzătoare pentru interfețele de linie de comandă, opțiunile noastre sunt destul de variate. În acest articol vom examina modul de funcționare a minispatchului Javascript, cum putem să o construim în fluxul nostru de lucru și care sunt avantajele și dezavantajele minificării.

Cum functioneaza mineritul

Cea mai bună modalitate de a afla ce se întâmplă atunci când minimalizați codul dvs. este să aruncați o privire la Repository UglifyJS Github. Acest script este folosit în multe convertoare online, precum și instrumente GUI și instrumente de linie de comandă, cum ar fi Grunt. Iată câteva dintre transformările pe care le aplică pentru a vă face codul mai scurt:

Înlătura spațiul inutil
Scurtează numele variabilelor, de obicei la caractere unice
Se alătură declarațiilor consecutive var
Convertește matricele la obiecte acolo unde este posibil
Optimizează dacă există declarații
Calculează expresii simple constante
etc.

Ca un exemplu rapid, iată o funcție care în esență scrie un text dat afară.

 funcția salut (text) document.write (text);

salut ("Bun venit la articol");

Hai să vedem ce se întâmplă atunci când minimalizăm acest lucru. Rețineți eliminarea spațiilor și indentării și scurtarea variabilei text.

funcția salut (e) document.write (e) salut ("Bun venit la articol")

Instrumente de minificare Javascript

Instrumentele folosite pentru miniaturile Javascript pot fi în mare parte clasificate în 3 grupe: instrumente online, instrumente GUI și instrumente de linie de comandă.

Cu ajutorul instrumentelor online este de obicei o chestiune de pastrare a codului și copierea rezultatului imediat.
Instrumentele GUI conțin adesea mult mai multe funcționalități; Miniseria JS este doar o mică parte din ceea ce fac.
Instrumentele liniei de comandă sunt, de asemenea, de obicei mai cuprinzătoare, oferind minificarea ca un modul.

Instrumente Online

javascript-minifier.com este un instrument frumos cu un API
Compresorul online YUI este un instrument mai puternic care utilizează compresorul YUI, cu o mulțime de opțiuni și capabilități de minificare CSS
jscompress.com este un minifier fără brizoane, dar face treaba
jsmini.com este o altă opțiune, dar utilizabilă în întregime

Lucrul grozav despre uneltele online este viteza cu care poți lucra cu ei. GUI-ul complex și instrumentele din linia de comandă se micșorează mai repede, dar trebuie să aveți un proiect creat pentru ca acesta să funcționeze corect. Dezavantajul acestor instrumente este că acestea sunt cele mai multe oferă puține până la nici o particularizare, cel puțin în comparație cu instrumentele din linia de comandă.

Instrumente GUI

Koala este un instrument gratuit pentru compilarea LESS, SASS, miniseria JS și multe altele
Prepros este o aplicație plătită pe platformă, care vă oferă și mai multe opțiuni
Codekit este aplicația mea preferată. Este o aplicație plătită numai pentru Mac, care oferă compilație de coduri, minificare, un server de previzualizare, gestionarea pachetului de bagaje și multe altele
AjaxminGui este un instrument Windows gratuit, cu un singur scop, care vă permite să micșorați JS
UltraMinifier este o aplicație gratuită pentru OS X care minimează CSS și JS cu drag and drop
Mai mic este un instrument OS X care minifică și concatează fișiere pentru tine

Am menționat două tipuri de aplicații GUI aici. Aplicațiile simple de minimizare în etape sunt asemănătoare cu cele ale partenerilor lor online. Acestea sunt extrem de rapide de utilizat, deoarece puteți doar să trageți și să plasați fișierele în ele, fără configurare necesară. Acestea fiind spuse, ei nu oferă practic nicio personalizare.

Instrumentele GUI mai mari (Prepros, Koala, Codekit) sunt excelente în gestionarea proiectelor și oferindu-vă mai multe opțiuni pentru compresie, dar acestea nevoie de un pic de configurare. O minizare rapidă JS va dura aproximativ 20 de secunde de configurare, ceea ce este o mulțime, comparativ cu procesul de 2 secunde de instrumente on-line sau simple GUI.

Pe de altă parte, ele vă oferă mai multe caracteristici în general și vă oferă automatizare. Fișierele dvs. JS vor fi minificate de fiecare dată când le salvați, fără a fi nevoie să le micșorați manual. Dacă dezvoltați ceva în Javascript, acesta este cu siguranță modul de a merge.

Instrumente pentru linia de comandă

Minify este pentru cei care doresc să minise JS de la linia de comandă, dar nu doresc să instaleze nimic fantezie în Grunt sau Gulp
Uglify.js pe care le-am menționat mai devreme este, de asemenea, disponibil ca un instrument independent de linie de comandă
Grunt are o extensie pentru minificare Javascript numită grunt-contrib-uglify
Gulp are de asemenea miniaturi JS folosind Uglify.js prin gulp-uglify

Instrumentele de linie de comandă nu sunt doar pentru geeks Linux! Nu mă pricep la terminal, dar aranjarea lucrurilor precum Grunt și Gulp este ușoară prin documentația lor minunată. Instrumentele de susținere a liniilor de comandă reprezintă cantitatea extraordinară de flexibilitate pe care o aveți de la opțiuni la ieșire.

Pe de altă parte, există a bit al unei curbe de învățare. Se obișnuiește cu linia de comandă ia ceva (nu foarte mult) practică pe care o veți găsi restrictivă înainte de a începe să vă bucurați de avantajele oferite.

Prezentare generală

Dacă sunteți nou în dezvoltarea de web, aș recomanda unul dintre primele trei instrumente GUI. Ele vă vor ajuta să vă gestionați proiectele în general și să oferiți mult mai mult decât miniere JS.

Dacă sunteți un proaspat profesionist, probabil că ar trebui să vă uitați Grunt sau Gulp deoarece acestea oferă cel mai mult control asupra sarcinilor de automatizare. Dacă trebuie să micșorați rapid un script fără a crea un proiect, instrumentele din linia de comandă vă pot economisi mult timp.

Fiecare grup de instrumente are avantajele și dezavantajele lor și, în realitate, probabil veți ajunge să folosiți unul din fiecare la un moment dat sau altul. Rețineți că atunci când vă aflați într-un mediu de producție, trebuie să vă minimalizați Javascript și CSS!