Pular para o conteúdo principal

Compressão de CSS e JavaScript utilizando YuiCompressor e Maven

Olá pessoal, hoje iremos abordar um assunto muito interessante que é a compressão de  recursos estáticos de uma aplicação web.

O que são Recursos Estáticos

Em quase todas as aplicações web sempre há os arquivos estáticos, eles são principalmente HTML, CSS e JavaScript, estes tipos de arquivos não mudam seu estado entre as chamadas ao servidor, ou seja, eles são sempre os mesmo independente do número de requests que sejam feitos ao servidor Web.

Antes de detalhar a compressão dos arquivos estáticos, vamos analisar alguns pontos importantes ao importar e utilizar códigos JavaScript e CSS em nossas páginas:
  • Arquivos CSS externos devem ser importados dentro da tag <head>, assim evitamos o problema de flash effect;
  • Arquivos JavaScript externos devem ser importados antes do fechamento da tag <body>, assim não temos problemas no momento da renderização da tela;
  • Sempre que possível agrupe seus arquivos, para evitar várias solicitações ao servidor.
A Compressão de recursos estáticos

A compressão de recursos estáticos é algo muito importante quando queremos aumentar a performance do nosso site ou sistema web, quando adicionamos uma importação de um arquivo externo, seja ele JavaScript ou CSS, é realizado o download desse arquivo para a máquina cliente, esses downloads, podem fazer com que nossa página tenha problemas de lentidão.

Para realizar a compressão dos arquivos, vamos utilizar a ferramenta YUI Compressor, este é muito útil quando queremos comprimir arquivos estáticos.

O YUI Compressor, pode ser usado via linha de comando java, na página onde setamos o código fonte e é realizado a compressão, ou via Maven no momento do build da aplicação.

Utilizando o YUI Compressor com Maven

Vamos criar um projeto Java EE configurado via Maven, contendo 2 arquivos estáticos que serão comprimidos no momento do build:

Projeto Java EE com arquivos estáticos.

Abaixo, temos o conteúdo do arquivo jquery-1.8.3.js, antes de ser comprimido:

Arquivo JavaScript sem compressão.

Abaixo, temos o conteúdo do arquivo jquery-ui-1.10.3.css, antes de ser comprimido:

Arquivo CSS sem compressão.

Abaixo, temos o conteúdo do arquivo index.jsp:

Arquivo JSP que utiliza os arquivos estáticos.

Para que possamos analisar o resultado e eficacia da compressão, iremos testar a aplicação sem executar o plugin do Maven no processo de build, ao solicitar o arquivo index.jsp no browser temos o seguinte resultado:

Resultado da solicitação sem compressão.

Utilizando as ferramentas de desenvolvimento dos navegadores, conseguimos analisar o tamanho de cada arquivo que é solicitado ao servidor, assim temos como saber a quantidade de Bytes que será trafegada em cada solicitação.

Agora para que ao executar o processo de build (criação do artefato .war), sejam gerados os arquivos estáticos comprimidos, vamos adicionar ao arquivo pom.xml do projeto o plugin do yuicompressor:
<build>
  <plugins>
     <plugin>
         <groupid>org.apache.maven.plugins</groupid>
         <artifactid>maven-war-plugin</artifactid>
         <version>2.0.1</version>
         <configuration>
          <warname>${project.artifactId}</warname>
          <webresources>
             <resource>
             <directory>src/main/webapp</directory>
             </resource>
          </webresources>
         </configuration>
     </plugin>
     <plugin>
         <groupid>net.alchim31.maven</groupid>
         <artifactid>yuicompressor-maven-plugin</artifactid>
         <version>1.4.0</version>
         <executions>
           <execution>
            <phase>package</phase>
             <goals>
               <goal>compress</goal>
             </goals>
           </execution>
         </executions>        
     </plugin>
  </plugins>
</build> 

A estrutura criada após executar o build utilizando o plugin yuicompressor, é a seguinte:
Estrutura do arquivo .war após o build com yuicompressor.

Agora temos o seguinte resultado ao executar o arquivo index.jsp, este foi alterado para utilizar os arquivos comprimidos jquery-ui-1.10.3.min.css e jquery-1.8.3-min.js.

Resultado da solicitação com compressão.

Com este resultado, conseguimos notar a importância de realizar a compressão de arquivos estáticos em aplicativos web, a compressão aliada a outras formas otimizações, podem contribuir para a melhora da performance das aplicações web.

Até a próxima.

Comentários

Postagens mais visitadas do Blog