Técnicas de Bundling em ASP.NET

Quando falamos em otimização de websites, precisamos atentar para cada detalhe que possa diminuir processamento ou tráfego. Uma técnica que vou demonstrar agora é a “Bundling”, que nada mais é que um agrupamento de arquivos. Estes agrupamentos trazem uma série de vantagens na economia de bytes trafegados, além de fornecer uma maneira bastante eficiente de organização do projeto.

Vejamos uma lista de arquivos javacript que usamos num projeto web qualquer. É relativamente uma lista bastante pequena, mas podemos ter projetos com listas muito maiores. O problema é que sempre que há uma requisição de um arquivo, além dos bytes trafegados em função do tamanho do próprio arquivo, há ainda alguns bytes de cabeçalhos da requisição de arquivo.

A maneira mais comum de inserir estes arquivos numa página é fazendo adições de tags scripts desta forma:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="/js/easyTooltip.js"></script> 
<script type="text/javascript" src="/js/jquery-ui-1.8.5.custom.min.js"></script> 
<script type="text/javascript" src="/js/jquery.ui.datepicker-pt-BR.js"></script> 
<script type="text/javascript" src="/js/jquery.wysiwyg.js"></script> 
<script type="text/javascript" src="/js/hoverIntent.js"></script> 
<script type="text/javascript" src="/js/superfish.js"></script> 
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script> 
<script type="text/javascript" src="/js/searchbox.js"></script> 
<script type="text/javascript" src="/js/custom.js"></script>

Quando analisamos as requisições da página podemos ver que cada arquivo é baixado numa requisição diferente.

Para começarmos vamos precisar usar um pacote “System.Web.Optimization”. A maneira mais simples de adicioná-la ao seu projeto é usando o Nuget. Abra o console do Nuget dentro do seu Visual Studio e execute o seguinte comando:

PM > Install-Package Microsoft.AspNet.Web.Optimization

Feito isso, todas as referências necessárias serão automaticamente adicionadas ao seu projeto e já estaremos prontos para começar.

O primeiro passo é criar um arquivo de configuração dos “bundles”. Normalmente chamamos este arquivo de configuração de “BundleConfig.cs“.

using System.Web.Optimization;

public class BundleConfig
{
	public static void RegisterBundles(BundleCollection bundles)
	{

		bundles.Add(new ScriptBundle("~/bundles/jqueryplugins").Include(
					"~/js/easyTooltip.js",
					"~/js/hoverIntent.js",
					"~/js/superfish.js",
					"~/js/searchbox.js",
					"~/js/custom.js"));

		bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
					"~/js/jquery-1.4.2.min.js",
					"~/js/jquery-ui-1.8.5.custom.min.js",
					"~/js/jquery.ui.datepicker-pt-BR.js"));

		BundleTable.EnableOptimizations = true;

	}
}

Depois precisamos registrar isso no Application_Start() do arquivo global.asax.cs.

using System.Web.Optimization;

protected void Application_Start() {

     BundleConfig.RegisterBundles(BundleTable.Bundles);

}

Uma vez feito isso, estamos prontos para utilizar nossos “bundles” em nosso projeto. Portanto, vamos trocar aquelas tags <script> pelo render dos bundles que criamos.

IMPORTANTE!

Repare que quando criamos os “bundles” no arquivo “BundleConfig”, nós criamos dois grupos. Cada um deles com um endereço virtual “fictício”. E através deste endereço que requisitamos os arquivos da lista.

<%:Scripts.Render("~/bundles/jquery")%>
<%:Scripts.Render("~/bundles/jqueryplugins")%>

Quando trocamos aquelas tags <script> por estas chamadas, o ASP.Net se encarrega de compilar todos os arquivos da lista e adicionar uma única requisição contendo todos eles. Dessa forma, há uma grande economia de tráfego e consequentemente melhora de performance do seu website. Veja a imagem abaixo.