Минификация ресурсов JS и CSS с помощью Maven

1. Обзор

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

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

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

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

<plugin>
   <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
</plugin>

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

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 следующим образом:

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <nosuffix>true</nosuffix>
    </configuration>
</plugin>

Теперь, когда мы выполним 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.

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <nosuffix>true</nosuffix>
        <webappDirectory>${project.build.directory}/min</webappDirectory>
    </configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
    <webResources>
        <resource>
            <directory>${project.build.directory}/min</directory>
        </resource>
    </webResources>
</configuration>
</plugin>

Здесь мы указали каталог 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);})

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

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <nosuffix>true</nosuffix>
        <webappDirectory>${project.build.directory}/min</webappDirectory>
        <excludes>
            <exclude>**/*.min.js</exclude>
        </excludes>
    </configuration>
</plugin>

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

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

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

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