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 deste blog

Utilizando LocalDate, LocalDateTime e LocalTime na Prática

Tudo bem pessoal, hoje iremos avaliar e analisar operações de manipulação de Datas envolvendo a JavaTime API introduzida no Java 8.

Exemplos da java.time API
Já se passaram alguns anos desde o lançamento do Java 8 e mesmo após este período, há empresas que desconhecem o poder da java.time API, esta foi uma nova API de datas introduzida no Java 8 visando resolver problemas que tínhamos com as velhas classes Date e Calendar.

Vamos mostrar vários exemplos práticos do uso da API:
Criação de objetos No exemplo abaixo, estamos criando os objetos para manipulação de datas, perceba que temos 3 tipos, sendo LocalDate para manipular datas, LocalDateTime para manipular data/hora e LocalTime para horas:
LocalDate localDate = LocalDate.now(); LocalDateTime localDateTime = LocalDateTime.now(); LocalTime localTime = LocalTime.now();
Utilizando formatação Aqui realizamos a operação de formatação, perceba que não foi necessário utilizar a classe SimpleDateFormat, que usaríamos em conjunto com D…

Lendo e Manipulando arquivos CSV com Java

Olá hoje veremos como realizar a leitura e manipulação de arquivos CSV com Java, mostrando que as novas versões da plataforma Java deixaram algumas tarefas simples de serem realizadas.

Exemplo de Arquivo Hoje em dia é comum ao realizar integrações ou carga de dados o uso de arquivos CSV, isto porque, este arquivo possui uma estrutura de fácil entendimento e simples de manipular na maioria das plataformas de desenvolvimento.

Para realizar a leitura dos dados vamos manipular um arquivo com as seguintes colunas: namecpfagephone address:

name;cpf;age;phone;address caio;123456789;20;1145223643;AvenidaPaulista vinicius;147852369;18;1125253625;AvenidaManoel sandra;963258741;30;1174587858;RuaTeixeira regina;125478522;40;1145254536;RuaFernando fernando;785245563;42;1145253669;RuaPereira augusto;456123014;50;1125363633;AvenidaPaulinia maria;456123789;10;1125455525;AvenidaNossaSenhora
Para representar os dados em objetos Java iremos utilizar a seguinte classe:

importlombok.AllArgsConstruc…

Versionamento de Banco Dados com Flyway

Olá pessoal, hoje iremos analisar e aprender como realizar o versionamento e gerenciamento das bases de dados relacionais utilizando o framework Flyway.

Versionamento de Banco Dados Ao trabalhar com desenvolvimento de sistemas é comum realizarmos o versionamento, isso porque uma aplicação pode necessitar de correções, novas funcionalidades e evoluções, onde para garantir a compatibilidade e cuidar do seu ciclo de vida, geramos versões onde é especificado quais itens estão presentes em cada release.
Vamos imaginar seguinte cenário: Sistema ERP1.0.0: Entrega dos módulos Financeiro e RH;1.1.0: Entrega do módulo Contas a Receber. Perceba que a ideia é controlar o que cada versão possui de diferente, e para controlar essas mudanças no lado da aplicação existem várias técnicas e ferramentas, mas e para controlar as mudanças no lado do Banco de dados ? 
Para isso podemos utilizar ferramentas de versionamento que ajudam a realizar este controle, a ferramenta que iremos utilizar é o Flyway.
Con…