Artigos .NET Otimizando a carga com ASP.NET MVC Bundling e Minification - Revista .net Magazine 104
Artigo do tipo Exemplos Práticos
Recursos especiais neste artigo:
Conteúdo sobre boas práticas.
ASP.NET MVC Bundling
Bundling e minification são duas técnicas utilizadas para otimizar a carga de páginas web. O recurso de Bundling permite unificarmos diversos arquivos em um só enquanto que o minification permite reduzir o tamanho destes arquivos. Neste artigo nós veremos os principais conceitos acerca da carga de arquivos CSS e JavsScript em aplicações WEB e mostraremos como otimizar esta carga utilizando os recursos de bundling e minification nativos do ASP.NET.


Em que situação o tema é útil
Este tema é útil a todo projeto web que faça uso de arquivos CSS e JavaScript possibilitando que estes projetos tenham o tempo de primeira carga de página otimizados através dos recursos de bundling e minification.

Uma das principais características das aplicações WEB é a necessidade de download de recursos como arquivos CSS e JavaScript. Este download representa boa parte do tempo de carga de uma página web, com isso, otimizações neste processo fazem com que o usuário tenha uma melhor percepção de velocidade da aplicação. É neste ponto que entram os recursos de Bundling e Minification do ASP.NET 4.

Além disso, uma das características dos browsers atuais é a limitação no pipeline de requisições para um mesmo host, quando a maioria dos browsers só executam no máximo seis requisições paralelas. Diante disso, se temos um cenário com cinco arquivos JavaScript e cinco arquivos CSS, os dez arquivos não serão baixados simultaneamente. Será iniciado o download dos seis primeiros e o sétimo ficará aguardando até que um dos anteriores seja concluído, e assim sucessivamente. Isso torna a carga da aplicação mais lenta e, dependendo do JavaScript ou CSS em questão, a percepção do usuário pode ser ainda pior. Além disso, para cada um destes arquivos teremos uma viagem ao servidor para download do mesmo, impactanto na latência da rede dez vezes, uma para cada arquivo.

As técnicas de bundling e minification existem para nos ajudar a otimizar estes dois aspectos de nossas aplicações WEB. O bundling nos permite unificar diversos arquivos em um só, reduzindo o impacto da limitação do pipeline dos browsers e o impacto da latência da rede em nossa aplicação, visto que teríamos que ir ao servidor em um número reduzido de vezes. O minification por sua vez permite que os arquivos CSS e JavaScript tenham seu tamanho reduzido através de algoritmos de otimização que reduzem expressões e removem caracteres desnecessários como comentários e espaços em branco. Como exemplo, normalmente quando baixamos uma biblioteca JavaScript na internet temos duas opções de download. Uma com o arquivo original e outra com o nome [biblioteca].min.js, sendo que esta representa uma versão minificada da biblioteca.

Compreendendo o problema

Para que possamos compreender os benefícios das técnicas de budling e minification, vamos criar um cenário de simulação. Este cenário consiste em uma página web simples, somente com um Hello Word, porém com diversos arquivos CSS e JavaScript. Estes arquivos terão conteúdos aleatórios, apenas para que possamos compreender os benefícios das técnicas em questão. Na Listagem 1 temos parte do arquivo JavaScript de teste, que conterá este código apenas para simular um arquivo de JavaScript tradicional.

...
Quer ler esse conteúdo completo? Tenha acesso completo