JavaScript 代码压缩工具小结

 更新时间:2012年02月27日 22:48:24   作者:  
为了使页面更快的完成加载,经常需要对javascript/css代码进行压缩以减小体积,这里简单列一下用过的压缩工具,同时也作为存档
UglifyJS

UglifyJS是构建于nodeJS服务器端之上的一个代码压缩工具,目前jQuery使用它来压缩,压缩效果比较好。

GitHub主页:http://github.com/mishoo/UglifyJS/

在线使用:http://marijnhaverbeke.nl/uglifyjs

使用方法:

  1. http://nodejs.org下载nodejs,用到的是node.exe
  2. 再从UglifyJS的GitHub主页下载它的最新版本
  3. 复制node.exe到UglifyJS的bin目录
  4. 修改bin\uglifyjs,把require("uglify-js")改成require("../uglify-js"),假如提示找不到uglify-js的话
  5. 运行node uglifyjs –o fancyValidate.min.js fancyValidate.js

注意要先指定-o参数,且-o参数后面紧跟的是压缩后的文件名,最后才是源文件。

如果嫌下载麻烦的话,直接使用它的在线版本。

Microsoft Ajax Minifier
Microsoft Ajax Minifier是微软出品的代码压缩工具,支持JavaScript和css代码压缩。

官方主页:http://ajaxmin.codeplex.com/

下载并安装,使用方法也很简单:ajaxmin fancyValidate.js –o fancyValidate.min.js

更多的参数使用方法请看官方的说明文档:http://ajaxmin.codeplex.com/wikipage?title=Command-Line%20Switches

Google Closure Compiler

谷歌出品的代码压缩工具,需要JRE(从http://www.java.com/zh_CN/download/下载)的支持

官方主页:http://code.google.com/p/closure-compiler/

先安装好JRE,简单使用:java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

更多的参数说明请看相关的文档:https://developers.google.com/closure/compiler/docs/overview

YUI Compressor

Yahoo!UI团队出品的代码压缩工具,支持JavaScript和css代码压缩,同样也需要JRE支持。

官方主页:http://developer.yahoo.com/yui/compressor/

GitHub主页:https://github.com/yui/yuicompressor

http://yuilibrary.com/download/yuicompressor/下载它,简单使用:java -jar yuicompressor-2.4.7.jar myfile.js -o myfile-min.js

更多参数的说明请看官方主页或https://github.com/yui/yuicompressor/blob/master/doc/README

Packer

著名的js大牛Dean Edwards写的压缩工具,压缩比率也比较高。

官方主页:http://dean.edwards.name/packer/

时间比较久远,但依然好用,也提供了不少参数设置。

JSMIN

与Packer差不多时代,仅对注释、空白等进行压缩。

官方主页:http://www.crockford.com/javascript/jsmin

提供了一个DOS命令行版本:http://www.crockford.com/javascript/jsmin.zip

简单使用:jsmin <fancyValidate.js> fancyValidate.min.js

结尾

就简单介绍到这里,另外在进行压缩之前最好能够使用JSLint(http://www.jslint.com/)检查代码,否则很可能导致压缩失败。

作者:囧月

相关文章

  • JavaScript实现快速排序的方法分析

    JavaScript实现快速排序的方法分析

    这篇文章主要介绍了JavaScript实现快速排序的方法,结合实例形式分析了快速排序的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2018-01-01
  • 红黑树的插入详解及Javascript实现方法示例

    红黑树的插入详解及Javascript实现方法示例

    这篇文章主要给大家介绍了关于红黑树的插入的相关资料,以及Javascript实现的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。
    2018-03-03
  • js实现缓冲运动效果的方法

    js实现缓冲运动效果的方法

    这篇文章主要介绍了js实现缓冲运动效果的方法,涉及javascript操作元素运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript 在线压缩和格式化收藏

    JavaScript 在线压缩和格式化收藏

    国外人写的在线压缩和格式化工具这两套程序都是用纯 JavaScript 写的,可以下载下来离线使用,很方便。
    2009-01-01
  • 用JavaScript隐藏控件的方法

    用JavaScript隐藏控件的方法

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。
    2009-09-09
  • 前端异步同步处理应用场景及优化详细讲解和举例

    前端异步同步处理应用场景及优化详细讲解和举例

    前端开发中异步与同步处理分别适用不同场景,异步操作如网络请求、文件读写等,而同步处理适用于简单、线性任务,异步处理可通过回调函数、Promise、async/await等方式优化,提高代码效率和可维护性,需要的朋友可以参考下
    2024-10-10
  • JavaScript中innerHTML使用方法实例

    JavaScript中innerHTML使用方法实例

    js中常常用到innerHTML,其作用就是获取到标签里面的内容,同时也可以为标签添加内容,下面这篇文章主要给大家介绍了关于JavaScript中innerHTML使用方法的相关资料,需要的朋友可以参考下
    2022-10-10
  • javascript算法学习(直接插入排序)

    javascript算法学习(直接插入排序)

    假设待排序的记录存放在数组R[1..n]中。初始时,R[1]自成1个有序区,无序区为R[2..n]。从i=2起直至i=n为止,依次将R[i]插入当前的有序区R[1..i-1]中,生成含n个记录的有序区。
    2011-04-04
  • 原生JS实现左右箭头选择日期实例代码

    原生JS实现左右箭头选择日期实例代码

    原生JS 左右箭头选择日期,就是用左右尖括号可改变中间日期的值,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-03-03
  • js实现百度登录框鼠标拖拽效果

    js实现百度登录框鼠标拖拽效果

    这篇文章主要为大家详细介绍了js实现百度登录框鼠标拖拽效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论