Come gestire i file JavaScript e CSS in un sito?

Question

Ho avuto alcune riflessioni di recente su come gestire i file JavaScript e CSS condivisi attraverso un'applicazione web.

In un'applicazione Web corrente che sto lavorando su, ho ottenuto un numero piuttosto elevato di differenti JavaScript e file CSS che vengono inseriti in una cartella sul server. Alcuni dei file vengono riutilizzati, mentre altri non lo sono.

In un sito di produzione, è abbastanza stupido per avere un elevato numero di richieste HTTP e molti kilobyte di javascript e css inutile ridondante caricata. La soluzione a questo è, naturalmente, per creare un unico grande file in bundle per pagina che contiene solo le informazioni necessarie, che poi viene ridotto al minimo e inviato compresso (GZIP) al client.

Non c'è nessuna preoccupazione di creare un insieme di file JavaScript e ridurre al minimo manualmente se si stesse andando a fare una volta, ma dal momento che l'applicazione è continuamente mantenuto e le cose cambiano e sviluppare, diventa ben presto un mal di testa per fare questo manualmente mentre si spinge nuovi aggiornamenti che dispone di modifiche a JavaScript e / o file CSS per la produzione.

Che cosa è un buon approccio per gestire questa situazione? Come si fa a gestire questo nella vostra applicazione?

Answer 1

Che cosa si sta parlando si chiama minification .

Ci sono molte librerie e aiutanti per le diverse piattaforme e linguaggi per aiutare con questo. Come non avete postare quello che si sta utilizzando, non posso davvero puntare verso qualcosa di più rilevante per te stesso.

Ecco un progetto su Google Code -. minify

Qui è un esempio di un .NET Http gestore che fa tutto questo in tempo reale.

Answer 2

Ho costruito una biblioteca, Combres , che fa esattamente questo, cioè minify, unire ecc E anche rileva automaticamente le modifiche entrambi JS file locali e remoti / CSS e spingere l'ultima al browser. È gratis e open-source. Controllare questo articolo fuori per un'introduzione a Combres.

Answer 3

ho a che fare con la stessa identica questione su un sito sto lanciando.

Recentemente ho scoperto circa un progetto denominato SquishIt (vedi su GitHub ). E 'costruito per il quadro Asp.net. Se non si utilizza asp.net, è ancora possibile conoscere i principi alla base quello che sta facendo qui.

SquishIt consente di creare denominati "fasci" di file e quindi di rendere tali fasci di file combinati e minified in tutto il sito.

Answer 4

file CSS può essere classificato e suddiviso per parti logiche (come comune, di stampa, contro) e quindi è possibile utilizzare la funzione di importazione di CSS per caricare correttamente i file CSS. Il riutilizzo di questi piccoli file rende inoltre possibile l'uso di caching lato client. Quando si tratta di Javascript, penso che si può risolvere questo problema lato server, più file di script aggiunti alla pagina, è possibile anche generare dinamicamente il lato server di file di script, ma per il client side caching al lavoro, queste parti dovrebbero avere diverso e static indirizzi.

Answer 5

ho scritto un gestore di ASP.NET qualche tempo fa che unisce, impacchi / minifies, gzip, e memorizza nella cache il CSS crudo e file di codice sorgente JavaScript su richiesta. Per portare in tre file CSS, per esempio, sarebbe simile a questa nel codice ...

<link rel="stylesheet" type="text/css"
      href="/getcss.axd?files=main;theme2;contact" />

Il gestore getcss.axd legge nella stringa di query e determina quali file ha bisogno di leggere e Minify (in questo caso, sarebbe cercare i file chiamati main.css, theme2.css, e contact.css). Quando è lettura fatta nel file e la compressione, memorizza la stringa grande minified nella cache lato server (RAM) per alcune ore. Sembra sempre nella cache prima in modo che durante le richieste successive che non ha bisogno di ri-comprimere.

Mi piace questa soluzione perché ...

• Si riduce il numero di richieste il più possibile
• Non è richiesta alcuna operazione aggiuntiva per la distribuzione
• E 'molto facile da mantenere

L'unico lato è che tutto il codice di stile / script finirà per essere memorizzato nella memoria del server. Ma RAM è così a buon mercato al giorno d'oggi che non è così grande di un affare, come ha usato essere.

Inoltre, una cosa vale la pena menzionare, assicurarsi che la stringa di query non è succeptible a qualsiasi manipolazione percorso nocivi (consentire solo A-Z e 0-9).