S/CSS文件大,用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢,有的甚至由于CSS的文件而造成页面初始打开很凌乱。

我们怎么提高用户下载JS/CSS的速度呢?

1、我们无法改变用户的网络状况,只有自己网站使用更快的带宽或者使用更强的服务器,使用户访问我们的时候感觉很快。

2、对JS/CSS文件进行压缩,由于文件较小,用户下载的时间就很短。

解决方案1,需要花费比较多的money,方案2实现比较简单,而且效果也明显。

下面我们介绍使用YUI Compressor进行JS/CSS压缩

2、使用ant编译得到yuicompressor-x.y.z.jar的包,进入yuicompressor-x.y.z目录运行ant -f build.xml

3、在build目录下得到yuicompressor-x.y.z.jar的包,使用java -jar yuicompressor-2.4.2.jar in.js -o out.js

看下out.js的源文件就会发现去掉了注释空格等信息。

项目中需要对javascript进行打包和压缩,我选用了yuicompressor

yuicompressor可以压缩JS和CSS文件,去除文件中的无用空格、换行和注释。大大的减小JS和CSS文件的体积。

简单的命令如下

Java代码

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8-o uiiang.js table.js

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js table.js

--type指定要打包的文件类型,可选的有 js和css

--charset 指定字符集

-o 指定输出的文件名,如果不指定这个参数将会把压缩后的内容输出到命令行上

最后的table.js是要打包的源文件

不过这样压缩有一个缺点,只能一个一个文件的进行压缩,所以使用bat进行批处理压缩

建立一个compresjs.bat文件,内容如下

Java代码

(dir %1/aa /b /s | findstr /e /c:"js") >tmp.txt

for/f %%i in (tmp.txt)dojava -jar yuicompressor-2.4.2.jar --type js --charset utf-8-o %%i.tmp %%i & copy %%i".tmp"%%i & del %%i".tmp"

(dir %1 /aa /b /s | findstr /e /c:"js") >tmp.txt

for /f %%i in (tmp.txt) do java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o %%i.tmp %%i & copy %%i".tmp" %%i & del %%i".tmp"

运行这个bat文件,会自动寻找本文件所在目录下所有子文件夹中的.js文件,进行压缩并覆盖源文件。

compresjs.bat使用的方法只是对文件进行压缩,如果有10个源文件,还会压缩成10个文件,并没有进行打包。 我们可以对他进行更进一步的处理,把这10个源文件打包压缩成1个文件,就像ext-all.js那样。

建立一个packagejs.bat文件,内容如下

Java代码

for/r ..\WebContent\js %%i in (*.js)dotype %%i>>uiiang-debug.js

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8-o uiiang.js uiiang-debug.js

for /r ..\WebContent\js %%i in (*.js) do type %%i>>uiiang-debug.js

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js

在packagejs.bat中,先将..\WebContent\js下的所有JS文件内容合并到uiiang-debug.js文件中,然后再

使用yuicompressor对uiiang-debug.jsp压缩成uiiang.js,这样就可以得到一个经过压缩并包含全部.js文件的代码

了。

packagejs.bat中使用的方法有一个缺点,那就是它在合并js文件时的顺序,是按照文件夹及子文件夹还有js文件的排

列顺序进行合并的,也就是按文件名顺序排列。但是在我们实际项目中,一般情况下JS文件的引用是要指定一个特定的加载顺序,不然的话就会报错。所以还要对

packagejs.bat进行再进一步的改造。

首先要建立一个列表文件dir.txt

Java代码

..\WebContent\js\widgets\WidgetInit.js

..\WebContent\js\utils\Cache.js

..\WebContent\js\common\GlobalConstant.js

..\WebContent\js\common\GlobalVariable.js

..\WebContent\js\common\GlobalFunc.js

..\WebContent\js\core\Initialize.js

..\WebContent\js\widgets\WidgetInit.js

..\WebContent\js\utils\Cache.js

..\WebContent\js\common\GlobalConstant.js

..\WebContent\js\common\GlobalVariable.js

..\WebContent\js\common\GlobalFunc.js

..\WebContent\js\core\Initialize.js

在这个文件中,按照JSP中指定的JS文件加载顺序写好文件的路径

再修改packagejs.bat

Java代码

for/f %%i in (dir.txt)dotype %%i >> uiiang-debug.js

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8-o uiiang.js uiiang-debug.js

for /f %%i in (dir.txt) do type %%i >> uiiang-debug.js

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js

执行这个packagejs.bat文件后,批处理命令会自动读取dir.txt并按照你指定的顺序逐行取出.js文件的路径进行,把文件内容合并到uiiang-debug.js中。

另外要注意的一点就是在dir.txt中,一定要把所需要打包压缩的的JS文件路径全部列出来,因为新的pakagejs.bat不会再自动寻找全部的JS文件了,如果有遗漏就只好报错

至此,批处理压缩打包js文件的工作就完成了,还可以将代码中的.JS换成.css对CSS文件进行打包,当然yuicompressor的--type也要改成css。

