MavenによるJSおよびCSSアセットの縮小

投稿日: 2019-10-18 2022-10-27
タグ: Maven

1. 概要

この記事では、ビルドステップとしてJavascriptとCSSアセットを縮小し、SpringMVCで結果のファイルを提供する方法を示します。

基盤となるミニファイライブラリとしてYUICompressor を使用し、ビルドプロセスに統合するために YUICompressorMavenプラグインを使用します。

2. Mavenプラグインの構成

まず、 pom.xml ファイルでコンプレッサープラグインを使用することを宣言し、compressゴールを実行する必要があります。これにより、 src / main /webappの下にあるすべての.jsおよび.cssファイルが圧縮され、foo.jsがとして縮小されます。 X135X]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");
}

生成されたWARファイルのfoo.jsファイルの内容を調べると、縮小されたコンテンツではなく、元のコンテンツが含まれていることがわかります。この問題を解決するには、コンプレッサープラグインに 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);})

すでに縮小されたファイルをプロセスから除外するには、次のようにexcludesオプションを使用してコンプレッサープラグインを構成します。

<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 package を実行しても、警告メッセージは表示されず、ビルドは既に縮小されたファイルを縮小しようとしません。

6. 結論

この記事では、JavascriptファイルとCSSファイルの縮小化をMavenワークフローに統合するための優れた方法について説明しました。これらの静的アセットをSpringMVCアプリケーションで提供するには、 Serve Static Resources withSpringの記事を参照してください。

この記事のコードはGitHubにあります。

getdocs

13036