Novo Suporte para Combinação e Minificação de Arquivos JavaScript e CSS (Série de posts sobre a ASP.NET 4.5)
- by Leniel Macaferi
Este é o sexto post de uma série de posts que estou escrevendo sobre a ASP.NET 4.5.
Os
próximos lançamentos do .NET e Visual Studio incluem vários novos e
ótimos recursos e capacidades. Com a ASP.NET 4.5 você vai ver um monte
de melhorias realmente emocionantes em formulários da Web ( Web Forms )
e MVC - assim como no núcleo da base de código da ASP.NET, no qual
estas tecnologias são baseadas.
O post de hoje cobre um pouco do
trabalho que estamos realizando para adicionar suporte nativo para combinação e minificação de arquivos JavaScript e CSS dentro da ASP.NET - o que torna mais fácil
melhorar o desempenho das aplicações. Este recurso pode ser utilizado
por todas as aplicações ASP.NET, incluindo tanto a ASP.NET MVC quanto a
ASP.NET Web Forms.
Noções básicas sobre Combinação e Minificação
Como
mais e mais pessoas usando dispositivos móveis para navegar na web,
está se tornando cada vez mais importante que os websites e aplicações
que construímos tenham um bom desempenho neles. Todos nós já tentamos
carregar sites em nossos smartphones - apenas para, eventualmente,
desistirmos em meio à frustração porque os mesmos são carregados lentamente
através da lenta rede celular. Se o seu site/aplicação carrega
lentamente assim, você está provavelmente perdendo clientes em potencial
por causa do mau desempenho/performance. Mesmo com máquinas desktop poderosas, o
tempo de carregamento do seu site e o desempenho percebido podem
contribuir enormemente para a percepção do cliente.
A maioria dos
websites hoje em dia são construídos com múltiplos arquivos de
JavaScript e CSS para separar o código e para manter a base de código
coesa. Embora esta seja uma boa prática do ponto de vista de
codificação, muitas vezes isso leva a algumas consequências negativas no
tocante ao desempenho geral do site. Vários arquivos de JavaScript e
CSS requerem múltiplas solicitações HTTP provenientes do navegador - o
que pode retardar o tempo de carregamento do site.
Exemplo Simples
A
seguir eu abri um site local no IE9 e gravei o tráfego da rede usando
as ferramentas do desenvolvedor nativas do IE (IE Developer Tools) que
podem ser acessadas com a tecla F12. Como mostrado abaixo, o site é
composto por 5 arquivos CSS e 4 arquivos JavaScript, os quais o
navegador tem que fazer o download. Cada arquivo é solicitado
separadamente pelo navegador e retornado pelo servidor, e o processo
pode levar uma quantidade significativa de tempo proporcional ao número
de arquivos em questão.
Combinação
A
ASP.NET está adicionando um recurso que facilita a "união" ou
"combinação" de múltiplos arquivos CSS e JavaScript em menos
solicitações HTTP. Isso faz com que o navegador solicite muito menos
arquivos, o que por sua vez reduz o tempo que o mesmo leva para
buscá-los. A seguir está uma versão atualizada do exemplo mostrado
acima, que tira vantagem desta nova funcionalidade de combinação de
arquivos (fazendo apenas um pedido para JavaScript e um pedido para
CSS):
O
navegador agora tem que enviar menos solicitações ao servidor. O
conteúdo dos arquivos individuais foram combinados/unidos na mesma
resposta, mas o conteúdo dos arquivos permanece o mesmo - por isso o
tamanho do arquivo geral é exatamente o mesmo de antes da combinação (somando o tamanho dos arquivos separados). Mas note como mesmo em uma máquina de desenvolvimento local (onde a
latência da rede entre o navegador e o servidor é mínima), o ato de
combinar os arquivos CSS e JavaScript ainda consegue reduzir o tempo de
carregamento total da página em quase 20%. Em uma rede lenta a melhora
de desempenho seria ainda maior.
Minificação
A
próxima versão da ASP.NET também está adicionando uma nova
funcionalidade que facilita reduzir ou "minificar" o tamanho do
download do conteúdo. Este é um processo que remove espaços em branco,
comentários e outros caracteres desnecessários dos arquivos CSS e
JavaScript. O resultado é arquivos menores, que serão enviados e
carregados no navegador muito mais rapidamente. O gráfico a seguir
mostra o ganho de desempenho que estamos tendo quando os processos de combinação e
minificação dos arquivos são usados ??em conjunto:
Mesmo
no meu computador de desenvolvimento local (onde a latência da rede é
mínima), agora temos uma melhoria de desempenho de 40% a partir de onde
originalmente começamos. Em redes lentas (e especialmente com clientes
internacionais), os ganhos seriam ainda mais significativos.
Usando Combinação e Minificação de Arquivos dentro da ASP.NET
A
próxima versão da ASP.NET torna realmente fácil tirar proveito da
combinação e minificação de arquivos dentro de projetos, possibilitando
ganhos de desempenho como os que foram mostrados nos cenários acima. A
forma como ela faz isso, te permite evitar a execução de ferramentas
personalizadas/customizadas, como parte do seu processo de construção da
aplicação/website - ao invés disso, a ASP.NET adicionou suporte no tempo
de execução/runtime para que você possa executar a
combinação/minificação dos arquivos dinamicamente (cacheando os
resultados para ter certeza de que a performance seja realmente
satisfatória). Isto permite uma experiência de desenvolvimento
realmente limpa e torna super fácil começar a tirar proveito destas
novas funcionalidades.
Vamos supor que temos um projeto simples com 4 arquivos JavaScript e 6 arquivos CSS:
Combinando e Minificando os Arquivos CSS
Digamos
que você queira referenciar em uma página todas as folhas de estilo que
estão dentro da pasta "Styles" mostrada acima. Hoje você tem que
adicionar múltiplas referências para os arquivos CSS para obter todos
eles - o que se traduziria em seis requisições HTTP separadas:
O
novo recurso de combinação/minificação agora permite que você combine e
minifique todos os arquivos CSS da pasta Styles - simplesmente enviando
uma solicitação de URL para a pasta (neste caso, "styles"), com um
caminho adicional "/css" na URL. Por exemplo:
Isso
fará com que a ASP.NET verifique o diretório, combine e minifique os
arquivos CSS que estiverem dentro da pasta, e envie uma única resposta
HTTP para o navegador com todo o conteúdo CSS.
Você não precisa
executar nenhuma ferramenta ou pré-processamento para obter esse
comportamento. Isso te permite separar de maneira limpa seus estilos em
arquivos CSS separados e condizentes com cada funcionalidade da
aplicação mantendo uma experiência de desenvolvimento extremamente limpa
- e mesmo assim você não terá um impacto negativo de desempenho no
tempo de execução da aplicação. O designer do Visual Studio também vai
honrar a lógica de combinação/minificação - assim você ainda terá uma
experiência WYSWIYG no designer dentro VS.
Combinando e Minificando os Arquivos JavaScript
Como
a abordagem CSS mostrada acima, se quiséssemos combinar e minificar
todos os nossos arquivos de JavaScript em uma única resposta, poderíamos
enviar um pedido de URL para a pasta (neste caso, "scripts"), com um
caminho adicional "/js":
Isso
fará com que a ASP.NET verifique o diretório, combine e minifique
os arquivos com extensão .js dentro dele, e envie uma única resposta
HTTP para o navegador com todo o conteúdo JavaScript. Mais uma vez -
nenhuma ferramenta customizada ou etapas de construção foi necessária
para obtermos esse comportamento. Este processo funciona em todos os navegadores.
Ordenação dos Arquivos dentro de um Pacote
Por
padrão, quando os arquivos são combinados pela ASP.NET, eles são
ordenados em ordem alfabética primeiramente, exatamente como eles são
mostrados no Solution Explorer. Em seguida, eles são automaticamente
reorganizados de modo que as bibliotecas conhecidas e suas extensões
personalizadas, tais como jQuery, MooTools e Dojo sejam carregadas antes
de qualquer outra coisa. Assim, a ordem padrão para a combinação dos
arquivos da pasta Scripts, como a mostrada acima será:
jquery-1.6.2.js
jquery-ui.js
jquery.tools.js
a.js
Por padrão, os arquivos CSS também são classificados em ordem alfabética e depois são reorganizados de forma que o arquivo reset.css e normalize.css
(se eles estiverem presentes na pasta) venham sempre antes de qualquer
outro arquivo. Assim, o padrão de classificação da combinação dos
arquivos da pasta "Styles", como a mostrada acima será:
reset.css
content.css
forms.css
globals.css
menu.css
styles.css
A
ordenação/classificação é totalmente personalizável, e pode ser
facilmente alterada para acomodar a maioria dos casos e qualquer padrão
de nomenclatura que você prefira. O objetivo com a experiência pronta
para uso, porém, é ter padrões inteligentes que você pode simplesmente
usar e ter sucesso com os mesmos.
Qualquer número de Diretórios/Subdiretórios é Suportado
No
exemplo acima, nós tivemos apenas uma única pasta "Scripts" e "Styles"
em nossa aplicação. Isso funciona para alguns tipos de aplicação (por
exemplo, aplicações com páginas simples). Muitas vezes, porém, você vai
querer ter múltiplos pacotes/combinações de arquivos CSS/JS dentro de
sua aplicação - por exemplo: um pacote "comum", que tem o núcleo dos
arquivos JS e CSS que todas as páginas usam, e então arquivos
específicos para páginas ou seções que não são utilizados globalmente.
Você
pode usar o suporte à combinação/minificação em qualquer número de
diretórios ou subdiretórios em seu projeto - isto torna mais fácil
estruturar seu código de forma a maximizar os benefícios da
combinação/minificação dos arquivos. Cada diretório por padrão pode ser
acessado como um pacote separado e endereçável através de uma URL.
Extensibilidade para Combinação/Minificação de Arquivos
O
suporte da ASP.NET para combinar e minificar é construído com
extensibilidade em mente e cada parte do processo pode ser estendido ou
substituído.
Regras Personalizadas
Além
de permitir a abordagem de empacotamento - baseada em diretórios - que
vem pronta para ser usada, a ASP.NET também suporta a capacidade de
registrar pacotes/combinações personalizadas usando uma nova API de
programação que estamos expondo.
O código a seguir demonstra
como você pode registrar um "customscript" (script personalizável)
usando código dentro da classe Global.asax de uma aplicação. A API
permite que você adicione/remova/filtre os arquivos que farão parte do
pacote de maneira muito granular:
O
pacote personalizado acima pode ser referenciado em qualquer lugar
dentro da aplicação usando a referência de <script> mostrada a
seguir:
Processamento Personalizado
Você
também pode substituir os pacotes padrão CSS e JavaScript para suportar
seu próprio processamento personalizado dos arquivos do pacote (por
exemplo: regras personalizadas para minificação, suporte para Saas, LESS
ou sintaxe CoffeeScript, etc).
No exemplo mostrado a seguir,
estamos indicando que queremos substituir as transformações nativas de
minificação com classes MyJsTransform e MyCssTransform personalizadas.
Elas são subclasses dos respectivos minificadores padrão para CSS e
JavaScript, e podem adicionar funcionalidades extras:
O
resultado final desta extensibilidade é que você pode se plugar dentro
da lógica de combinação/minificação em um nível profundo e fazer algumas
coisas muito legais com este recurso.
Vídeo de 2 Minutos sobre Combinação e Minificacão de Arquivos em Ação
Mads Kristensen tem um ótimo vídeo de 90 segundo (em Inglês) que demonstra a utilização do recurso de Combinação e Minificação de Arquivos. Você pode assistir o vídeo de 90 segundos aqui.
Sumário
O
novo suporte para combinação e minificação de arquivos CSS e JavaScript dentro da próxima versão da
ASP.NET tornará mais fácil a construção de aplicações web
performáticas. Este recurso é realmente fácil de usar e não requer
grandes mudanças no seu fluxo de trabalho de desenvolvimento existente. Ele também suporta uma rica API de extensibilidade que permite a você
personalizar a lógica da maneira que você achar melhor.
Você pode facilmente tirar vantagem deste novo suporte dentro de aplicações baseadas em ASP.NET MVC e ASP.NET Web Forms.
Espero que ajude,
Scott
P.S. Além do blog, eu uso o Twitter para disponibilizar posts rápidos e para compartilhar links.Lidar com o meu Twitter é: @scottgu
Texto traduzido do post original por
Leniel Macaferi.
google_ad_client = "pub-8849057428395760";
/* 728x90, created 2/15/09 */
google_ad_slot = "4706719075";
google_ad_width = 728;
google_ad_height = 90;
