TOC

Minificação de ativos JS e CSS com Maven

Minificação de ativos JS e CSS com Maven

1. Visão geral

Este artigo mostra como reduzir os recursos Javascript e CSS como uma etapa de construção e servir os arquivos resultantes com o Spring MVC.

UsaremosYUI Compressor como a biblioteca de minificação subjacente eYUI Compressor Maven plugin para integrá-la em nosso processo de construção.

2. Configuração do Maven Plugin

Primeiro, precisamos declarar que usaremos o plugin compressor em nosso arquivopom.xmle executaremos a metacompress. Isso compactará todos os arquivos.jse.css emsrc/main/webapp de modo quefoo.js será reduzido comofoo-min.jsemyCss.css será reduzido comomyCss-min.css: 


   net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress

Nossosrc/main/webapp directory contém os seguintes arquivos: 

js/
├── foo.js
├── jquery-1.11.1.min.js
resources/
└── myCss.css

Depois de executarmvn clean package, o arquivo WAR gerado conterá os seguintes arquivos: 

js/
├── foo.js
├── foo-min.js
├── jquery-1.11.1.min.js
├── jquery-1.11.1.min-min.js
resources/
├── myCss.css
└── myCss-min.css

3. Mantendo os mesmos nomes de arquivo

Neste estágio, quando executamosmvn clean package,foo-min.jsemyCss-min.css são criados pelo plugin. Como usamos originalmentefoo.jsemyCss.css ao nos referirmos aos arquivos, nossa página ainda usará os arquivos originais não minimizados, pois os arquivos minimizados têm nomes diferentes dos originais.

Para evitar terfoo.js/foo-min.js emyCss.css/myCss-min.css e ter os arquivos minimizados sem alterar seus nomes, precisamos configurar o plugin com a opçãonosuffix da seguinte maneira: 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true

Agora, quando executarmosmvn clean package, teremos os seguintes arquivos no arquivo WAR gerado: 

js/
├── foo.js
├── jquery-1.11.1.min.js
resources/
└── myCss.css

4. Configuração do plugin WAR

Manter os nomes dos arquivos iguais tem um efeito colateral. Isso faz com que o plugin WAR sobrescreva os arquivosfoo.jsemyCss.css minimizados com os arquivos originais, portanto, não temos as versões reduzidas dos arquivos na saída final. O arquivofoo.js contém as seguintes linhas antes da minificação: 

function testing() {
    alert("Testing");
}

Quando examinamos o conteúdo do arquivofoo.js no arquivo WAR gerado, vemos que ele possui o conteúdo original em vez do conteúdo reduzido. Para resolver esse problema, precisamos especificar umwebappDirectory para o plug-in do compressor e fazer referência a isso na configuração do plug-in WAR. 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true
        ${project.build.directory}/min
    


maven-war-plugin

    
        
            ${project.build.directory}/min

Aqui, especificamos o diretóriomin como o diretório de saída para os arquivos minificados e configuramos o plugin WAR para incluí-lo na saída final.

Agora temos os arquivos minimizados no arquivo WAR gerado, com seus nomes de arquivo originaisfoo.jsemyCss.css. Podemos verificarfoo.js para ver se ele possui o seguinte conteúdo reduzido agora: 

function testing(){alert("Testing")};

5. Excluindo Arquivos Já Minificados

Bibliotecas Javascript e CSS de terceiros podem ter versões minificadas disponíveis para download. Se acontecer de você usar um desses em seu projeto, não será necessário processá-los novamente.

A inclusão de arquivos já minificados produz mensagens de aviso ao criar o projeto.

Por exemplo,jquery-1.11.1.min.js é um arquivo Javascript já reduzido e causa mensagens de aviso semelhantes às seguintes durante a compilação: 

[WARNING] .../src/main/webapp/js/jquery-1.11.1.min.js [-1:-1]:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})
[WARNING] ...jquery-1.11.1.min.js:line -1:column -1:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})

Para excluir arquivos já minimizados do processo, configure o plugin do compressor com uma opçãoexcludes da seguinte forma: 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true
        ${project.build.directory}/min
        
            **/*.min.js

Isso excluirá todos os arquivos em todos os diretórios cujos nomes terminem commin.js. Executarmvn clean package não produz mensagens de aviso agora e a compilação não tenta minificar arquivos já minimizados.

6. Conclusão

Neste artigo, descrevemos uma boa maneira de integrar a minificação de arquivos Javascript e CSS em seu fluxo de trabalho Maven. Para atender a esses ativos estáticos com seu aplicativo Spring MVC, consulte nosso artigoServe Static Resources with Spring.

Você pode encontrar o código deste artigo emGitHub.

Related