Combina e minimizza 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 più i passi (concreti) su come ottenere ciò, data una situazione reale che stavo affrontando (dovrebbe essere tipica anche tra gli altri sviluppatori, però).

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

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

Per la versione di produzione, mi piacerebbe combinare i 3 file CSS in uno e minimizzarlo usando ad esempio YUI Compressor . Ma poi, dovrei aggiornare tutte le pagine che richiedono questi 3 file per fare riferimento al CSS appena minimizzato. Questo sembra soggetto a errori (ad esempio, stai rimuovendo e aggiungendo alcune righe 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 semplicemente impilarli in un URL, ad es.

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

Lo usiamo da anni e fa un ottimo lavoro e lo fa al volo (non c'è bisogno di modificare i file).

Penso che il compressore YUI sia il migliore che ci sia. Minifica JS e CSS e rimuove anche quelle console.logistruzioni che le persone usano per il debug JavaScript di basso livello.

Guarda com'è facile .

Puoi avviarlo in un'attività ant e quindi includerlo nei tuoi hook 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 watcher in modo che crei nuovi file minimizzati in background ogni volta che cambi la tua fonte. Il contributo uglify non solo rimuove i log della console, ma rimuove anche le funzioni e le proprietà inutilizzate.

Guarda questo tutorial per una breve panoramica.

AGGIORNAMENTO: Oggigiorno le persone fanno un passo indietro dal grugnito al suo predecessore "gulp" e usano npm come strumento di compilazione. Leggi qui .

AGGIORNAMENTO: Quindi ora le persone usano il filato per eseguire npm. Nessuna sorpresa; icona di filati è un gatto. La maggior parte dei framework attuali utilizza webpack per raggruppare le risorse in pacchetti, che poi si occupano anche della minificazione .

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

Innanzitutto direi che dovresti avere un'intestazione comune. Quindi non sarà necessario modificare tutte le intestazioni in ogni momento quando necessario. È buona norma avere un'intestazione singola o 2-3. Quindi, se la tua pagina ha bisogno, puoi cambiare l'intestazione. Quindi, ogni volta che desideri estendere la tua app web, sarà meno rischioso e noioso.

Non hai menzionato i tuoi ambienti di sviluppo. Puoi vedere che ci sono molti strumenti di compressione elencati per diversi ambienti . 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 veramente utile è la possibilità di fare la concatenazione al salvataggio del file; perché monitora le rispettive risorse CSS / JS. Una volta che li ho combinati correttamente, ad esempio in 1 file CSS e 1 JS, tutti gli altri file possono semplicemente fare riferimento a questi 2.

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

Disclaimer: non sono affiliato in alcun modo con CodeKit. L'ho trovato casualmente sul web ed è servito come 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.

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

Apri un cmd nella posizione desiderata e reindirizza i tuoi file a un file utilizzando " tipo "

ex:

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

Se l'ordine dei tuoi script è importante, devi digitare esplicitamente i file, nell'ordine desiderato .

Io uso questo 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

È l'anno 2015 in strada e il modo più semplice in cui imo sta usando gulp - http://gulpjs.com/ . La minimizzazione del codice usando gulp-uglify per gli script js e gulp-minify-css per css è molto semplice. Gulp merita sicuramente di essere provato

Non ti vedo menzionare un sistema di gestione dei contenuti (Wordpress, Joomla, Drupal, ecc.) Ma se stai usando un CMS popolare hanno tutti plug-in / moduli disponibili (anche opzioni gratuite) che minimizzeranno e memorizzeranno nella cache i tuoi css e js.

L'uso 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 solo di scegliere un plug-in che ti consenta di escludere file (come un file js personalizzato) nel caso in cui si rompa qualcosa.

Ho provato in passato a mantenere questi file manualmente e si trasforma sempre in un incubo di manutenzione. Buona fortuna, spero che questo abbia aiutato.

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 da riga di comando mirato ai file JS che potrebbero essere facilmente modificati per prendersi cura anche dei file CSS. Benefici:

• Facilmente configurabile per l'utilizzo da parte di più sviluppatori in un progetto
• Combina i file JS nell'ordine specificato in script_order.txt
• Li comprime con il compilatore di chiusura di Google
• Divide JS in blocchi <25kb ove possibile poiché l'iPhone non memorizza nella cache nulla di più grande di 25kb
• Genera un piccolo file PHP con <script>tag che puoi includere dove appropriato
• Utilizzo: js.sh -u yourname

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

Il primo passo dell'ottimizzazione è la riduzione al minimo dei file. (Consiglio vivamente GULP per la minimizzazione e l'ottimizzazione. La sua semplice soluzione di controllo, installazione e tutti i file sono compressi contemporaneamente. Supporta tutti i CSS, JS, less, sass, ecc ...)

OPPURE Soluzione vecchia scuola:

1) In generale, come processo di ottimizzazione, per ottimizzare le prestazioni di un sito, provare a unire tutti i CSS in un file e comprimere il file utilizzando Compass . In questo modo le tue richieste multiple al CSS statico verranno sostituite con una singola.

2) Problema di più JS che puoi risolvere utilizzando CDN (o Google Hosted Libraries) quindi le richieste vanno ad un altro server non tuo. In questo modo il server non attende il completamento della richiesta precedente prima di inviare la successiva.

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 realizzato per CSS e JS ma può essere utilizzato per PHP e altri linguaggi. Ci sono molti plugin tra cui scegliere realizzati sia per sviluppatori front-end che back-end. In generale "un clic" per eseguire tutti questi comandi (finora multipli). A proposito, le parentesi hanno sostituito il mio costoso Dreamweaver;)

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

Nota: anche senza utilizzare mixaggio SASS o le variabili, il CSS verrà compresso (basta usare semplicemente CSS puro e il comando "watch" di Compass lo comprimerà per te).

Spero che aiuti!

Se stai eseguendo una pre-elaborazione sui file che servi, probabilmente vorrai impostare un sistema di compilazione appropriato (ad esempio un Makefile). In questo modo, hai alcuni file sorgente senza duplicazione e ogni volta che apporti una modifica, esegui "make" e aggiorna tutti i file generati automaticamente. Se esiste già un sistema di compilazione, scopri come funziona e usalo. In caso contrario, dovrai aggiungerne uno.

Quindi, prima, scopri come combinare e minimizzare i tuoi file dalla riga di comando (la documentazione di YUICompressor copre questo). Designare una directory per il materiale generato automaticamente, separato da quello su cui si lavora ma accessibile al server web, e l'output in essa, ad esempio gen / scripts / combined.js. Metti i comandi che hai usato in un Makefile e riesegui "make" ogni volta che hai apportato una modifica e desideri che abbia effetto. Quindi aggiorna le intestazioni in altri file in modo che puntino ai file combinati e minimizzati.

Nel mio progetto symfony faccio qualcosa del genere

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

Quando la versione dev è pronta per la produzione, utilizzo questo script per combinare tutti i file css e sostituire il contenuto 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 è costruito dal famoso compressore YUI

$ npm -g i 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