Minificação de Javascript com Ant Task

{ December 16th, 2008 }

Autor: cmilfont

Em um post passado eu falei da importância de unir e minificar arquivos js em determinados casos e discuti “quando” fazer isso, vou mostrar “como” minificar usando o YUI Compressor com tasks do Apache Ant montados por Viktor Lieskovsky do Javaflight.

Esse pequeno tutorial-guia faz parte do material dos meus cursos de Javascript e Ajax e serve para deixar um histórico acessível aos alunos e fácil para leitores que por ventura precisem.

Preparei um ambiente de execução com todas as dependências no projeto Remendux onde vocês podem fazer checkout e rodar o build ant localmente como um projeto do eclipse – estou usando o plugin para o SVN Subclipse.

Montei um script ant padrão bem simples de ser entendido por iniciantes:

<?xml version="1.0" encoding="UTF-8"?>
<project name="jsmin" default="main" basedir=".">
	<!-- Propriedades para definir nomes de pastas que usaremos -->
	<property name="js" value="js"/>
	<property name="build" value="build"/>
	<property name="lib" value="lib"/>
	<property name="output" value="output"/>
	<!-- Propriedades para definir nomes os arquivos necessários -->
	<property name="yui-compressor.jar"
		location="${lib}/yuicompressor-2.4.2.jar" />
	<property name="yui-compressor-ant-task.jar" 
		location="${lib}/yui-compressor-ant-task-0.3.jar" />
	<!-- Incluir as libs necessárias no classpath -->
	<path id="task.classpath">
		<pathelement location="${yui-compressor.jar}" />
		<pathelement location="${yui-compressor-ant-task.jar}" />
	</path>
	<!-- Definição da task para o Ant reconhecer -->
	<taskdef name="yui-compressor" 
classname="net.noha.tools.ant.yuicompressor.tasks.YuiCompressorTask">
	<classpath refid="task.classpath"/>
	</taskdef>
 
	<target name="clean">
		<delete dir="build"/>
		<delete dir="output"/>
		<mkdir dir="build"/>
		<mkdir dir="output"/>
	</target>
 
	<target name="main" depends="clean">
		<!-- Tag do Ant para concatenar arquivos 
		[ http://ant.apache.org/manual/CoreTasks/concat.html] 
		os arquivos são unidos na sequência de definição 
		no fileset
		-->
		<concat destfile="${output}/remendux.js" force="no">
			<fileset file="${js}/util.js" />
			<fileset file="${js}/remendux.js" />
		</concat>
		<!-- Task do yui-compressor -->
		 <yui-compressor warn="false"  munge="true"  
				preserveallsemicolons="false" 
				fromdir="${output}" todir="${build}">
		</yui-compressor>
	</target>
 
</project>

Após a importação, para executar o script – que chamei de build-yui.xml – basta apenas executar com o ant pelo eclipse – vide imagem abaixo – ou em linha de comando. Estou usando o Ant 7.1 com java 6u10 e Eclipse 3.4, portanto caso haja um erro atente para a versão das ferramentas usadas.

Após executar, observe a redução de tamanho na versão minificada [../build/remendux-min.js] para a versão concatenada [../output/remendux.js ]. A versão final ficou com 30% do tamanho com documentação e identação.

Buildfile: C:\workspace\remendux\build-yui.xml
     [echo] Building output
clean:
    [mkdir] Created dir: C:\workspace\remendux\build
    [mkdir] Created dir: C:\workspace\remendux\output
main:
[yui-compressor]
 [30%] remendux.js [5775] ---> remendux-min.js [1734]
[yui-compressor]
 [JavaScript] Compressed 1 files to 30% (5KB to 1KB, saving 4KB)
[yui-compressor]
 [CSS] No files to compress, or all files already up to date
[yui-compressor]
 Compressed 1 files to 30% (5KB to 1KB, saving 4KB)
BUILD SUCCESSFUL
Total time: 12 seconds

Posted in Ajax, Engenharia de Software, Frameworks, High Performance, JSON, JavaScript, Melhores práticas, Otimização, Scripting, Web Development, YUI ~ No Comments

Compare a velocidade dos seus sites

{ July 19th, 2008 }

Autor: cmilfont

O Webslug é um serviço onde você pode comparar a velocidade de carregamento do seu site com outro qualquer, interessante para verificar dois sites hospedados no mesmo servidor e observar o carregamento afim de descobrir problemas se um sempre carregar mais rápido do que outro.

Posted in High Performance, Melhores práticas, Otimização, web2.0 ~ 1 Comment

Otimizando wordpress com YSlow

{ October 10th, 2007 }

Autor: cmilfont

O plugin do Yahoo! para o Firefox, YSlow, que se integra ao Firebug, avalia a performance dos sites com base nas regras de performance do Yahoo! Developer Network.

Essa regras são dicas valiosas para melhorar o arquivamento que os browsers fazem (cache) e transferência de dados em geral. Geralmente quando instalamos o Wordpress, nos preocupamos apenas com extensões como o wp-cache, mas otimização como compressão (gzip) passa despercebido.

Quando iniciei o processo de melhorar a performance da minha página inicial com base nos dados fornecidos pelo YSlow, observe na imagem abaixo que fiquei com uma nota baixíssima, D(68).

Eu sabia que manipular o HTTP com “Expire Header”, “Gzip”, entre outras coisas, no meu servidor, somente por meio do .htaccess. Pesquisando na web como configurar esse arquivo apropriadamente, descobri esse site Askapache.com, com artigos resolvendo esses requisitos e com códigos prontos.

Apliquei esse conjunto de instruções no arquivo .htaccess (caso ele não exista, crie um com esse nome):

Header unset ETag
FileETag None
<filesmatch>
SetOutputFilter DEFLATE
</filesmatch>
 
# 480 weeks
<filesmatch>
Header set Cache-Control "max-age=290304000, public"
</filesmatch>
 
# 2 DAYS
<filesmatch>
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesmatch>
 
# 2 HOURS
<filesmatch>
Header set Cache-Control "max-age=7200, must-revalidate"
</filesmatch>
 
<filesmatch>
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</filesmatch>

Logo após tirei mais um screenshot e minha nota melhorou muito, quase perfeito, agora tinha um B(89).

Por fim, para resolver o problema do CDN, eu segui o próprio faq do YSlow para camuflar esse requisito, não acho necessário (no meu caso) a utilização de um Content Delivery Network. Quem sabe se eu me tornar um problogger, maybe

Minha nota agora acompanha o próprio Yahoo!, existe um selinho de alta performance? No fim das contas o que vale mesmo é em quanto tempo seu site vai abrir lá no seu leitor, essas dicas não substituem um layout enxuto e bem montado.

Posted in Melhores práticas, Otimização, Web Development ~ 7 Comments