Share
Una dintre metodele cele mai valoroase pentru optimizarea codului dvs. JavaScript ar putea să vă surprindă - eliminându-l complet din fișierele HTML. În acest videoclip din cursul Ghidul designerului pentru optimizarea JavaScript, veți afla cum să externalizați și să micșorați JavaScript.
O modalitate foarte bună de a crește eficiența codului nostru este prin externalizarea și minimizarea codului nostru.
Când vorbim despre externalizarea codului nostru, despre ce vorbesc este să luăm tot JavaScript-ul nostru din paginile noastre HTML și să îl punem într-un fișier JavaScript separat, un fișier .js.
Este foarte ușor de făcut. Ai lua totul înăuntru scenariu etichete, eliminați-l și apoi creați un nou fișier text cu extensia .js. Apoi, ați folosi pur și simplu a scenariu pentru a indica acel fișier.
Deci, iată un exemplu. Am un index.html fișier cu cod JavaScript în interiorul lui. Deci, subliniez pur și simplu totul în interiorul scenariu și taie-l.
Și apoi putem scăpa de scenariu etichete în întregime prin evidențierea și ștergerea acestora.
Și apoi voi crea un nou fișier JavaScript în interiorul folderului meu JavaScript și doar să-l sun site.js.
Nu contează ce editor de text utilizați. Folosesc codul Visual Studio aici, dar puteți utiliza și paranteze sau orice alt editor de text simplu. Dar îl salvez ca site.js și voi lipi tot codul JavaScript în el.
Acum nu va funcționa încă pentru că nu indicăm încă acest JavaScript în fișierul nostru HTML.
Dar putem să revenim la index.html. Și apoi, după ce ne-am încărcat toate dependențele, vom crea propriile noastre scenariu tag pentru a încărca fișierul pe care tocmai l-am creat.
Deci, este în dosarul nostru JavaScript js / și apoi am sunat-o site.js, astfel încât codul este:
Acesta este tot ceea ce este nevoie pentru a externaliza JavaScript.
Unul dintre avantajele mari de a avea JavaScript într-un fișier separat este că puteți foarte ușor să minimalizați sau să micșorați acel cod JavaScript. Și când aveți o versiune minimizată a codului dvs., versiunea minimizată va funcționa mult mai repede, deoarece va fi o dimensiune mai mică a fișierului.
Va fi greu să citești sau să editezi acel fișier minificat. De aceea, salvați copia originală a JavaScript-ului dvs., astfel încât, dacă aveți nevoie să faceți modificări, modificați fișierul JavaScript original și apoi îl micșorați din nou.
Acum, cum se minipează? Există mai multe opțiuni.
Majoritatea editorilor de coduri moderne au pluginuri care vă vor minifica JavaScript. De exemplu, folosesc Visual Studio Code. Dacă mergem la extensiile noastre și facem doar o căutare pentru "minify", puteți vedea mai multe opțiuni pentru minificarea codului.
Un alt editor de texte online numit Brackets are și extensii pe care le puteți folosi pentru a micșora codul. Deci, dacă mergeți la managerul de extensii pentru brackets și faceți o căutare pentru "minify", veți vedea un minifiter JavaScript.
Rețineți că după ce vă minificați codul, trebuie să modificați fișierul în care vă îndreptați în fișierul HTML. Deci, dacă ați miniat site.js, atunci ați avea o versiune nouă, probabil numită site.min.js. Și astfel, în codul dvs. HTML, doriți să indicați această versiune miniatură în locul versiunii originale a codului. În caz contrar, această minificare este inutilă
Dacă, dintr-un motiv oarecare, vă place să folosiți notepad pentru a face toate editările de cod, puteți încă să minificați și într-un fel puteți face acest lucru prin accesarea unui site web precum JSCompress.
Practic, acest lucru vă permite să vă lipiți codul și apoi să faceți clic pe Comprimați JavaScript buton, și veți vedea că acest lucru a comprimat codul nostru cu 74%.
Aceasta este doar o bucată foarte mică de JavaScript aici, astfel încât să vă puteți imagina că dacă ați avea o mulțime de JavaScript pe pagina dvs., acest lucru ar salva cu adevărat o mulțime de dimensiune de fișier. Iar când ai un site cu trafic ridicat, asta va ajuta foarte mult.
Unul dintre avantajele externalizării și minimizării JavaScript-ului dvs. este că vă permite să gestionați caching-ul puțin mai bine.
Să spunem, de exemplu, că aveți o bucată de cod JavaScript pe care o veți folosi pe mai multe pagini diferite de pe site-ul dvs. Web. Ar fi logic să punem acea mică bucată de cod JavaScript în propriul fișier JavaScript, astfel încât, odată ce utilizatorul dvs. o vizitează o singură dată, este deja stocat în memoria cache a browserului. Apoi, când vizitează o altă pagină care indică același fișier JavaScript, nu trebuie să reîncarce din nou JavaScript. Deci, acest lucru va reduce numărul de cereri care sunt făcute pentru acea bucată de JavaScript.
Dacă doriți să treceți la nivelul următor, puteți utiliza o rețea de livrare a conținutului (CDN) pentru a stoca versiunile fișierelor dvs. JavaScript în locații geografice diferite. Deci este posibil să aveți JavaScript stocat pe servere din întreaga lume.
Avantajul este că dacă ați creat site-ul dvs. în Texas și cineva din Marea Britanie dorește să acceseze site-ul dvs., atunci fără un CDN, acel utilizator ar trebui să se conecteze la serverul dvs. pentru a obține toate fișierele de care au nevoie.
Dar dacă JavaScript este într-un CDN, atunci sunt șanse să existe o versiune a acelui fișier JavaScript pe un server, fie în Marea Britanie sau undeva în Europa. Deci ar fi mult mai aproape de locația acelui utilizator, ceea ce înseamnă că se va descărca mai rapid și va funcționa mai ușor.
Rețineți că un CDN nu costă bani, deci este cu adevărat doar ceva pe care doriți să îl urmăriți dacă sunteți gata pentru următorul nivel. Dar într-adevăr vă poate ajuta să accelerați site-ul dvs..
În întregime, Ghidul designerului pentru optimizarea JavaScript, veți afla mai multe tehnici de optimizare care sunt perfecte pentru designerii web. Vă voi arăta câteva tehnici ușor de implementat pentru a vă face JavaScript, și, astfel, site-urile dvs. web, să ruleze fără probleme.
Puteți lua acest curs imediat cu un abonament la Envato Elements. Pentru o singură taxă lunară redusă, veți avea acces nu numai la acest curs, ci și la biblioteca noastră în creștere de peste 1.000 de cursuri video și cărți electronice de vârf din industria Envato Tuts+.
În plus, acum obțineți descărcări nelimitate de la imensa bibliotecă Envato Elements de 460.000 de bunuri creative. Creează cu fonturi, fotografii, grafică și șabloane unice și oferă proiecte mai bune mai rapid.
Accentsconagua