Agrupar e minificar ativos estáticos no ASP.NET Core

Por Scott Addie e David Pine

Este artigo explica os benefícios de aplicar o agrupamento e a minificação, inclusive como esses recursos podem ser usados com os aplicativos Web do ASP.NET Core.

O que é agrupamento e minificação

Agrupamento e minificação são duas otimizações de desempenho distintas que você pode aplicar em um aplicativo Web. Usados juntos, o agrupamento e a minificação melhoram o desempenho reduzindo o número de solicitações de servidor e reduzindo o tamanho dos ativos estáticos solicitados.

O agrupamento e a minificação melhoram principalmente o tempo de carregamento da solicitação da primeira página. Depois que uma página da Web é solicitada, o navegador armazena em cache os ativos estáticos (JavaScript, CSS e imagens). Portanto, o agrupamento e a minificação não melhoram o desempenho ao solicitar a mesma página, ou páginas, no mesmo site solicitando os mesmos ativos. Se o cabeçalho expirado não estiver definido corretamente nos ativos e o agrupamento e a minificação não forem usados, a heurística de atualização do navegador marcará os ativos como obsoletos após alguns dias. Além disso, o navegador requer uma solicitação de validação para cada ativo. Nesse caso, o agrupamento e a minificação fornecem uma melhoria de desempenho mesmo após a solicitação da primeira página.

Agrupamento

O agrupamento combina vários arquivos em um único arquivo. O agrupamento reduz o número de solicitações de servidor necessárias para renderizar um ativo da Web, como uma página da Web. Você pode criar qualquer número de pacotes individuais especificamente para CSS, JavaScript, etc. Quanto menor for a quantidade de arquivos, menor será a quantidade de solicitações HTTP do navegador para o servidor ou do serviço que fornece seu aplicativo. Isso resulta em um melhor desempenho de carregamento da primeira página.

Minificação

A minificação remove caracteres desnecessários de scripts e arquivos CSS sem alterar a funcionalidade. O resultado é uma redução significativa de tamanho nos ativos solicitados (como CSS, imagens e arquivos JavaScript). Os efeitos colaterais comuns da minificação incluem reduzir nomes de variáveis para um caractere e remover comentários e espaços em branco desnecessários.

Considere a seguinte função JavaScript:

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

A minificação reduz a função para o seguinte:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Além de remover os comentários e os espaços em branco desnecessários, os nomes de parâmetro e variável abaixo foram renomeados da seguinte maneira:

Original	Renamed
imageTagAndImageID	t
imageContext	a
imageElement	r

Impacto do agrupamento e da minificação

A tabela a seguir descreve as diferenças entre carregar ativos individualmente e usar o agrupamento e a minificação para um aplicativo Web típico.

Ação	Sem B/M	Com B/M	Redução
Solicitações de arquivo	18	7	61%
Bytes transferidos (KB)	265	156	41%
Tempo de carregamento (ms)	2360	885	63%

O tempo de carregamento melhorou, mas este exemplo foi executado localmente. Maiores ganhos de desempenho são obtidos ao usar o agrupamento e a minificação com ativos transferidos para uma rede.

O aplicativo de teste usado para gerar os números na tabela anterior demonstra melhorias típicas que podem não se aplicar a um determinado aplicativo. É recomendável testar um aplicativo para determinar se o agrupamento e a minificação geram um tempo de carga aprimorado.

Escolher uma estratégia de agrupamento e minificação

O ASP.NET Core é compatível com o WebOptimizer, uma solução de agrupamento e minificação de software livre. Para obter instruções de configuração e projetos de exemplo, confira o WebOptimizer. O ASP.NET Core não fornece uma solução nativa de agrupamento e minificação.

Ferramentas de terceiros, como o Gulp e o Webpack, fornecem automação de fluxo de trabalho para agrupamento e minificação, bem como lint e otimização de imagem. Usando o agrupamento e a minificação, os arquivos minificados são criados antes da implantação do aplicativo. Agrupar e minificar antes da implantação fornece a vantagem da redução da carga do servidor. No entanto, é importante reconhecer que o agrupamento e a minificação aumentam a complexidade da compilação e só funcionam com arquivos estáticos.

Agrupamento e minificação baseados em ambiente

Como melhor prática, os arquivos agrupados e minificados do aplicativo devem ser usados em um ambiente de produção. Durante o desenvolvimento, os arquivos originais facilitam a depuração do aplicativo.

Especifique quais arquivos incluir em suas páginas usando o Auxiliar de Marca de Ambiente em seus modos de exibição. O Auxiliar de Marca de Ambiente só renderiza seu conteúdo ao ser executado em ambientes específicos.

A marca environment a seguir renderiza os arquivos CSS não processados durante a execução no ambiente de Development:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

A marca environment a seguir renderiza os arquivos CSS agrupados e minificados ao executar em um ambiente diferente de Development. Por exemplo, executar em Production ou Staging dispara a renderização dessas folhas de estilos:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Recursos adicionais

• Usar vários ambientes
• Auxiliares de Marcas