JS/CSS文件大,用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢,有的甚至由于CSS的文件而造成页面初始打开很凌乱。
我们怎么提高用户下载JS/CSS的速度呢?
1、我们无法改变用户的网络状况,只有自己网站使用更快的带宽或者使用更强的服务器,使用户访问我们的时候感觉很快。
2、对JS/CSS文件进行压缩,由于文件较小,用户下载的时间就很短。
解决方案1,需要花费比较多的money,方案2实现比较简单,而且效果也明显。
下面我们介绍使用YUI Compressor进行JS/CSS压缩
1、下载yuicompressor http://www.julienlecomte.net/yuicompressor/
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的源文件就会发现去掉了注释空格等信息。
更多yui compressor的帮助请查看
http://www.julienlecomte.net/yuicompressor/README
项目中需要对javascript进行打包和压缩,我选用了yuicompressor
yuicompressor可以压缩JS和CSS文件,去除文件中的无用空格、换行和注释。大大的减小JS和CSS文件的体积。
简单的命令如下
-
java-jaryuicompressor-2.4.2.jar--typejs--charsetutf-8-ouiiang.jstable.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文件,内容如下
-
(dir%1/aa/b/s|findstr/e/c:"js")>tmp.txt
-
for/f%%iin(tmp.txt)dojava-jaryuicompressor-2.4.2.jar--typejs--charsetutf-8-o%%i.tmp%%i©%%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文件,内容如下
-
for/r..\WebContent\js%%iin(*.js)dotype%%i>>uiiang-debug.js
-
java-jaryuicompressor-2.4.2.jar--typejs--charsetutf-8-ouiiang.jsuiiang-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
-
..\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
-
for/f%%iin(dir.txt)dotype%%i>>uiiang-debug.js
-
java-jaryuicompressor-2.4.2.jar--typejs--charsetutf-8-ouiiang.jsuiiang-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。
相关推荐
java -jar yuicompressor-2.4.2.jar -o compressed.js input.js ``` 对于CSS文件,命令类似,只是扩展名不同。此外,`YUI Compressor` 还支持通过参数配置压缩级别、是否保留注释等选项。 5. **与其他工具的比较...
例如,如果我们有一个名为`style.css`的CSS文件和一个名为`script.js`的JavaScript文件,我们可以使用以下命令来压缩它们: ```bash java -jar yuicompressor.jar -o style.min.css style.css java -jar yui...
标题 "ant和yuicompressor 压缩css、js方案" 涉及到的是在软件开发中如何使用构建工具Ant以及JavaScript压缩工具YUI Compressor来优化前端资源,特别是CSS和JavaScript文件。这两个工具在Web开发中起着至关重要的...
在提供的文件中,`compressor.bat`是一个批处理脚本,用于调用`yuicompressor.jar`执行压缩任务。使用步骤如下: 1. **环境准备**:确保安装了Java运行环境(JRE)。 2. **运行脚本**:双击`compressor.bat`,或者...
IDEA添加外部插件-yuicompressor压缩js/css-附件资源
IDEA(pycharm,phpstorm)添加外部插件-yuicompressor压缩js/css
yuicompressor压缩html、js、css、scss、jsp 方法:Monitoring.init 初始化基本参数: suffix : 压缩的后缀,如min,common.js压缩后为common.min.js,html与jsp不参与 filterDir:过滤目录,正则表达式,如(./...
//压缩CSS java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css 语法: java -jar yuicompressor-x.y.z.jar [options] [input file] 通用参数: -h, --help 显示帮助信息 ...
其中,`yuicompressor-2.4.7.jar`是一个著名的CSS和JS压缩工具——YUI Compressor的Java版本。它由雅虎开发,能有效地压缩JavaScript和CSS,通过消除冗余代码和压缩语法,显著减小文件体积。 压缩JS文件的原理类似...
1. **命令行工具**:通过安装Java Development Kit (JDK),然后下载YUI Compressor的jar文件,可以在命令行中使用`java -jar yuicompressor.jar`命令进行压缩操作。 2. **集成开发环境插件**:许多IDE如Eclipse、...
用yuicompressor-2.4.7压缩你的JS和CSS 最近做了一个项目,使用了Ext框架,项目做好了,结果客户一试用,打开一个页面要6秒,这个页面是用户经常要用的,要频繁打开的,这样用户就受不了了,怎么办?怎么办?怎么...
yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...
这个“YUI compressor右键压缩脚本”提供了一种便捷的方式,使得用户无需通过命令行或图形用户界面(GUI)就能快速对JS(JavaScript)和CSS文件进行压缩,大大简化了工作流程。 首先,我们来深入了解YUI Compressor...
这个工具的主要功能是对JavaScript (JS) 和 Cascading Style Sheets (CSS) 文件进行压缩,以减少文件大小,从而提高网页加载速度,优化用户体验。在Web性能优化的领域中,YUI Compressor扮演了关键角色。 ### YUI ...
在现代网页开发中,为了提高页面加载速度和优化用户体验,JavaScript (js) 和 Cascading Style Sheets (css) 文件的压缩至关重要。YUI Compressor 是 Yahoo! 开发的一款高效、强大的压缩工具,能够有效地减小 js 和 ...
Maven作为一个强大的Java项目管理工具,提供了与各种构建优化工具集成的能力,其中包括使用YUI Compressor来压缩CSS和JS文件。YUI Compressor是一款由Yahoo开发的开源工具,它能够去除代码中的空白、注释,并进行...
对于Idea用户,可以通过安装第三方插件实现yuicompressor的集成,这样在编译项目时,可以直接对JavaScript和CSS文件进行自动压缩,简化了工作流程,提高了开发效率。 在Idea中配置yuicompressor,通常需要以下步骤...
`yuicompressor-2.4.8.zip` 是一个前端开发中常用的工具,主要功能是对JavaScript和CSS文件进行注释清理和代码压缩,从而优化网页加载速度,提高用户体验。这个压缩工具出自YUI(Yahoo! User Interface Library)...