轻松压缩JS文件

http://tools.css-js.com/compressor.html

这个站点里面有四个压缩引擎，一个YUI压缩，一个UglifyJS压缩，一个JSPacker压缩，和一个新的JsMin压缩。

一般用UglifyJS引擎压缩就可以。jQuery和好些其他的前端项目就是用他压缩的。

另外给个建议，你把你的JS文件用匿名函数的方式封装起来，对外只给一个接口。这样JS压缩引擎就可以把你匿名函数中不对外开放的内部变量名称都给替换成a,b,c,d这样的单字符，很能节省体积。

.js 是JavaScript的源码文件。.js文件可读性好，便于调试和修改，但是其相对压缩后的.min.js所占用空间较大

.min.js 是JavaScript的源码文件压缩之后产生的文件。.min.js文件可读性差，所占用空间相对较小，可用于源码防窃

将.js压缩为.min.js主要包括两个方面：去掉无用的空格、换行符号、注释等，从而压缩js文件大小；将原.js中变量和函数的命名修改为没有实际意义的名称，进行语句的等价替换，如条件判断修改为使用三目运算符，从而尽可能实现源码防窃

JavaScript的代码压缩工具

写过js混淆器，谈一些浅显的个人看法。个人认为，js的不可读化处理分为三个方面：压缩（compression）、混淆（obfuscation）和加密（encryption）。（不可读化处理，这是我自己发明的术语，一切会增加代码不可读性的代码转换,都可以这么叫，“增加代码不可读性”可能是代码转换的结果或者目的）.1.压缩这一操作的目的，是让最终代码传输量（不代表代码量,也不代表文件体积）尽可能小。压缩js的工具，常见的有：YUICompressor、UglifyJS、GoogleClosureCompiler等。通常在代码压缩的过程中，只改变代码的语法，代码的语义和控制流不会有太大改变。常见做法是把局部变量缩短化，把一些运算进行等价替换等。代码压缩对于代码保护有一些帮助，但由于语义和控制流基本没变，起不了太大作用。在压缩层面上，代码不可读只是一种附带伤害，不是最终目的。2.混淆这一操作的目的，是让代码尽可能地不可读，主要用作代码保护。让代码不可读，增加分析的难度，这是唯一目的。混淆过后文件体积变大一倍也没关系，代码量变多也没关系，运算慢50%也没关系。常见的做法有：分离常量、打乱控制流、增加无义代码、检查运行环境如果不对就罢工，等等。在混淆层面上，代码不可读是最终目的。值得一提的是，GoogleClosureCompiler的AdvanceLevelCompression会压缩类和对象的成员，其压缩结果很难分析，也可以认为是一种混淆，但兼容性不太好。广告时间：我写的js混淆器，中文名叫“看起来很厉害的JS编译器”，英文名叫做TheImpressiveJS.Segment.Compiler，看起来很厉害的JS编译器。3.加密说实话我很难对加密做一个定义，因为加密在Web界有太多歧义了。有加密就有解密，意味着加密操作可逆，密文可以明文化。就这样看来，在Web界，可以称之为加密的东西包括：HTTPS传输、JavaScript实现对称加密或者不对称加密等等。这样看来，不可逆的代码压缩和混淆就不能列入加密这个范畴了。非要找一个可以称之为加密，又经常被人误解为压缩和混淆的东西，DeanEdwards的DeanPacker/Unpacker可以拿来做个例子。比如我们把varnum=1alert(num)输入DeanPacker，pack一下，得到这么一串东西，是不是看着非常像被压缩和混淆过的代码？把上面那串意义不明物拿来unpack一下，得到了原文。实际上DeanPacker只是对源码进行了一个字符串变换，没有深入到代码语法层面，你可以拿"Helloworld,你好师姐"来试试。用OnlineJavaScriptbeautifier能轻松把这串东西还原为“Helloworld,你好师姐”。可以看出，代码加密意味着：将代码明文进行可逆的变换（加密），生成密文；将密文进行逆变换（解密），可以还原明文；最终运行环境运行的是解密代码。结语实际上大家对压缩、混淆、加密这三个概念还是挺不清晰的，我在这里说一些个人见解，希望有帮助。在现实项目中，我是多种手段结合的：对于不需要做代码保护的项目，比如个人博客，做代码压缩，加快载入速度，这就够了。对于需要做一些代码保护，防止抄袭的项目，可以在源码中加入一些开发者的信息和防护代码，然后混淆和压缩。很不幸的是，我这方面总是做得不太好，防君子防不了小人啊哈哈。对于需要严格加密的项目，可以用混淆、压缩、加密、签名检查等多种手段，这我就不清楚了，等大婶来补充。

一般压缩都经过混淆，如果你看到变量名都是A,B,C,D之类的无规则的命名，那就是被混淆过的，一般来说也很难阅读，就算你 还原了格式。

如果是没有混淆的，你可以试试用js的格式化工具来重新格式化一下的，比如：

var Inote = {}

Inote.JSTool = function(options) {

this.options = options || {}

}

