Come combinare le richieste per più file javascript in una richiesta http?

Question

Questo concetto è nuovo per me - l'ho trovato per la prima volta in Configuratore di dipendenze YUI . Fondamentalmente, invece di avere più richieste per molti file, i file sono concatenati in una richiesta http per ridurre il tempo di caricamento della pagina.

Qualcuno sa come implementarlo su uno stack LAMP? (Ho già visto una domanda simile, ma sembra essere ASP specifica.

Grazie!

Aggiornamento: entrambe le risposte sono utili ... (il mio rappresentante non è abbastanza alto per commentare ancora, quindi sto aggiungendo alcuni pensieri di separazione qui). Sono anche arrivato in un altro post di blog con esempi specifici di PHP che potrebbero essere utili. La risposta costruttiva di David, però, mi sta facendo considerare un approccio diverso. Grazie, David!

Answer 1

Esistono vari modi, i due più ovvi sarebbero:

1. Costruisci uno strumento come YUI che crea una versione unica e personalizzata basata sui componenti che hai spuntato come richiesto in modo da poter continuare a servire il file come statico. MooTools e l'interfaccia utente jQuery forniscono tutti i programmi per la creazione di pacchetti come questo quando scarichi il loro pacchetto per offrirti la libreria più snella ed efficiente possibile. Sono sicuro che esiste uno strumento generico per tutti gli usi.
2. Crea un semplice script Perl / PHP / Python / Ruby che serve un mucchio di file JavaScript in base alla richiesta. Quindi " onerequest.js? Load = ui & amp; load = effects " andrebbe a uno script PHP che carica i file e li serve con il tipo di contenuto corretto. Ci sono molti esempi di questo, ma personalmente non sono un fan.

Preferisco non servire i file statici attraverso alcun tipo di script, ma mi piace anche sviluppare il mio codice con 10 o più file separati di piccola classe senza il costo di 10 richieste HTTP. Quindi ho ideato un processo di compilazione personalizzato che combina tutte le classi e le funzioni più comuni e quindi le minimizza in un singolo file come project.min.js e ho una condizione in tutte le mie viste / modelli che include questo file in produzione.

Modifica: il processo di compilazione personalizzato " è in realtà uno script perl estremamente semplice. Legge in ciascuno dei file che ho passato come argomenti e li scrive in un nuovo file, opzionalmente passando l'intera cosa attraverso JSMIN (disponibile in tutte le tue lingue preferite) automaticamente.

Al comando come sembra:

perl build-project-master.pl core.js class1.js etc.js /path/to/live/js/file.js

Answer 2

C'è un buon post sul blog su questo @ http://www.hunlock.com/blogs/Supercharged_Javascript .

Answer 3

Quello che vuoi è Minify . Ho appena scritto un walkthrough per l'impostazione su.

Answer 4

Capistrano è uno strumento di distribuzione Web basato su Ruby abbastanza popolare. Se lo stai prendendo in considerazione o lo stai già utilizzando, c'è un grande gioiello che riuscirà a capire le dipendenze CSS e Javascript, unire e minimizzare i file.

spremiagrumi gem install

Dalla pagina Juicer GitHub , può capire quali file dipendono l'uno dall'altro e unirli insieme , riducendo il numero di richieste http per visualizzazione di pagina, migliorando così le prestazioni.