Come organizzare la minificazione e il confezionamento di file css e js per velocizzare il sito web?

Question

Sto facendo ottimizzazione della velocità per la mia applicazione web. E ho trovato alcune pratiche per farlo. Ad esempio Best Practices for Speeding Up Your Web Site da Yahoo. Tra questi:

• Minimizza JavaScript e CSS.
• Ridurre al minimo il numero di richieste HTTP combinando diversi file (css, js) in uno.

La mia domanda è quale infrastruttura, strumenti e processo di costruzione si utilizza o può consigliarlo per farlo?

Answer 1

È possibile utilizzare YUI Compressor.

Può comprimere JavaScript e CSS. Basta eseguirlo per tutti i tuoi file, quindi concatenarli in un unico file 'pacchetto'. Puoi farlo manualmente, scrivere un Makefile o usare qualche script per comprimere "just-in-time" su richiesta web, sebbene potresti voler memorizzare nella cache il file risultante.

Answer 2

Secondo lo JavaScript Compression Rater, lo strumento più efficiente è lo YUI Compressor o JSMin.

Answer 3

Grande fan di Dean Edwards /packer/ me stesso - viene in una varietà di sapori.

Answer 4

I suggerimenti di Yahoo sono eccellenti. Io uso gomez per testare i risultati degli sforzi di ottimizzazione. La minificazione è un buon passo. Ho riscontrato che gli impatti più grandi di solito possono essere fatti regolando il modo in cui le pagine sono messe insieme (in particolare nel ridurre la quantità di immagini ridotte in piccoli pezzi per ridurre il numero di richieste). Ad ogni modo, questo yahoo blog dà una buona carrellata di strumenti di minimizzazione. In genere, sto lontano dall'offuscamento, a meno che non ci sia un motivo convincente al di là della relativamente piccola prestazione. I passaggi effettivi per installare e utilizzare uno strumento di minificazione sono relativamente semplici.

Answer 5

Seguendo il collegamento yahoo blog ho trovato una soluzione reale - "Make your pages load faster by combining and compressing javascript and css files" di Niels Leenheer.

Answer 6

Oppure è sufficiente configurare il server HTTP in GZIP per comprimere tutti i documenti di testo.

Answer 7

Faccio ASP.NET, quindi utilizzo CruiseControl.NET con NAnt per il mio processo di compilazione. Una parte di questo processo di costruzione sta comprimendo con YUICompressor che nella mia esperienza è il miglior compressore disponibile.

Se non si esegue ASP.NET, esiste ancora il CruiseControl originale con Ant che è possibile utilizzare nella stessa capacità.

Il motivo per cui ho trovato un set up superiore è perché a) tutte le cose noiose sono automatizzate eb) se stai testando sul tuo computer non devi eseguire il debug di una singola stringa super lunga di JS :)

Answer 8

Ho integrato il minification nel mio processo di implementazione. Lo faccio in perl con i pacchetti JavaScript::Minifier e CSS::Minifier.

Durante il mio sviluppo, voglio mantenere espanso lo script.Ho messo alcuni commenti nel mio HTML in modo che il mio script sa quali file di mettere togetheer e minify:

<!--- MinifyJS[js/minified-1.js] --> 
<script src="..."></script> 
<script src="..."></script> 
<!-- end[js/minified-1.js] --> 

<!--- MinifyCSS[css/minified-1.css] --> 
<link ...> 

Un paio di espressioni regolari, e ho subito ottenere una versione di "produzione" con i file minified.

Answer 9

per la compressione di tutto prima di caricarlo su web, questo programma è grande sia per i CSS/JS/HTML:

http://www.w3compiler.com/

E 'anche possibile selezionare le aree di non comprimere, in quanto non è tutti i codici MVC nel tuo markup che supporta essere compresso.

E salva i file di backup ogni volta che comprime i file, così puoi facilmente decomprimerlo con un semplice clic.

Answer 10

Ho trovato Minify più utile per i miei progetti PHP. Molto facile da usare, consente di risparmiare tempo configurando la minimizzazione, la compressione e la cache dei file CSS e JS manualmente. Ha anche una funzione di raggruppamento ordinata.

Alcune note su YUI Compressor

1. YUI Compressor genera senza interruzioni di riga a tutti mentre Minify ha qualche.
2. Fare attenzione se sono presenti stringhe di escape. Ho scoperto che YUI Compressor li ha scovati. Quindi stringhe come "\" "diventano" '".

Answer 11

Ho scritto il mio gestore personalizzato per questo. Usa il compilatore di chiusura di google e comprime i file solo quando necessario in modalità di rilascio. Check it out:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

Grazie

Guido Tapia