压缩前端文件(html, css, js)

1:原因

在写前端代码时, 因为要尽可能的适合阅读会加入许多注释, 空格等, 这些在开发时是必要的, 但当你要发布时, 就需要让代码更加精简, 精简压缩的同时也混淆了代码, 安全性也加强了, 可以说是一举两得。

2:解决方案

使用 htmlcompressor-1.5.3.jar(html) 和 yuicompressor-2.4.8.jar(js, css) 实现前端资源的压缩。

3:例子

 3.1 htmlcompressor-1.5.3.jar 压缩 html文件

java -jar ./htmlcompressor-1.5.3.jar Internet.html -o Internet1.html (表示压缩Internet.html文件中的html代码)

如果, html文件中嵌入了css, 和js代码呢？这就需要添加 --compress-js 和 --compress-css 这两个选项来实现压缩

java -jar ./htmlcompressor-1.5.3.jar Internet.html -o Internet1.html --compress-js  --compress-css  (表示压缩Internet.html文件中所有代码, 压缩后文件更小)

压缩后大小对比(小了59kb):

[stone web]$ ls -l Internet.html
-rw-rw-r--  stone stone  Nov  : Internet.html
[stone web]$ ls -l Internet1.html
-rw-rw-r--  stone stone  Nov  : Internet1.html

内容对比图(右边被压缩后的html文件更加紧凑, 却不影响浏览器识别):

　　htmlcompressor-1.5.3.jar 也可以压缩js和css文件, 就是使用'--compress-js 和 --compress-css这两个选项', 但是使用htmlcompressor-1.5.3.jar压缩的css和js还不够彻底, 可以使用专门压缩css和js文件的工具yuicompressor-2.4.8.jar

   3.2 yuicompressor-2.4.8.jar 压缩 js 和css文件

命令: java -jar ./yuicompressor-2.4.8.jar ./js/AES.js -o test.js

压缩后大小对比(5kb):

[stone web]$ ls -l ./js/AES.js
-rw-rw-r--  stone stone  Nov  : ./js/AES.js
[stone web]$ ls -l ./test.js
-rw-rw-r--  stone stone  Nov  : ./test.js

内容对比图(右边被压缩后的js文件更加紧凑, 却不影响浏览器识别):

而且可以看到, js文件的内容被压缩到了一行上面, 并且yuicompressor还将js文件中的变量用a,b,c等来替代, 所以压缩程度是比较高了的, 所以对人来说很不友好, 但是不影响机器识别功能。

4:使用到我的平台

在项目中, 直接在生成image之前, 将拷贝到文件系统(rootfs)中的所有html, js, css进行压缩之后再编译FW即可.

参考的Makefile:

    #find $(TARGET)/htdocs/web/ -type f -name *.html -exec java -jar $(TOPDIR)/progs.brand/java/htmlcompressor-1.5.3.jar  {}  -o {} --compress-js --compress-css \;
    #find $(TARGET)/htdocs/web/js ! -path "*/localization/*" -type f -name *.js ! -name MacList.js -exec java -jar $(TOPDIR)/progs.brand/java/yuicompressor-2.4.8.jar {} -o {} \;
    #find $(TARGET)/htdocs/web/css -type f -name *.css -exec java -jar $(TOPDIR)/progs.brand/java/yuicompressor-2.4.8.jar {} -o {} \;

经过对比, FW比没有压缩前端code小了1M左右