用mvn实现打包时静态资源压缩

背景

在我们使用jquery、zepto、seajs、lazyload这些第三方js库的时候,总是能看到*-min.js的版本。

而且里面都是a,b,c,d,e,f,g这样的变量,在解析其他网站实现方式的时候,总是让人蛋疼。

这样做的目的就是为了压缩js文件,为什么能够起到压缩的效果呢?

比如,原来的变量名是var ohMyGodArray,压缩之后变成了var o,是不是一下子字节数就少了很多。而且,照这个思路的话,js里面变量数越少,重复使用度越高,压缩的比例越大。

那么,这怎么做呢?

使用maven实现

要实现压缩,需要用到yuicompressor-maven-plugin这个插件。

插件的功能就是在打包的时候把指定的资源文件压缩,放到目标目录里面。

看下xml配置,就明白了,用法很简单,在工程的pom.xml的project里面添加如下内容:

    <build>
        <finalName>myProject</finalName>
        <plugins> 
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.4</version>
                <configuration>
                    <warSourceExcludes>**/*.js,**/*.css</warSourceExcludes>
                </configuration>
            </plugin>

            <plugin>
                <groupId>net.alchim31.maven</groupId>
                <artifactId>yuicompressor-maven-plugin</artifactId>
                <version>1.3.0</version>
                <executions>
                    <execution>
                        <id>cpjscs</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>compress</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <!-- 包含js文件和css文件 -->
                    <includes>
                        <include>**/*.js</include>
                        <include>**/*.css</include>
                    </includes>
                    <!-- 排除本来就压缩的js文件,比如jquery.min.js xxx-min.js之类的文件 -->
                    <excludes>
                    <exclude>**/*.min.js</exclude>
                        <exclude>**/*-min.js</exclude>
                    </excludes>
                    <encoding>utf8</encoding>
                    <failOnWarning>false</failOnWarning>
                    <force>true</force>
                    <nosuffix>true</nosuffix>
                    <linebreakpos>-1</linebreakpos>
                    <sourceDirectory>${basedir}/webapp</sourceDirectory>
                    <jswarn>false</jswarn>
                </configuration>
            </plugin>
        </plugins> 
    </build>

这里有几个需要说明的地方:

1.代表打包插件执行时,不放到目标目录的文件,否则会把yuicompressor插件压缩的js、css文件覆盖掉。

<warSourceExcludes>**/*.js,**/*.css</warSourceExcludes>

2.phase要设置为prepare-package,也就是yuicompressor插件在package执行之前运行。

<phase>prepare-package</phase>

可能遇到的问题

1.mvn install的时候遇到这样的错误

[ERROR] .../src/main/webapp/h5/cosmetic/js/wantOrder-cuc.js:line 267:column 26:invalid property id
                            package: data.data.weixin_package, 

应该是js里面有yuicompressor定义的非法字符,我遇到的有两个,一个是package,一个是default。

这时候的处理方法,就是换成其他变量名,或者把这个js设置为不压缩(主要针对为第三方库的时候)。

设置不压缩,就在yuicompressor的excludes里面添加项就可以了(这里支持通配符)。

在chrome里面格式化显示压缩的js文件

有时候,我们看到其他网站的功能很不错的时候,总想去偷学一下,看见人家怎么实现的。

头疼的是,大多网站的js都是压缩过的,压缩之后不仅变量名变了,而且都串到一行去了,调试都调试不了。

chrome的调试工具很强大,它提供了一个格式化显示js文件的功能,格式化之后能够做到两点:1.js内容不再显示在一整行,而是规规矩矩的分开了多行显示;2.断点可以打在任何位置,并且能够单步调试。

是不是会爽快很多,那么这个功能在哪里呢?

这里写图片描述

这里写图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页