Comprimere Javascript e CSS su packed.it
Venerdì 5 Ottobre 2007 - 08:01
di Cesare Lamanna
Packed.it è il servizio di compressione per file Javascript e CSS creato da Andrea Giammarchi (ne parla sul suo blog).
Come accennato, si tratta di un servizio completamente online, che nelle intenzioni dell’autore dovrebbe e vorrebbe superare i limiti di altre soluzioni affini, o almeno racchiudere in un solo prodotto tutti i loro pregi (parlo per esempio di JSMin, ma anche del packer di Dean Edwards, di YUICompressor e Dojo ShrinkSafe).
packed.it permette di inserire codice a mano o di uploadare una serie di file Javascript e CSS. Il software utilizzato per comprimere e ottimizzare entrambi i formati si chiama MyMin, creato dallo stesso Andrea e ispirato da JSmin e packer. È disponibile in 4 linguaggi di programmazione: C#, JavaScript, PHP e Python. La licenza è di tipo MIT.
Dal momento che Andrea sicuramente ci legge, credo vorrà condividere nei commenti qualche ulteriore spunto e magari fornire a tutti i dettagli più tecnici.
Categoria: Scripting | Permalink
Commenti
1
se richiesti, volentieri :-)
2
E’ quasi superfluo, ma rinnovo i miei complimenti ad Andrea per il suo lavoro :)
Mi riservo di testare tutto quando avrò un po’ di tempo e di inviare gli eventuali feedback
# - postato da Giancarlo Moschitta - 05 Ottobre 2007 - 11:47
3
Grazie Giancarlo, spero torni utile anche a te.
Quello che mi stupisce è l’apparente assenza di interesse sul progetto e sul servizio (posso dedurlo almeno dalla moria di commenti nell’unico posto dove ne avrei parlato in italiano :D).
Forse qualcuno penserà che di compressori ce ne sono già troppi e probabilmente in pochi hanno capito che quello che fa on-line packed.it, basato sul progetto MyMin, non lo fa nessun altro, ovvero accorpare in un unico file sia JavaScript che CSS.
Non è solo un minifier come quello Yahoo! o Dojo, non è solo un’alternativa al packer di Dean Edwards, è un nuovo sistema amico del W3C, amico dell’accesibilità, amico dei vostri servers ed amico dei navigatori e soprattutto è un servizio rivolto agli sviluppatori ma con vantaggi per tutti.
Chi ha il JavaScript disabilitato, ad esempio, avrà un file CSS alternativo e non dovrà scaricarsi tutti i CSS usati solo dalle librerie client (qualunque ha i suoi CSS dedicati).
Il sito, potete testare di persona, rispetta i validatori WatchFire compreso.
I browser compatibili non dovranno scaricare il CSS basilare ausiliario.
Il CSS viene ottimizzato prima da un minifier poi in un unica soluzione con il JavaScript.
Pensate a quante volte scrivete body, div, proprietà o stili nel CSS e quante volte riscrivete le stesse parole sul JavaScript (voi o la libreria che utilizzate).
Non è un caso che jQuery più jQuery UI tutta e tutti i temi CSS da 260Kb arrivano a pesarne 40 per avere tutto compreso, come non è un caso che Ext da oltre 560Kb arriva a pesarne 130Kb.
bytefx invece, in questo caso con processore del solo JavaScript, arriva a pesare 1.55Kb, anche meno dei 2Kb dichiarati :-)
Potete sfruttare packed.it come un normale compressore? Certo, ma potete anche cambiare modo di presentare i contenuti grazie all’esclusiva possibilità di accorpare il tutto in un unico file risparmiando molto più spazio di quanto si pensi utilizzando 2 compressori dedicati CSS o JavaScript più due versioni gzip per entrambi i sorgenti.
Spero di aver spiegato meglio anche qui, come nel mio blog, cosa ci sia di innovativo in packed.it e come il tutto possa essere usato in modo a mio avviso perfino più conforme con lo stile Web 2.0, tanto JS che gestisce DOM più tanto CSS dedicato.
Siete pronti per comprimere ? :-)
Resto a disposizione per eventuali chiarimenti e abbiate pazienza se non è tutto perfetto, è beta e nato due giorni fa, ma la procedura di ottimizzazione, almeno quella, sembra lavorare egregiamente con qualunque libreria, anche quelle che utilizzano i commenti condizionali dentro il sorgente (cosa che JSmin, ad esempio, non fa).
Concludo ringraziando Cesare per la segnalazione e per augurare a tutti una buona giornata.
4
Ciao Andrea, lascio perdere i complimenti, direi scontati, e passo subito al dunque.
Ho avuto qualche difficoltà a creare un progetto: in particolare non ho capito come inserire nel progetto un nuovo file ( a meno di non uploadarlo dal mio computer )o rinominare quelli già esistenti.
Oltre a ciò ho avuto difficoltà a capire il ruolo dei vari file contenuti nello zip scaricato una volta che ottimizzo il codice.
Sarà che sono un idiota ( cosa di cui ormai sospetto da anni ) comunque ti consiglio sia di includere nella pagina del progetto un breve docs che spieghi brevemente l’uso di packed, sia di semplificare il progetto.
Infine sarebbe bello poter uploadare un intero zip e che questo venga estratto direttamente nel progetto.
5
Ciao Mega, per creare un nuovo file basta clickare sull’area :-)
Questo se non ci sono files presenti, altrimenti basta aggiungere o incollare quello che vuoi e dove ti pare all’interno di un file già uploadato.
Nello zip ci sono i generatori automatici del contenuto (da oggi disponibili in 3 versioni, C#, PHP e Python) che appunto automaticamente prendono il giusto file dalla cartella packed.it e lo danno in pasto al browser solo se questo non ce l’ha in cache.
Il compito dei generatori è di essere usati come source dello script (esempio il sorgente di packed.it oppure nella sezione technologies dove è spiegato il tutto).
Ovviamente a seconda dell’host userai src=”packed.it.php” oppure packed.it.aspx oppure packed.it.psp
La semplicità mi sembra quasi imbarazzante ma se hai consigli sul come rendere l’uso della sezione create project più semplice ti ascolto volentieri mentre riguardo l’how to dentro il file zip non posso che darti ragione.
La sezione F.A.Q. la sto completando ed anche queste domande sono utili per sapere cosa scriverci, grazie :-)
P.S. sto pensando di fare un video per mostrare l’utilizzo, stay tuned :D
6
Grazie, ora mi è tutto più chiaro. Comunque il fatto che per creare un nuovo file bastava cliccare sulla textarea l’avevo capito, non avevo capito come fare a crearne un secondo; la procedura descritta da te è un pò macchinosa se si vogliono creare dei file ex novo, ma in fondo è difficile che qualcuno abbia questa necessità.
Tirando le somme devo dire che nonostante una certa difficoltà iniziale questo packed si è rivelato ben più potente di quelli che ho usato finora.
Certo che se mettessi anche questa cosa di poter uploadare uno zip sarebbe il massimo.
7
Mega, creare più files vuoti è inutile per il semplice fatto che non scarichi poi i sorgenti ma le versioni ottimizzate degli stessi.
L’unica comodità potrebbe essere quella di fare dei copia e incolla su files differenti per poi gestire l’ordine ma se hai così tanti copia e incolla da fare presumo tu li stia prendendo da files, ergo con un upload fai prima e meglio, no?
Valuterò comunque la possibilità di creare più files vuoti ma per ora non credo sia una priorità per il servizio proposto mentre uploadare uno zip ammetto potrebbe aver senso e ci avevo pensato fin dall’inizio ma è veramente più comodo farti uno zip in locale ?
Lo stesso packed.it è “esploso” in 12 files sul mio PC, non mi metto a fare uno zip ogni volta, semplicemente uploado o ri-uploado solo il file modificato ( se usato durante lo sviluppo resta comodo lasciare il progetto in un tab ;-) ).
Lo scopo è infatti creare la versione ottimizzata definitiva per la produzione, non è così comodo come servizio durante lo sviluppo … quindi, una volta appurato tutto funzioni si crea il progetto e con 12 files l’operazione dura credo meno di un minuto, spero sia un tempo ragionevole.
Contestualmente la gestione di uno zip comporterebbe più “sforzi” da parte del server (seppur richieda meno banda in entrata) … ma siccome sono in fase valutativa non mi sento, per ora, di stressare l’host gentilmente e temporaneamente offertomi.
Insomma, consigli più che ben accetti, solo datemi un pò di tempo per trarre le conclusioni sull’utilizzo effettivo da parte degli sviluppatori :-)
8
Ciao Andrea,
ho utilizzato il tuo utilissimo packed.it.
Ora devo inserire dei javascript in formato Gzip su pagine jsp.
Esiste un codice come quelli che si scaricano (packed.it.php o packed.it.asp) dal tuo sito in formato jsp (java) e cosa devo installare sul server?
Grazie# - postato da Fabio - 29 Novembre 2007 - 13:20
9
Il tuo link rimanda ad un sito in parking… O si è trasferito oppure lo hanno chiuso…