Combina e calcola più file CSS / JS

Sto cercando di ottimizzare le prestazioni di un sito consolidando e comprimendo i file CSS e JS. La mia domanda riguarda maggiormente i (concreti) passi su come raggiungere questo objective, data la situazione reale che stavo affrontando (anche se dovrebbe essere tipico anche tra gli altri sviluppatori).

La mia pagina fa riferimento a diversi file CSS e JS come segue:

       

Per la versione di produzione, mi piacerebbe combinare i 3 file CSS in uno e minarlo usando ad esempio YUI Compressor . Ma poi, avrei bisogno di aggiornare tutte le pagine che hanno bisogno di questi 3 file per fare riferimento al CSS appena modificato. Questo sembra sobject a errori (ad esempio stai rimuovendo e aggiungendo alcune linee in molti file). Qualche altro approccio meno rischioso? Lo stesso problema per i file JS.

Dai un’occhiata a minify : ti consente di combinare più file js, css in uno solo impilandoli in un url, ad es

  

Lo abbiamo usato per anni e fa un ottimo lavoro e lo fa al volo (non è necessario modificare i file).

Penso che il compressore YUI sia il migliore che ci sia. Minimizza JS e CSS e rimuove anche le dichiarazioni di console.log che la gente usa per il debug di JavaScript a basso livello.

Scopri com’è facile .

Puoi avviarlo in un compito di formica e quindi inserirlo nei tuoi ganci post / pre commit se usi svn / git.

AGGIORNAMENTO: Al giorno d’oggi uso grunt con i contributi concat, minify e uglify. Puoi usarlo con un osservatore in modo che crei nuovi file minifed in background ogni volta che cambi la fonte. L’uglify contrib non solo limita i log della console, ma anche le funzioni e le proprietà inutilizzate.

Vedi questo tutorial per una breve panoramica.

AGGIORNAMENTO: Oggigiorno la gente fa un passo indietro rispetto al suo predecessore “gulp” e usa npm come strumento di costruzione. Leggi qui .

Avrei bisogno di aggiornare tutte le pagine che hanno bisogno di questi 3 file per fare riferimento al CSS appena modificato.

In primo luogo, direi che dovresti avere un’intestazione comune. Quindi non sarà necessario modificare tutte le intestazioni in qualsiasi momento, quando necessario. È buona prassi avere un’intestazione singola o 2-3. Così come la tua pagina ha bisogno puoi cambiare la tua intestazione. Quindi, ogni volta che vuoi estendere la tua web-app sarà meno rischioso e noioso.

Non hai menzionato i tuoi ambienti di sviluppo. Puoi vedere che ci sono molti strumenti di compressione elencati per ambienti diversi . E stai usando un buon strumento ieYUI Compressor.

Ho finito per usare CodeKit per concatenare i miei file CSS e JS. La caratteristica che trovo davvero utile è la possibilità di fare la concatenazione su file save; perché controlla le rispettive risorse CSS / JS. Una volta che li ho combinati correttamente, ad es. In 1 file CSS e 1 JS, tutti gli altri file possono semplicemente riferirsi a questi 2.

Puoi anche chiedere a CodeKit di eseguire la minimizzazione / compressione al volo.

Disclaimer: non sono affiliato in alcun modo con CodeKit. L’ho trovato casualmente sul Web ed è stato un ottimo strumento nel mio processo di sviluppo. Inoltre viene fornito con buoni aggiornamenti da quando l’ho usato per la prima volta più di un anno fa.

È 2015 anno in strada e il modo più semplice in cui imo sta usando gulp – http://gulpjs.com/ . Il codice minifying usando gulp-uglify per gli script js e gulp-minify-css per css è molto semplice. Gulp vale sicuramente la pena di provarci

Suggerimento rapido per gli utenti di Windows, se si desidera solo concatare i file:

Apri un cmd nel posto desiderato e inserisci i tuoi file in un file usando ” type

ex:

 type .\scripts\*.js >> .\combined.js 

Se l’ordine degli script è importante, è necessario digitare i file in modo esplicito nell’ordine desiderato .

Lo uso in un file bat per i miei progetti angolari / bootstrap

 del combos.js type .\lib\jquery.min.js >> .\combos.js type .\lib\bootstrap.min.js >> .\combos.js type .\lib\Angular\angular.min.js >> .\combos.js type .\lib\Angular\angular-route.min.js >> .\combos.js type .\lib\Angular\angular-sanitize.min.js >> .\combos.js type .\app.js >> .\combos.js type .\services\*.js >> .\combos.js type .\controllers\*.js >> .\combos.js 

Non vedo che menzioni un sistema di gestione dei contenuti (WordPress, Joomla, Drupal, ecc.) Ma se usi un CMS popolare hanno tutti plug-in / moduli disponibili (anche opzioni gratuite) che ridurranno e memorizzeranno nella cache i tuoi css e js.

L’utilizzo di un plug-in ti dà la possibilità di mantenere le versioni non compresse disponibili per la modifica, quindi quando vengono apportate modifiche il plug-in include automaticamente le modifiche e comprime nuovamente il file. Assicurati di scegliere un plug-in che ti consenta di escludere file (come un file js personalizzato) in caso contrario.

