TOC

Минификация JS и CSS-активов с Maven

Сокращение ресурсов JS и CSS с Maven

1. обзор

В этой статье показано, как минимизировать ресурсы Javascript и CSS в качестве шага сборки и обслуживать полученные файлы с помощью Spring MVC.

Мы будем использоватьYUI Compressor в качестве базовой библиотеки минификации иYUI Compressor Maven plugin, чтобы интегрировать его в наш процесс сборки.

2. Конфигурация плагина Maven

Во-первых, нам нужно объявить, что мы будем использовать плагин компрессора в нашем файлеpom.xml и выполнить цельcompress. Это сжимает все файлы.js и.css вsrc/main/webapp, так чтоfoo.js будет минимизирован какfoo-min.js, аmyCss.css будет минимизирован какmyCss-min.css: 


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

Нашsrc/main/webapp directory содержит следующие файлы: 

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

После выполненияmvn clean package сгенерированный файл WAR будет содержать следующие файлы: 

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. Сохранение одинаковых имен файлов

На этом этапе, когда мы выполняемmvn clean package, плагин создаетfoo-min.js иmyCss-min.css. Поскольку мы изначально использовалиfoo.js иmyCss.css при обращении к файлам, наша страница по-прежнему будет использовать исходные неминифицированные файлы, так как минифицированные файлы имеют другие имена, чем исходные.

Чтобы предотвратить использованиеfoo.js/foo-min.js иmyCss.css/myCss-min.css и минимизацию файлов без изменения их имен, нам необходимо настроить плагин с опциейnosuffix следующим образом: 


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

Теперь, когда мы выполняемmvn clean package, у нас будут следующие файлы в сгенерированном файле WAR: 

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

4. Конфигурация плагина WAR

Сохранение имен файлов имеет побочный эффект. Это заставляет плагин WAR перезаписывать уменьшенные файлыfoo.js иmyCss.css исходными файлами, поэтому в окончательном выводе у нас не будет уменьшенных версий файлов. Файлfoo.js до минификации содержит следующие строки: 

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

Когда мы исследуем содержимое файлаfoo.js в сгенерированном WAR-файле, мы видим, что он имеет исходное содержимое вместо минимизированного содержимого. Чтобы решить эту проблему, нам нужно указатьwebappDirectory для плагина компрессора и ссылаться на него из конфигурации плагина WAR. 


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


maven-war-plugin

    
        
            ${project.build.directory}/min

Здесь мы указали каталогmin в качестве каталога вывода для минифицированных файлов и настроили плагин WAR, чтобы он включал его в окончательный вывод.

Теперь у нас есть миниатюрные файлы в сгенерированном WAR-файле с их исходными именамиfoo.js иmyCss.css.. Мы можем проверитьfoo.js, чтобы увидеть, что теперь он имеет следующий минимизированный контент: 

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

5. Исключение уже минифицированных файлов

Сторонние библиотеки Javascript и CSS могут иметь уменьшенные версии, доступные для скачивания. Если вам случится использовать один из них в своем проекте, вам не нужно обрабатывать их снова.

Включение уже минимизированных файлов выдает предупреждающие сообщения при сборке проекта.

Например,jquery-1.11.1.min.js - это уже уменьшенный файл Javascript, и во время сборки он вызывает предупреждающие сообщения, подобные следующим: 

[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);})

Чтобы исключить уже минифицированные файлы из процесса, настройте плагин компрессора с параметромexcludes следующим образом: 


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

Это исключит все файлы во всех каталогах, имена которых заканчиваются наmin.js. При выполненииmvn clean package теперь не появляются предупреждающие сообщения, и сборка не пытается минимизировать уже уменьшенные файлы.

6. Заключение

В этой статье мы описали хороший способ интеграции минимизации файлов Javascript и CSS в рабочий процесс Maven. Чтобы использовать эти статические ресурсы в приложении Spring MVC, см. Нашу статьюServe Static Resources with Spring.

Вы можете найти код для этой статьи наGitHub.

Related