MVC Framework - Pacote

Bundling e Minificationsão duas técnicas de melhoria de desempenho que melhoram o tempo de carregamento da solicitação do aplicativo. A maioria dos principais navegadores atuais limita o número de conexões simultâneas por nome de host a seis. Isso significa que, ao mesmo tempo, todas as solicitações adicionais serão enfileiradas pelo navegador.

Habilitar agrupamento e minimização

Para habilitar o empacotamento e a minificação em seu aplicativo MVC, abra o arquivo Web.config dentro de sua solução. Neste arquivo, procure as configurações de compilação em system.web -

<system.web>
   <compilation debug = "true" />
</system.web>

Por padrão, você verá o parâmetro debug definido como true, o que significa que o empacotamento e a minificação estão desabilitados. Defina este parâmetro como falso.

Pacote

Para melhorar o desempenho do aplicativo, a ASP.NET MVC fornece um recurso embutido para agrupar vários arquivos em um único arquivo, o que, por sua vez, melhora o desempenho de carregamento da página devido a menos solicitações HTTP.

O empacotamento é um grupo lógico simples de arquivos que podem ser referenciados por um nome exclusivo e carregados com uma única solicitação HTTP.

Por padrão, o BundleConfig do aplicativo MVC (localizado dentro da pasta App_Start) vem com o seguinte código -

public static void RegisterBundles(BundleCollection bundles) { 
   
   // Following is the sample code to bundle all the css files in the project         
   
   // The code to bundle other javascript files will also be similar to this 
  
   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css",  
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 
}

O código acima basicamente agrupa todos os arquivos CSS presentes na pasta Conteúdo / temas / base em um único arquivo.

Minificação

A minimização é outra técnica de melhoria de desempenho em que otimiza o código javascript, css encurtando os nomes das variáveis, removendo espaços em branco desnecessários, quebras de linha, comentários, etc. Isso, por sua vez, reduz o tamanho do arquivo e ajuda o aplicativo a carregar mais rápido.

Minificação com Visual Studio e extensão Web Essentials

Para usar esta opção, você terá que primeiro instalar a Extensão Web Essentials em seu Visual Studio. Depois disso, quando você clicar com o botão direito em qualquer arquivo css ou javascript, será exibida a opção de criar uma versão reduzida desse arquivo.

Portanto, se você tiver um arquivo css denominado Site.css, ele criará sua versão minimizada como Site.min.css.

Agora, da próxima vez que seu aplicativo for executado no navegador, ele agrupará e reduzirá todos os arquivos css e js, melhorando assim o desempenho do aplicativo.