Nel post precedente ho elencato le 14 regole del libro "High Performance Web Sites" per sviluppare un front-end performante. Avrete notato che parecchie di queste hanno a che fare con l'ottimizzazione del codice javascript - quanto più sviluppati siti con effetti dinamici moderni (menu a cascata, slideshow, popup ecc.), tanto più importanti sono queste regole. Ripeto di seguito le regole relative al JavaScript, commentandole dove necessario:

• Make Fewer HTTP Requests: il tempo che il browser impiega a scaricare un singolo file da 1kb non è uguale al tempo che impiega a scaricare 10 file da 100b, ma è sensibilmente inferiore. Perchè, se la dimensione totale del contenuto scaricato è la stessa? Beh, perchè al download di ciascun file separato corrisponde un nuovo round trip al server, il che introduce una latenza sensibile se ci sono molti file da scaricare. Pertanto è meglio avere un unico file .js da 1kb piuttosto che 10 da 100b. E' anche vero che soprattutto in fase di sviluppo è più comodo avere più di un file .js, in modo da separare fisicamente classi e funzioni appartenenti a componenti e funzionalità indipendenti. Prima di andare in produzione tuttavia si può facilmente copiare e incollare il contenuto di ciascun file all'interno di un unico file, linkare quest'unico file nel file .aspx / .php / .htm che usa le funzioni javascript, e caricare sul server quell'unico file.
• Put Scripts at the Bottom: se gli script stanno sul fondo della pagina, il browser potrà scaricare prima le immagini, i css e il testo HTML della pagina, cosicchè la pagina possa essere mostrata almeno parzialmente mentre si scaricano gli script. Viceversa, se gli script stanno in cima, l'utente vedrà solo una pagina bianca nel frattempo.
• Make JavaScript and CSS External: poichè i file statici vengono salvati nella cache locale una volta scaricati la prima volta, se mettiamo tutto il codice javascript in un file esterno riusciremo a sfruttare tale cache. Viceversa inserendo gli script inline,  direttamente nel corpo del file .aspx / .php, gli script verranno scaricati ad ogni richiesta della pagina, in quanto sono una parte integrante del contenuto della pagina stessa. Per script piuttosto complessi, la differenza nei tempi di download diventa sicuramente sensibile.
• Minify JavaScript: è una tecnica che riduce / minimizza il codice degli script togliendo spazi e commenti, e cambiando i nomi delle variabili, funzioni e costanti in modo che siano più brevi (di solito diventano di 1 o 2 lettere) di quelli originali. Il risultato varia da caso a caso ovviamente, ma quasi certamente ne varrà la pena.

Mentre cercavo di seguire queste regole, un tool che ho trovato comodissimo (direi addirittura provvidenziale) è stato Packer for .NET. Questo tool open source è costituito da un eseguibile console, che si prende in input un elenco di file .js e genera un singolo .js che ingloba tutti gli script in forma minimizzata. Essendo un programma da riga di comando (parametrizzabile quindi) è facile integrarlo nel proprio processo di built ad esempio come azione custom di Post-Build (questo è quello che ho fatto io), oppure tramite le azioni custom presenti per MSBuild.