css compressor java_使用YUI Compressor压缩CSS/JS相关推荐

  1. css compressor java_利用YUI Compressor压缩JS/CSS之终极秘籍

    JS/CSS的压缩已经不是什么新鲜话题了,自打YSlow推出后,这方面的优化话题是铺天盖地啊:不过当时作为后知后觉的我,甚至都没法完整地写出一份漂亮的JS/CSS的代码,何尝会去注意呢?! 时至今日, ...

  2. spingboot2.0以上利用YUI Compressor Maven结合压缩混淆JS/CSS

    上一章节我们说了利用allatori技术对java class 文件内容进行 混淆,防止他人巧取代码技术,这一章节我们直接进入主题,利用YUI Compressor Maven 进行对前端静态资源JS ...

  3. css 压缩后出现了问题,yuicompressor 压缩css问题怎么解决?—详细步骤

    平常我们写css3动画时经常如下写法 @keyframes proBackAction { 0% { opacity: 1; } 100% { opacity: .8; } } 但是在用yuicomp ...

  4. webpack4--提取css到单独文件并且压缩css

    提取css到build/css目录下:mini-css-extract-plugin插件 压缩css:optimize-css-assets-webpack-plugin插件 Uglify是压缩js: ...

  5. 续Gulp使用入门三步压缩CSS

    gulp 压缩css 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 npm install gulp-minify-cs ...

  6. 16-webpack 压缩 CSS 代码

    从 06-webpack 加载 CSS 之后,能够正常加载 CSS ,并且能够正常显示. 要看到压缩 CSS 代码效果,需要先把 CSS 从 bundle.js 中抽离出来,并导入独立的文件中去,然后 ...

  7. java js css 压缩工具_javascript和css文件的压缩(YUI Compressor)

    为什么要压缩? 现在的Web项目总是离不开大量JavaScript和CSS,而文件的体积也越来越大,也越来越影响页面的感知性能(Perceived Performance). YUI Compress ...

  8. Asp.Net使用Yahoo.Yui.Compressor.dll压缩Js|Css

    网上压缩css和js工具很多,但在我们的系统中总有特殊的地方.也许你会觉得用第三方的压缩工具很麻烦.我就遇到了这样问题,我不想在本地压缩,只想更新到服务器上去压缩,服务器压缩也不用备份之类的操作.于是 ...

  9. 使用 YUI Compressor 批量压缩JS/CSS

    官方网址:http://developer.yahoo.com/yui/compressor/ 安装包下载地址:https://github.com/yui/yuicompressor/downloa ...

  10. YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法(被maven打包顶替了)

    YUI Compressor Maven插件可以压缩/合并js或css文件,经常用在Maven项目中,但最近发现在wabapp中执行了 mvn install 命令进行发布之后,终端中显示插件已经执行 ...

最新文章

  1. 重启jboss出现问题:端口被占用
  2. python入门(1)python的前景
  3. why is pricing callback CRM_PRIDOC_UPDATE_EC called
  4. 【Ubuntu16.04-opencv3.4.0-FDDB Evaluation】评测代码使用中遇到对‘cvxxx’未定义的引用问题
  5. 收藏 || 11个超好用的在线检查语法的网站!!!
  6. ======第二章进程管理======
  7. html里面怎么引别的页面_如何在一个html文件中引入另一个html文件?
  8. python xml.etree.ElementTree
  9. visio profession 2013破解
  10. Win10 使用 Virtual Box 安装 Ubuntu 虚拟机
  11. VMware Tanzu Application Service——Config Client (TAS)
  12. 利用ArcSoftFace做人脸识别-屏幕卫士 保护你的屏幕不被别人偷窥
  13. STM32F103学习之系统时钟配置
  14. 香港深水埗将办新春美食节 助青年一尝创业滋味
  15. Python 模拟登录淘宝
  16. 隐形的翅膀怎么用计算机弹出来,《隐形的翅膀》原版吉他谱分享,用音阶指法弹简谱其实很简单 … …-520吉他网...
  17. Altium Designer(AD)安装教程
  18. 牛奶可乐经济学---阅读总结
  19. w10睡眠的计算机如何启动,win10睡眠按什么键唤醒 w10系统睡眠怎样唤醒
  20. 神奇的不可见空格200b导致代码异常

热门文章

  1. RF-接口自动化测试-「参数Parameters格式」
  2. RF-接口自动化测试-「Body Data格式」
  3. activity mq shared filesystem 部署
  4. 传输控制协议端口服务多路开关选择器
  5. fanuc机器人码垛编程实例_FANUC 机器人码垛编程详细讲解,要收藏哦~
  6. delphi VMP加壳 自检保护和硬件ID获取
  7. dubbo 视频教程
  8. MySQL可视化管理工具之SQLyog的简介以及使用方法
  9. NAS服务器和文件服务器区别
  10. Oracle中的常用日期函数