Share
Uno dei metodi più utili per l'ottimizzazione del codice JavaScript potrebbe sorprendervi: rimuoverlo completamente dai file HTML. In questo video del mio corso The Designer's Guide to JavaScript Optimization, imparerai come esternalizzare e minimizzare JavaScript.
Un ottimo modo per aumentare l'efficienza del nostro codice è esternalizzare e minimizzare il nostro codice.
Quando parliamo di esternalizzare il nostro codice, quello di cui sto parlando è togliere tutto il nostro JavaScript dalle nostre pagine HTML e inserire quel JavaScript in un file JavaScript separato, un file js..
È molto facile da fare Prenderesti semplicemente tutto dentro il copione tag, rimuoverlo e quindi creare un nuovo file di testo con un'estensione .js. Quindi useresti semplicemente a copione tag per puntare a quel file.
Quindi ecco un esempio. Ho un file index.html con codice JavaScript al suo interno. Quindi metto semplicemente in evidenza tutto ciò che è dentro copione tag e tagliarlo.
E poi possiamo sbarazzarci di copione tag del tutto evidenziandoli e cancellandoli.
E poi ho intenzione di creare un nuovo file JavaScript nella mia cartella JavaScript e chiamarlo semplicemente site.js.
Non importa quale editor di testo stai usando. Sto usando il codice di Visual Studio qui, ma potresti anche usare parentesi o qualsiasi altro editor di testo normale. Ma lo sto salvando come site.js, e mi limiterò a incollarvi tutto il codice JavaScript.
Ora non funzionerà ancora perché non stiamo ancora indicando questo JavaScript nel nostro file HTML.
Ma possiamo tornare al nostro index.html. E poi, dopo aver caricato tutte le nostre dipendenze, ne creeremo le nostre copione tag per caricare il file che abbiamo appena creato.
Quindi è nella nostra cartella JavaScript js / e poi l'ho chiamato site.js, quindi il codice è:
Questo è davvero tutto ciò che serve per esternare il tuo JavaScript.
Uno dei grandi vantaggi di avere il tuo JavaScript in un file separato è che puoi facilmente minimizzare o minimizzare quel codice JavaScript. E quando hai una versione minificata del tuo codice, quella versione miniata funzionerà molto più velocemente, perché sarà una dimensione di file più piccola.
Sarà difficile leggere o modificare il file minificato. Ecco perché salvi la copia originale del tuo JavaScript in modo che, se hai bisogno di apportare modifiche, apporti delle modifiche a quel file JavaScript originale, e poi lo ridimensioni di nuovo.
Ora, come si minimizza? Ci sono diverse opzioni.
La maggior parte degli editor di codice moderni ha plugin che minino il tuo JavaScript per te. Ad esempio, sto usando il codice di Visual Studio. Se andiamo alle nostre estensioni e facciamo semplicemente una ricerca per "minify", puoi vedere diverse opzioni per minimizzare il tuo codice.
Un altro editor di testo online gratuito chiamato Brackets ha anche estensioni che puoi usare per minimizzare il codice. Quindi, se vai al gestore dell'interno di Brackets e fai una ricerca per "minify", vedrai un minifier JavaScript.
Tieni presente che dopo aver ridotto il codice, devi modificare il file a cui stai puntando nel file HTML. Quindi, se hai eliminato i file site.js, avresti una nuova versione chiamata probabilmente site.min.js. E così nel tuo codice HTML, vorresti puntare a quella versione minificata invece della versione originale del tuo codice. Altrimenti, tutta quella minificazione è inutile
Se per qualche ragione ti piace usare il blocco note per eseguire tutte le operazioni di modifica del codice, puoi comunque ridimensionarlo e un modo per farlo è andare su un sito web come JSCompress.
Fondamentalmente, questo ti permette di incollare il tuo codice e quindi fare clic su Comprimi JavaScript pulsante, e vedrai che questo comprime il nostro codice del 74%.
Questo è solo un piccolo pezzo di JavaScript qui, quindi puoi immaginare che se avessi un sacco di JavaScript sulla tua pagina, questo ti farebbe risparmiare parecchie dimensioni del file. E quando hai un sito web ad alto traffico, questo sarà davvero di grande aiuto.
Un vantaggio di esternalizzare e minimizzare il tuo JavaScript è che ti permette di gestire un po 'meglio il caching.
Diciamo, ad esempio, che hai una porzione di codice JavaScript che stai per utilizzare su diverse pagine del tuo sito web. Avrebbe senso inserire quel piccolo frammento di codice JavaScript nel proprio file JavaScript, in modo che, una volta che l'utente lo visita, sia già presente nella cache del browser. Quindi, quando visitano un'altra pagina che punta allo stesso file JavaScript, non deve caricare di nuovo quel codice JavaScript. In questo modo ridurrà il numero di richieste fatte per quel particolare pezzo di JavaScript.
Se si desidera portare questo al livello successivo, è possibile utilizzare una Content Delivery Network (CDN) per archiviare versioni dei file JavaScript in posizioni geograficamente diverse. Quindi potresti avere il tuo JavaScript memorizzato su server in tutto il mondo.
Il vantaggio è che se hai creato il tuo sito web in Texas e qualcuno nel Regno Unito vuole accedere al tuo sito web, quindi senza un CDN, quell'utente dovrebbe connettersi al tuo server per ottenere tutti i file di cui hanno bisogno.
Ma se il tuo JavaScript è in una rete CDN, è probabile che ci sarà una versione di quel file JavaScript su un server nel Regno Unito o in qualche altro posto in Europa. Quindi sarebbe molto più vicino alla posizione dell'utente, il che significa che si scaricherà più rapidamente e funzionerà più agevolmente.
Tieni presente che un CDN costa, quindi è davvero qualcosa che vuoi perseguire se sei pronto per il prossimo livello. Ma può davvero aiutare ad accelerare il tuo sito web.
Nel corso completo, The Designer's Guide to JavaScript Optimization, imparerai più tecniche di ottimizzazione che sono perfette per i web designer. Ti mostrerò alcune tecniche facili da implementare per rendere il tuo JavaScript e, di conseguenza, i tuoi siti web, senza intoppi.
Puoi seguire questo corso subito con un abbonamento a Envato Elements. Con una sola tariffa mensile bassa, puoi accedere non solo a questo corso, ma anche alla nostra libreria in crescita di oltre 1.000 corsi video e eBook leader del settore su Envato Tuts+.
Inoltre ora ottieni download illimitati dall'enorme libreria Envato Elements di oltre 460.000 risorse creative. Crea con caratteri, foto, grafica e modelli univoci e realizza progetti migliori più velocemente.
Accentsconagua