Inote.JSTool.prototype = {

_name: 'Javascript工具',

_history: {

'v1.0': ['2011-01-18', 'javascript工具上线'],

'v1.1': ['2012-03-23', '增加混淆功能'],

'v1.2': ['2012-07-21', '升级美化功能引擎'],

'v1.3': ['2014-03-01', '升级解密功能，支持eval,window.eval,window["eval"]等的解密'],

'v1.4': ['2014-08-05', '升级混淆功能引擎'],

'v1.5': ['2014-08-09', '升级js压缩引擎'],

'v1.6': ['2015-04-11', '升级js混淆引擎']

},

options: {},

getName: function() {return this._name},

getHistory: function() {

return this._history}

}

var jstool = new Inote.JSTool()

一、压缩html和javascript：

我们用站长工具的JavaScript-HTML格式化工具，我们打开页面，我今天要压缩的文件js文件：common.js ，把js代码复制到到JavaScript/HTML格式化工具里面如下图所示：

点击下面的“普通压缩”和“加密压缩”按钮，经过我的精心测试，使用“加密压缩”，对文件压缩率是最好的，所以点击“加密压缩”，压缩后如图：

javascript代码压缩后，我们就把这些代码在复制到common.js文件里面，在吧这个文件上传到空间原来的位置，进行访问是否存在一些错误，如果没有什么问题说明压缩成功；

我的common.js 文件压缩前和压缩后的对比：

压缩前：

压缩后：

文件压缩前和压缩后确实有明确的减少，说明压缩确实减少文件的大小，

我们来测试文件压缩前和压缩后所有能的时间做对比(我是用火狐插件测试传输速度)：

压缩前所用时间：

压缩后所用时间：

压缩前所用时间是：125ms，压缩后所用时间：78ms ，文件压缩后给我们节省大量的时间，如果每个js都进行压缩，我们房子访问速度会更快的。

(注：html文件和javascript压缩原来一样的，当时压缩html要用到“普通压缩”按钮压缩)

二、压缩css文件：

我们打开站长工具的Css压缩/格式化工具页面，我要压缩的文件是五色旗保健品商城的css主文件style.css，首先我们打开站长工具的Css压缩/格式化工具页面 ，把style.css 代码放到Css压缩/格式化工具里面，如下图所示：

点击“压缩代码”按钮后，css代码压缩成功，如下图所示：

后边就是压缩后的css代码，你要不右边的代码复制到源文件style.css里面在上传到服务器空间里面，在访问一下网，看看网页样式有没有改变，如果有点变化就需要简单的调试一下，如果没有变样，说明你的css压缩成功了；

下面我们来看看styl.css文件压缩前和压缩后的大小和放在访问速度的大小：

文件大小对比：

压缩前：

压缩后：

压缩前30kb，压缩后23kb，明显的文件大小减小了

压缩前所用时间：

css压缩前的时间.jpg (7.36 KB, 下载次数: 0)

下载附件

css压缩前的时间.jpg

2013-11-2 00:35 上传

压缩后所用时间：

压缩前所用时间是：188ms，压缩后所用时间：93ms ，css压缩后明显的节省了95ms；

总结：一个大的网站可能会有很多的javascript和css，如果没有都进行压缩的话，一定会减少很多文件大小的，其实减少文件大少并不是很重要，最重要的是，文件容量减少了，能够快速的提高网站访问的速度，给用户带来好的体验，我们尽量的把文件压缩到最小，这样才有利于用户快速的打开网站，至此我的五色旗保健品商城优化后，我的每天的访问量也增加了很多。

个人建议从几个方面入手：

1、在服务器上启用GZIP压缩，添加css等静态文件等。

2、把主页、内容页的CSS分开写，公共部分单独用一个CSS，这样就可以减少CSS的大小。

3、优化CSS语法，并可以使用工具压缩，但要注意用多个浏览器测试。

4、将一些JS调用尽量放到网页底部

利用winrar软件

1、打开需要压缩的图片文件，选中vars.js后，右击，选择“添加到压缩文件”。

2、软件弹出，压缩文件的提示对话框，在该对话框中可以设置“压缩的文件名，和压缩的文件格式比如（RAR,RAR5,ZIP等）还可以选择其压缩方式”。成功设置后，点击“确定”。

3、在当前活动窗口可以看到，已经压缩成功了，并能查看。

我想你问的是不是类似UglifyJS之类的混淆过的JS代码？这种压缩通常会把变量、函数名之类的改成非常短的名称，因此这种压缩过的代码就难以识别了。

对于这种代码，推荐的思路是先看浏览器中是否有报错，然后根据错误来判断自己原始代码里可能出错的位置；如果没有报错，那也是断定大概的位置，然后Chrome里打开开发者工具里的Sources，打开自己的代码，用这个地方可以对代码进行重新排版：

当然，如果是uglify过的代码还是很难看，只能根据自己实际代码里的一些常量内容作为关键词在浏览器的代码里面搜自己可能的位置，然后加断点推测去调试。

上面的办法，都是在你对压缩JS这个过程没有控制的情况下，如果是你自己压缩JS代码，可以在压缩的时候同时生成sourcemap文件，一般是xxx.js.map文件。如果连同这个文件一起部署，那么在开发者工具中打开的时候，也可以看到最原始的代码了。这是最推荐的办法，调试起来也是最轻松的。