2010-12-02 14 views
19

Sto cercando di implementare alcune ottimizzazione delle prestazioni attorno al mio javascript/css. In particolare cercando di ottenere la minificazione e la combinazione di tali. Sto sviluppando in applicazioni web .net/C#.Minimizzazione e combinazione di file in .net

Ho un paio di opzioni e alla ricerca di feedback per ogni:

Il primo è questo strumento intelligente mi sono imbattuto Chirpy che, attraverso lo studio visivo combina, minifies ecc ->http://chirpy.codeplex.com/ Questo è uno studio di visual aggiungere in ma come sono in un ambiente di squadra, questo strumento non è l'ideale.

La mia prossima opzione è usare un task di Msbuild (http://yuicompressor.codeplex.com/) per minimizzare i file e anche combinarli (magari leggere da un file xml che cosa deve essere combinato). Mentre questo funziona per minimizzare bene, la mia preoccupazione è che dovrò mantenere ciò che deve essere combinato che potrebbe essere un mal di testa.

La terza opzione consiste nell'utilizzare l'attività msbuild solo per il minifying e in fase di esecuzione utilizzando alcune classi helper, combinando i file su una base per pagina. Ciò combinerebbe i file, gli assegnerà un nome e ne aggiungerà una versione.

Altre opzioni che potrei prendere in considerazione? La mia preoccupazione per l'ultima opzione è che potrebbe avere problemi di prestazioni poiché dovrei aprire il file dall'unità locale, leggerne il contenuto e combinare i file. Questo è un sacco di elaborazione in fase di esecuzione. Stavo guardando qualcosa come Squishit - https://github.com/jetheredge/SquishIt/downloads Questo minimizza i file in fase di esecuzione, ma guarderei a fare questo in fase di compilazione.

Quindi qualsiasi feedback sui miei approcci sarebbe fantastico? Se la terza opzione non causerebbe problemi di prestazioni, io sto conducendo verso di essa.

+0

Forse correlato http://stackoverflow.com/q/4234213/340760 – BrunoLM

risposta

11

Abbiamo fatto qualcosa di simile con diverse applicazioni Web ASP.NET. Nello specifico, utilizziamo lo Yahoo Yui compressor, che ha una versione di libreria .NET a cui è possibile fare riferimento nelle applicazioni.

L'approccio è stato quello di generare i file necessari uniti/minificati in fase di esecuzione. Abbiamo avvolto tutta questa logica in un controllo ASP.NET, ma non è necessario a seconda del progetto.

  • La prima volta che viene effettuata una richiesta per una pagina, elaboriamo l'elenco dei file JS e CSS inclusi. In un thread separato (quindi la richiesta originale ritorna senza ritardo) abbiamo quindi unito i file inclusi (1 per JS, 1 per CSS) e quindi applicato il compressore Yui.
  • Il risultato viene poi scritto su disco per riferimento veloce in futuro
  • durante le richieste successive, la pagina prima cerca le versioni minified. Se trovato, serve solo quelli. In caso contrario, passa nuovamente attraverso il processo.

Come alcuni ciliegina sulla torta:

  • a scopo di debug, se la stringa di query di debug = true è presente, le risorse unite/minified vengono ignorati ei file singoli originali sono serviti invece (? dal momento che può essere difficile eseguire il debug di JS ottimizzato)

Abbiamo trovato che questo processo funziona eccezionalmente bene. Lo abbiamo costruito in una libreria in modo che tutti i nostri siti ASP.NET possano trarne vantaggio. Gli script post-compilazione possono essere complicati se ogni pagina ha dipendenze diverse, ma il tempo di esecuzione può determinarlo abbastanza facilmente. Inoltre, se qualcuno deve apportare una soluzione rapida a un file CSS, può farlo, eliminare le versioni unite del file e il processo ricomincia automaticamente senza la necessità di eseguire l'elaborazione post-build con MSBuild o NAnt.

+0

Dove posso ottenere questa meravigliosa macchina/dll aka unicorno di cui parli? Ho scritto la stessa identica cosa per coldfusion e sono assolutamente d'accordo che funziona alla grande. Supponevo che esistesse una cosa del genere per .Net, ma apparentemente non ... – Barry

0

Vale la pena combinare i file in fase di esecuzione per evitare di sincronizzare le nuove versioni. Tuttavia, una volta che sono combinati a livello di codice, salvali sul disco. Quindi il codice che viene eseguito ogni volta che i file vengono recuperati deve solo verificare che i file non siano stati modificati prima di pubblicare la versione memorizzata nella cache.

Se sono stati modificati, il codice di compressione può essere eseguito come una tantum. Anche se ci sarà un leggero costo di prestazioni, riceverete anche un vantaggio in termini di prestazioni da un minor numero di richieste di file.

Questo è l'approccio utilizzato dallo strumento Minify per comprimere JS/CSS, che ha funzionato molto bene per me. È solo Linux/PHP, ma potresti anche avere qualche idea in più.

2

Ho fatto una bella soluzione a questo un paio di anni fa, ma non ne ho la fonte. La soluzione era per le webform ma dovrebbe funzionare correttamente per portarlo su MVC. Farò un tentativo per spiegare cosa ho fatto in un semplice passaggio. Per prima cosa dobbiamo registrare gli script e abbiamo scritto un controller speciale che ha fatto proprio questo. Quando il controllore è stato reso lo ha fatto tre cose:

  1. ridurre al minimo tutti i file, penso che abbiamo usato la compressione YUI
  2. combinare tutti i file e le vendite come stringa
  3. Calcolare un hash per la stringa del file combinati e utilizzarli come nome file virtuale. Si memorizza la stringa di file combinati in un dizionario memorizzato nella cache sul server con il valore hash come chiave, l'html che viene reso deve puntare a una cartella speciale in cui si trovano gli "script".

Il passaggio successivo consiste nell'implementare uno speciale HttpHandler che gestisce la richiesta di file nella cartella speciale. Quando viene effettuata una richiesta a quella cartella speciale, si effettua una ricerca nel dizionario memorizzato nella cache e si restituisce la stringa bascialmente.

Una caratteristica davvero piacevole di questo è che lo script restituito è sempre valido, quindi l'utente non dovrà mai chiedere un aggiornamento dello script. Il motivo è che quando apporti una modifica a uno qualsiasi dei file di script il valore dell'hash cambierà e il client chiederà un nuovo script.

È possibile utilizzare questo per file css pure senza problemi. Ho pensato di renderlo configurabile in modo da poter disattivare i file combinati, minimizzare i file o semplicemente escludere un file dal processo se si desidera eseguire il debug.

Avrei potuto perdere alcuni dettagli, ma non è stato difficile da implementare e si è rivelato molto bene.

Aggiornamento: Ho implementato una soluzione per MVC e rilasciato su nuget e hanno la fonte su github.

4

hai mai sentito parlare di Combres? andare a: http://combres.codeplex.com e check it out

si minifies vostro file CSS e JS in fase di esecuzione significa che è possibile modificare qualsiasi file e caricarlo e ogni richiesta del cliente lo fa minifies esso. tutto quello che devi fare è aggiungere i file che vuoi comprimere in un elenco nel file XML di Combres e chiamare l'elenco dalla tua pagina/masterpage.

se si sta utilizzando VS2010 si può facilmente installare sul vostro progetto utilizzando NuGet ecco il link Combres NuGet: http://combres.codeplex.com/wikipage?title=5-Minute%20Quick%20Start

+1

+1 Flessibile e molto facile da usare – Keith

+0

Una delle migliori implementazioni che ho usato, ottima libreria. –

+0

+1 Nizza. Molto facile da usare. Ci sono voluti circa 15 minuti per l'installazione nel mio progetto. Molto più semplice e flessibile di molte altre opzioni. – FreeAsInBeer

7

RequestReduce offre davvero una bella soluzione per la combinazione e minifying JavaScript e CSS in fase di esecuzione. Tenterà anche di sputare le tue immagini di sfondo. Memorizza nella cache i file elaborati e li serve utilizzando ETag personalizzati e intestazioni future lontane. RequestReduce utilizza un filtro di risposta per trasformare il contenuto in modo che non sia necessario alcun codice o configurazione per le funzionalità di base. Può essere configurato per funzionare in un ambiente Web farm e sincronizzare i contenuti su più server e può essere configurato in modo che punti a un CDN. Può essere scaricato allo http://www.RequestReduce.com o da Visual Studio tramite Nuget. La fonte è disponibile allo https://github.com/mwrock/RequestReduce.

+0

ho visto di nuovo questa risposta in alcune altre domande. Devi averlo pronto sul tuo disco per copiarlo incollalo qui: D bella libreria. upvoted .. – rovsen

0

Avevo bisogno di una soluzione per combinare/minificare CSS/JS su una web app .NET 2.0 e SquishIt e altri strumenti che ho trovato non erano compatibili con .NET 2.0, ho creato la mia soluzione che utilizza una sintassi simile a SquishIt ma è compatibile con .NET 2.0. Dal momento che ho pensato che altre persone potessero trovarlo utile l'ho messo su Github. Puoi trovarlo qui: https://github.com/AlliterativeAlice/simpleyui

Problemi correlati