In passato ho tentato di mantenere questi file manualmente e si trasforma sempre in un incubo di manutenzione. Buona fortuna, spero che questo sia stato d’aiuto.

Per le persone che desiderano qualcosa di un po ‘più leggero e flessibile, oggi ho creato js.sh per risolvere questo problema. È un semplice strumento a riga di comando mirato ai file JS che può essere facilmente modificato per occuparsi anche dei file CSS. Benefici:

  • Facilmente configurabile per l’utilizzo da parte di più sviluppatori su un progetto
  • Combina i file JS nell’ordine specificato in script_order.txt
  • Li comprime con il Closure Compiler di Google
  • Divide JS in blocchi <25kb laddove possibile, poiché l'iPhone non memorizzerà nella cache nulla più grande di 25kb
  • Genera un piccolo file PHP con tag che puoi includere dove appropriato
  • Uso: js.sh -u yourname

Potrebbe utilizzare alcuni miglioramenti, ma è meglio per il mio caso d'uso di tutte le altre soluzioni che ho visto finora.

Il primo passo dell’ottimizzazione è la minimizzazione dei file. (Raccomando caldamente GULP per la minimizzazione e l’ottimizzazione: la sua semplice soluzione per l’orologio, l’installazione e tutti i file vengono compressi contemporaneamente. Supporta tutti i CSS, JS, meno, sass, ecc …)

O soluzione vecchia scuola:

1) In generale, come processo di ottimizzazione, per ottimizzare le prestazioni di un sito, prova a unire tutti i CSS in un unico file e comprimi il file usando Compass . In questo modo le tue molteplici richieste di CSS statico verranno sostituite con una singola.

2) Problema di più JS che puoi risolvere utilizzando CDN (o Google Hosted Libraries) in modo che le richieste vengano inoltrate ad altri server non ai tuoi. In questo modo il server non attende la richiesta precedente da completare prima di inviare il successivo.

3) Se hai il tuo JavaScript memorizzato localmente, minimizza ogni file usando il plugin Brackets “Comprimi JavaScript”. È fondamentalmente un clic per comprimere JavsScript. Brackets è un editor gratuito creato per CSS e JS ma può essere utilizzato per PHP e altre lingue. Vi sono molti plug-in da scegliere per gli sviluppatori sia front-end che back-end. In generale “un clic” per eseguire tutti questi comandi (finora multipli). A proposito, le staffe hanno sostituito il mio caro Dreamweaver;)

3) Prova a utilizzare strumenti come Sass , Compass, less per ridurre al minimo il tuo CSS.

Nota: anche senza usare il mix o le variabili SASS, il tuo CSS verrà compresso (solo un semplice comando CSS e Compass “watch” puro lo comprimerà per te).

Spero che aiuti!

Se stai facendo una pre-elaborazione sui file che servi, probabilmente vuoi configurare un sistema di compilazione appropriato (ad esempio un Makefile). In questo modo, hai alcuni file sorgente senza duplicazioni e ogni volta che apporti una modifica, esegui “make” e porta tutti i file generati automaticamente aggiornati. Se esiste già un sistema di costruzione, scopri come funziona e usalo. In caso contrario, dovrai aggiungerne uno.

Quindi, in primo luogo, capire come combinare e minimizzare i file dalla riga di comando (la documentazione di YUICompressor copre questo). Designare una directory per roba generata automaticamente, separata dalle cose su cui lavori ma accessibili al server web, e uscita lì, ad es. Gen / scripts / combined.js. Metti i comandi che hai usato in un Makefile e esegui nuovamente “make” ogni volta che hai apportato una modifica e desideri che abbia effetto. Quindi aggiorna le intestazioni in altri file per puntare ai file combinati e minificati.

Nel mio progetto symfony faccio qualcosa del genere

 {# layout.html.twig #} {% block styles %} {% if app.environment == 'prod' %}  {% else %}   {% endif %} {% endblock %} 
 {# some-view.html.twig #} {% extends 'AppMainBundle::layout.html.twig' %} {% block styles %} {{ parent() }} {% if app.environment != 'prod' %}  {% else %} {% endblock %} 

Quando la versione di sviluppo è pronta per la produzione, utilizzo questo script per combinare tutti i file CSS e sostituire i contenuti di min.css .

Ma questa soluzione funziona solo se gli stessi file CSS sono inclusi in tutte le pagine.

Puoi usare il modulo del nodo cssmin che è stato creato dal famoso compressore YUI

 $ npm -gi cosmic # install # Usage var puts = require('util').puts, fs = require('fs'), cssmin = require('./cssmin'); var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8'); var min = cssmin(css); puts(min); 

Tutte le utilità più veloci si trovano qui

 http://www.code-stuff.net http://www.code-stuff.net/HttpUtility http://www.code-stuff.net/HttpUtility/minifyCSS http://www.code-stuff.net/HttpUtility/stringify_json