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

Por Scott Addie e David Pine

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

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 primeira solicitação de 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 expirar não estiver definido corretamente nos ativos e se o agrupamento e a minificação não forem usados, a heurística de atualização do navegador marcará os ativos 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 primeira solicitação de 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. Menos arquivos significam menos 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 do código 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ço em branco desnecessário.

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 o espaço em branco desnecessário, os seguintes nomes de parâmetro e variável foram renomeados da seguinte maneira:

Original Renomeado
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 realizados ao usar o agrupamento e a minificação com ativos transferidos por 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. Recomendamos 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

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

Ferramentas de terceiros, como Gulp e Webpack, fornecem automação de fluxo de trabalho para agrupamento e minificação, bem como linting 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 carga reduzida do servidor. No entanto, é importante reconhecer que o agrupamento e a minificação aumentam a complexidade do build e só funcionam com arquivos estáticos.

Agrupamento e minificação baseados em ambiente

Como prática recomendada, os arquivos empacotados 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 executar em ambientes específicos.

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

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
    <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>

A marca a seguir environment renderiza os arquivos CSS empacotados e minificados ao executar em um ambiente diferente de Development. Por exemplo, executar ou ProductionStaging disparar 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>
<environment names="Staging,Production">
    <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