フロントエンドコードの最適化:YUI Compressorの使用
28013 ワード
コンポーネントを圧縮することで、HTTPリクエストとレスポンスイベントを大幅に削減できます.これもページサイズを小さくする最も簡単な技術ですが、最も効果的です.
圧縮JS、CSSコードはいくつかの常用プラグインがあって、YUI Compressorは悪くない選択です.mavenのYUI Compressor pluginでプロジェクトのフロントエンドコードを簡単に圧縮できます.最も簡単なのはすべてのファイルを一つ一つ圧縮してpomを見ることです.xmlの構成:
さらに、すべてのファイルを同じファイルにマージすることで、HTTPリクエストを減らすことができます.プロジェクト開発段階ではすべてのコードが圧縮されないため、1つのJSで他のすべてのファイルを導入することができます.後期圧縮の場合、すべてのコードをファイルに圧縮します.
複雑なニーズを見てみましょう.ファイルを圧縮し、圧縮されたファイルの一部を除外します. 圧縮ファイルをマージし、マージを必要としないファイルの一部を除外します. 圧縮されたファイルを指定したフォルダに配置します.
まず、マージの基本構成を見てみましょう.
aggregationのinputDirは非常に重要で、デフォルトはoutputDirの前のレイヤです.そしてaggregationの動作はyuicompressionの後です.したがって、上記の構成は、実際には${project.build.directory}/${project.build.finalName}ディレクトリの下にコードを圧縮してaggregationを行います.
もう1つ注意したいのは、オブジェクトのプロパティ名がJavascriptの予約語であり、プロパティ名を引用符で囲まれていない場合、圧縮時にエラーが投げ出されることです.
圧縮JS、CSSコードはいくつかの常用プラグインがあって、YUI Compressorは悪くない選択です.mavenのYUI Compressor pluginでプロジェクトのフロントエンドコードを簡単に圧縮できます.最も簡単なのはすべてのファイルを一つ一つ圧縮してpomを見ることです.xmlの構成:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>KUI_demo</groupId>
<artifactId>KUI_demo</artifactId>
<version>1.0</version>
<packaging>jar</packaging>
<build>
<plugins>
<plugin>
<groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>1.3.0</version>
<executions>
<execution>
<!-- YUI Compressor has two goals: compress and jslint -->
<goals>
<goal>compress</goal>
</goals>
</execution>
</executions>
<configuration>
<failOnWarning>false</failOnWarning>
<!-- Break contiguous output at this column number. -->
<!-- If this is zero, you will get line breaks after every line in the aggregated file. -->
<linebreakpos>-1</linebreakpos>
<!-- Set your own suffix. [default: "-min"]-->
<nosuffix>true</nosuffix>
</configuration>
</plugin>
</plugins>
<resources>
<resource>
<directory>${basedir}/webapp</directory>
<includes>
<include>**/*.js</include>
<include>**/*.css</include>
</includes>
</resource>
</resources>
</build>
</project> さらに、すべてのファイルを同じファイルにマージすることで、HTTPリクエストを減らすことができます.プロジェクト開発段階ではすべてのコードが圧縮されないため、1つのJSで他のすべてのファイルを導入することができます.後期圧縮の場合、すべてのコードをファイルに圧縮します.
複雑なニーズを見てみましょう.
まず、マージの基本構成を見てみましょう.
<project>
...
<build>
<plugins>
...
<plugin>
<groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>compress</goal>
</goals>
</execution>
</executions>
<configuration>
<nosuffix>true</nosuffix>
<aggregations>
<aggregation>
<!-- remove files after aggregation (default: false)
<removeIncluded>true</removeIncluded>
-->
<!-- insert new line after each concatenation (default: false) -->
<insertNewLine>true</insertNewLine>
<output>${project.build.directory}/${project.build.finalName}/static/all.js</output>
<!-- files to include, path relative to output's directory or absolute path-->
<!--inputDir>base directory for non absolute includes, default to parent dir of output</inputDir-->
<includes>
<include>${basedir}/src/licenses/license.js</include>
<include>**/*.js</include>
</includes>
<!-- files to exclude, path relative to output's directory
<excludes>
<exclude>**/*.pack.js</exclude>
<exclude>**/compressed.css</exclude>
</excludes>
-->
</aggregation>
</aggregations>
</configuration>
</plugin>
...
</plugins>
</build>
...
</project>aggregationのinputDirは非常に重要で、デフォルトはoutputDirの前のレイヤです.そしてaggregationの動作はyuicompressionの後です.したがって、上記の構成は、実際には${project.build.directory}/${project.build.finalName}ディレクトリの下にコードを圧縮してaggregationを行います.
<configuration>
<!-- exclude file witch not need to compress -->
<excludes>
<exclude>**/*.min.js</exclude>
<exclude>**/KUI.js</exclude>
</excludes>
<includes>
<include>**/*.js</include>
<include>**/*.css</include>
</includes>
<linebreakpos>-1</linebreakpos>
<nosuffix>false</nosuffix>
<suffix>.min</suffix>
<preProcessAggregates>false</preProcessAggregates>
<preserveAllSemicolons>true</preserveAllSemicolons>
<failOnWarning>false</failOnWarning>
<aggregations>
<!-- JS concatenation -->
<aggregation>
<inputDir>${project.build.directory}</inputDir>
<!-- Insert a new line after each concatenation. -->
<insertNewLine>true</insertNewLine>
<removeIncluded>false</removeIncluded>
<!-- Pathname of final output. -->
<output>${basedir}/webapp/KUI.min.js</output>
<!-- Files to include, path relative to output directory OR absolute path -->
<includes>
<inlcude>**/*.min.js</inlcude>
</includes>
<excludes>
<exclude>**/KUI.js</exclude>
<exclude>**/KUI.min.js</exclude>
</excludes>
</aggregation>
<!-- CSS concatenation -->
<aggregation>
<inputDir>${project.build.directory}</inputDir>
<!-- Pathname of final output. -->
<output>${basedir}/webapp/content.min.css</output>
<!-- Files to include, path relative to output directory OR absolute path -->
<includes>
<include>**/*.min.css</include>
</includes>
</aggregation>
<excludes>
<exclude>**/content.min.css</exclude>
</excludes>
</aggregations>
</configuration>もう1つ注意したいのは、オブジェクトのプロパティ名がJavascriptの予約語であり、プロパティ名を引用符で囲まれていない場合、圧縮時にエラーが投げ出されることです.
var test = {
long : “test” // throw error when compress
}
var test = {
“long” : “test” // correct.
}