Agrupe e reduza ativos estáticos no ASP.NET Core

Por Scott Addie e David Pine

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

O que é agregação e minificação

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

A agregação 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). Assim, a agregação 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 de expiração não estiver definido corretamente nos recursos e se a combinação e a minificação não forem usadas, a heurística de atualização do navegador marcará os recursos como obsoletos após alguns dias. Além disso, o navegador requer uma solicitação de validação para cada ativo. Neste caso, a agregação e a minificação proporcionam uma melhoria de desempenho mesmo após o pedido da primeira página.

Agregação

O agrupamento combina vários ficheiros num único. A agregação 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 do tamanho dos ativos solicitados (como CSS, imagens e arquivos JavaScript). Os efeitos comuns da minificação incluem encurtar 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 ao 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 espaços em branco desnecessários, os seguintes nomes de parâmetros e variáveis foram renomeados da seguinte forma:

Impacto da agregação e da minificação

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

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

O aplicativo de teste usado para gerar as figuras na tabela anterior demonstra melhorias típicas que podem não se aplicar a um determinado aplicativo. Recomendamos testar um aplicativo para determinar se a agregação e a minificação geram um tempo de carregamento melhorado.

Escolha uma estratégia de agregação e minificação

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 do fluxo de trabalho para agregação e minificação, bem como linting e otimização de imagem. A agregação e a redução antes da implantação oferecem a vantagem de reduzir a carga do servidor. No entanto, a agregação e a minificação aumentam a complexidade da compilação e só funcionam com ficheiros estáticos.

Agregação e minificação dependentes do ambiente

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

Especifique quais ficheiros incluir nas tuas páginas usando o Environment Tag Helper nas tuas visualizações. O Auxiliar de Marca de Ambiente só renderiza seu conteúdo quando executado em ambientes específicos.

A tag 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 tag a seguir environment renderiza os arquivos CSS agrupados e reduzidos quando executados em um ambiente diferente do Development. Por exemplo, correr dentro de Production ou Staging aciona a renderização dessas folhas de estilo:

<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

• Use vários ambientes
• Ajudantes de tags