Como combinar pedidos de vários arquivos javascript em uma solicitação HTTP?

Question

Este conceito é um novo para mim - eu me deparei com ele no YUI dependência configurador . Basicamente, em vez de ter vários pedidos de muitos arquivos, os arquivos são encadeadas em uma solicitação HTTP para reduzir o tempo de carregamento da página.

Alguém sabe como implementar isso em uma pilha LAMP? (Eu vi uma pergunta semelhante foi perguntado já, mas parece ser ASP específico.

Obrigado!

Update: Ambas as respostas são úteis ... (meu representante não é alta o suficiente para comentário ainda assim eu estou adicionando alguns pensamentos de despedida aqui). Eu também veio através de um outro post com exemplos específicos de PHP que possa ser útil. resposta de construção de David, porém, está me fazendo considerar uma abordagem diferente. Obrigado, David!

Answer 1

Existem várias maneiras, os dois mais óbvia seria:

1. Criar uma ferramenta como YUI que constrói um bespoke, versão exclusiva baseada nos componentes que passavam conforme necessário para que você ainda pode servir o arquivo como estático. MooTools e jQuery UI todos fornecem pacotes de construtores como este quando você baixar seu pacote para dar-lhe a possibilidade de biblioteca mais simplificada e effecient. Tenho certeza de que um genérico existe toda ferramenta de uso lá fora.
2. Criar um simples Perl / PHP / Python script / Ruby que serve um monte de arquivos javascript com base na solicitação. Assim, "onerequest.js? Load = ui & load = efeitos" iria a um script PHP que carrega nos arquivos e serve-los com o tipo de conteúdo correto. Há muitos exemplos disso, mas pessoalmente eu não sou um fã.

Eu prefiro não para servir arquivos estáticos através de qualquer tipo de roteiro, mas também gosto de desenvolver meu código com 10 ou menos separadas arquivos de classe pequenas sem o custo de 10 solicitações HTTP. Então eu vim com um processo de compilação personalizada que combina todas as classes mais comuns e funções e depois minifies-los em um único arquivo como project.min.js e tem uma condição em todas as minhas views / modelos que inclui este arquivo em produção.

Edit - O "processo de compilação personalizada" é na verdade um script perl extremamente simples. Lê-se em cada um dos arquivos que eu já passados ??como argumentos e escreve-los para um novo arquivo, opcionalmente passar a coisa toda através de JSMin (disponível em todos os idiomas favoritos) automaticamente.

No comando como ele se parece com:

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

Answer 2

Há um post bom blog sobre este @ http://www.hunlock.com/blogs/Supercharged_Javascript .

Answer 3

O que você quer é Minify . Eu só escreveu um passo a passo para ajuste -lo.

Answer 4

Capistrano é uma bastante popular ferramenta de implantação web baseada em Ruby. Se você está considerando ou já usá-lo, há uma grande jóia que vai descobrir o CSS e JavaScript dependências, merge, e apoucar os arquivos.

gem install juicer

A partir da Juicer GitHub página , pode descobrir quais arquivos dependem uns dos outros e fundi-las , reduzindo o número de solicitações HTTP por exibição de página, melhorando assim o desempenho.