Performance em Aplicações ASP.NET (Parte 2): Minimizando arquivos Javascript e CSS com YUI Compressor

parte 1: https://fpimentel88.wordpress.com/2009/01/20/analisando-e-melhorando-a-performance-em-aplicaes-aspnet-parte-1/

1. Introdução

Cada espaço em branco, cada caractere, cada quebra de linha de um arquivo Javascript e CSS ocupam espaços. Ou seja, quanto mais caracteres deste tipo seus arquivos tiverem, maiores serão seus tamanhos. Ou seja, a seguinte função…

   1: function yuiCompressor(){
   2:
   3:
   4:
   5:     var el = document.getElementById("idPessoa");
   6:
   7:
   8:
   9:     alert(el.id);
  10:
  11:
  12:
  13: }

…Ocupa mais espaço que esta outra:

   1: function yuiCompressor(){var el = document.getElementById("idPessoa");alert(el.id);}

Mais vocês concordam comigo que é inviável programar da segunda maneira, certo? Pois é, por isso que existe o YUI Compressor e tantos outros compressores de arquivos Javascript e CSS. Eles existem justamente para minimizar esses tipos de arquivos, tirando todo tipo de caractere desnecessário.

Então a idéia é bem simples. Trabalhamos normalmente com os arquivos, “sem” se preocupar com espaços e quebras de linhas. E antes de publicar o site, utilizarmos o YUI Compressor para minimizar os devidos arquivos.

2. Minimizando os Arquivos

Existem duas maneiras de utilizar o YUI Compressor:

  1. Através do próprio site (http://www.refresh-sf.com/yui/)onde você informará a entrada e o sistema dará a saída. Tudo isso on-line.
  2. A segunda maneira é através da linha de comando (É necessário ter JAVA instalado na máquina).

No nosso caso vamos minimizar os arquivos via linha de comando, pois em futuro um post irei mostrar como integrar o YUI Compressor com o Cruiser Control.

Para minimizar o nosso arquivo, vamos seguir os seguintes passos:

  1. Baixe o YUI Compressor no seguinte link: http://www.julienlecomte.net/yuicompressor/
  2. Crie um arquivo javascript (.js) e um css (.css) e salve em qualquer local na sua máquina (no meu caso:  “C:\Files\JS1.js e C:\Files\CSS1.css”).Os arquivos devem conter qualquer conteúdo. É apenas um teste.
  3. Abra o prompt command e vá para o diretório onde se encontra a pasta build dentro de YUI Compressor.ScreenShot001
  4. Agora execute o seguinte comando para gerar uma saída de acordo com o arquivo de entrada.“java -jar yuicompressor-x.y.z.jar C:\Files\JS1.js -o C:\Files\JS1-min.js”

    ScreenShot002

  5. Pronto!!! Agora já temos nosso arquivo .js minimizado. Simples né? Agora, é só repetir a operação para os arquivos .css e .js que você tiver.

Abraço a todos!

Utilizando Css para alterar layout de páginas impressas

Você já precisou disponibilizar para o usuário a opção de imprimir alguma página? Mas queria que ele visse à página de um modo no browser e quando imprimisse, saisse de outro? Por exemplo, ele visse a tela toda enfeitada, toda colorida, etc. Mas quando fosse imprimir saisse tudo preto e branco.

Pois é, tive essa necessidade esses dias. E foi bastante simples de resolver.

A primeira coisa que tive que pesquisar foi como imprimir uma página em javascript. Isso foi o mais simples. Você pode fazer isto com o seguinte trecho de código:

window.print();

Só falta saber como mudar o estilo da página de acordo com o modo. Com CSS você consegue fazer isto de modo fácil e prático.

A tag HTML ‘<link>’, possui um atributo “media” que informa básicamente quando um arquivo CSS vai ser importados para aquela página dependendo do modo da página (default, impressão, etc). Por exemplo, você pode atribuir o valor “print” à propriedade  “media”, e isto quer dizer que na hora da impressão o css utilizado vai ser aquele arquivo ‘x’.

No meu caso precisei utilizar o seguinte trecho de código para resolver o meu problema:

<link media=”screen” href=”../../App_Themes/Impressao/Screen.css” rel=”stylesheet”
type=”text/css” />
<link media=”print” href=”../../App_Themes/Impressao/Impressao.css” rel=”stylesheet”
type=”text/css” />

Esse código informa básicamente que quando o usuário estiver visualizando a página no browser, ele irá utilizar o CSS “Screen.css”.  Mas quando a página for impressa, o css utilizado é “Impressao.css”.

Bem, este post foi bem curto, até porque estou em horário de almoço.

Abraços.