Catch

使用YUICompressor压缩JS、CSS优化前端加载速度

性能一直是项目中比较重要的一点,尤其门户网站,对页面的响应要求是很高的,从性能角度上来讲,对于Web端的优化其中重要的一点无疑是JS、CSS文件压缩,图片的融合,尽量减小文件的大小,必免占加载时占用过多的带宽。yuicompressor无疑是一个比较好的压缩工具,是yahoo的一个开源组件,下面介绍yuicompressor压缩JS、CSS文件,及在项目中的使用。

YUICompressor介绍

  1. 首先需要从https://github.com/yui/yuicompressor/releases下载yuicompressor的jar文件,目前最新版是2.4.8,把yuicompressor-2.4.8.jar下载下来,一会就用这个jar来压缩文件
  2. yuicompressor需要有java运行环境的支持,先通过java -jar yuicompressor-2.4.8.jar看下效果

image.png

—type:文件类型(js|css)
—charset:字符串编码
—line-break:在指定的列后面插入一个line-break符号
-v,—verbose: 显示info和warn级别的信息
-o:指定输出的文件位置及文件名
—nomunge:只压缩, 不对局部变量进行混淆
—preserve-semi:保留所有的分号
—disable-optimizations:禁止优化

下面是一个单个文件压缩的命令示例

java -jar /data/lib/yuicompressor-2.4.7.jar --type js --charset utf-8 -v --verbose /data/demo/index.js -o /data/dist/index.min.js

yuicompressor在项目中的应用

上面的压缩只是单个文件,对于批量文件是不适合的,因此需要写一个工具类,递归压缩指定文件夹中所的有js、css文件
在pom.xml文件中增加对yuicompressor的引入

<!-- https://mvnrepository.com/artifact/com.yahoo.platform.yui/yuicompressor --> <dependency> <groupId>com.yahoo.platform.yui</groupId> <artifactId>yuicompressor</artifactId> <version>2.4.8</version> </dependency>

工具类代码如下

package com.edaoe.common; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.Arrays; import java.util.Date; import java.util.List; /** * 通过yuicompressor压缩JS|CSS文件工具类 */ public class CompressorUtil { private static final String encoding = "utf-8"; private static final String[] suffixArray = { ".js", ".css" }; public static void main(String[] args) { String yuiPath = "/data/lib/yuicompressor-2.4.8.jar"; String filePath = "/data/user/js"; compressFile(yuiPath, filePath); } /** * 压缩指定文件夹下所有的js/css * * @param yuiPath * yuicompressor-2.4.8.jar文件路径 * @param filePath * 要压缩的文件夹路径 */ public static void compressFile(String yuiPath, String filePath) { File file = new File(filePath); List<String> commondList = new ArrayList<String>(); initCommondList(yuiPath, commondList, file); excuteCompress(commondList); } /** * 执行压缩命令 * @param commondList */ private static void excuteCompress(List<String> commondList) { Runtime runTime = Runtime.getRuntime(); Date startTime = new Date(); Long count = 0L; for (String cmd : commondList) { try { System.out.println(cmd); runTime.exec(cmd); count++; } catch (IOException e) { e.printStackTrace(); } } Date endTime = new Date(); Long cost = endTime.getTime() - startTime.getTime(); System.out.println("压缩完成,耗时:" + cost + "ms,共压缩文件个数:" + count); } /** * 初始化压缩命令 * @param yuiPath * @param commondList * @param file */ private static void initCommondList(String yuiPath, List<String> commondList, File file) { if (file.isDirectory()) { File[] files = file.listFiles(); // 如果某个文件夹是空文件夹,则跳过 if (files == null) { return; } for (File f : files) { initCommondList(yuiPath, commondList, f); } } else { String fileName = file.getName(); String suffix = fileName.substring(fileName.lastIndexOf("."), fileName.length()); List<String> suffixList = Arrays.asList(suffixArray); if (suffixList.contains(suffix) && !fileName.endsWith("-min" + suffix)) { StringBuffer sb = new StringBuffer(); sb.append("java -jar "); sb.append(yuiPath); sb.append(" --type "); sb.append(suffix.substring(suffix.indexOf(".") + 1)); sb.append(" --charset "); sb.append(encoding).append(" "); sb.append(file.getPath()).append(" "); sb.append("-o").append(" "); sb.append(file.getPath().replace(suffix, "-min" + suffix)); commondList.add(sb.toString()); } } } }