js文件压缩原因和压缩原理

Javascript 压缩器是一个在线压缩和混淆 Javascript 代码的开发辅助工具,能够帮助开发人员减小 JS 文件大小、避免网站上的 Javascript 源代码被他人窥视和窃取。

  • 压缩:删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格,从而压缩 JS 文件大小。
  • 混淆:经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 Javascript 源代码。


网站上线的时候js文件都是经过压缩的。压缩js文件可以减少文件体积方便传输,还可以让别人看不懂。 
简单的压缩一般是:删除注释和空白符,替换变量名。更激进点的做法还包括:删除无用代码,内联函数,等价语句替换等。 
有些开发者出于保护代码的原因还可能会对代码进行混淆处理。这样混淆压缩后的代码基本不是人看的。

要想文件更快地下载完成,最直接的办法就是减小文件的体积,也就是把体积“压缩”了,对于javascript文件同样如此。

javascript文件与CSS文件类似,但他们在缩减体积方面差别很大。

对CSS进行压缩,可能能缩小的体积微乎其微,因为css中的选择器是万万不可更改的,但javascript不一样,JS中只需要保留可供调用的变量名字不变,其余的变量都可随意命名。

比如压缩版的jQuery,就是个很好的例子。

javascript文件压缩的原理

第一个当然就是去掉注释了。

另外就是跟CSS压缩相同的去掉换行符,空格什么的。

JAVASCRIPT中有几种变量形式,如变量,函数名,函数的参数等,通常我们在手写JS代码的时候,为了便于理解,我们都会给这些变量名以直观易懂的字符串,如:var title=”javascript”;这个习惯是值得推崇的。

但是,这些变量对于用户理解有帮助,对于计算机却没什么影响,如果我们把前面的句子变成:var a=”javascript”;对电脑来讲是一样的。

通常深度压缩JS都必须要做的一步就是尽量地缩短变量名,因为一份体积巨大的JS代码,其中的变量名会占去不少空间。

26个单字母,几乎就可以把一个函数中所有的参数都写完,所以我们经常在压缩版的JS代码中发现a,b,c,d之类的连续变量。

另外,Javascript有个特性就是不同作用域的变量名可以任意重复,所以此函数中有a,b,c,d,其他函数也可以有。这样短又大量重复的变量可以让人索云里雾里不知所云,也变相的起到了加密JS代码的作用.

压缩javascript必须要注意的

原理就在这儿了,但开始压缩的时候必须要做到以下几点:

  1. 压缩前的代码格式要标准。因为去掉换行与空格时,所有语句就变成一行了,如果你的代码有瑕疵(比如某行少了个分号),那就会导致整个文件报错。当然,现在有的压缩工具已经比较智能了。
  2. 备份原文件
  3. 压缩很可能不会一次成功,一般要多试,多改

原理很简单——当然,其中也有复杂的技巧,但原理基本就是如此,但我们如果手动进行压缩工作无疑烦恼大大的,所以就有前辈开发了专门的工具来进行这个工作。

javascript的压缩工具

这说起来就多了去了。下面简单列几个出名的:

雅虎的http://refresh-sf.com/yui/ YUI Compressor 在线的。

Google的在线版本 Javascript Closure Compiler,也有下载版点此下载 Javascript Closure Compiler

其余的可以自行google搜索,因为我也没压缩过几次,所以只有试试了。

 

 

本文链接: javascript压缩的原理及工具.转载请保留.


  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
代码压缩(minification)是指通过删除不必要的字符和空格,缩短变量和函数名,并进行其他优化,以减小 JavaScript 代码文件的大小。这有助于提高加载速度并减少带宽使用。 代码压缩原理包括以下几个步骤: 1. 移除不必要的空格和换行符:删除代码中的多余空格、制表符和换行符等,以减小文件大小。 2. 缩短变量和函数名:将变量和函数名替换为更短的名称。这可以通过使用短、无意义的字符来实现,例如使用单个字母或数字来替代长名称。这样可以减小文件大小并提高执行速度。 3. 删除注释:将代码中的注释删除,因为在生产环境中不需要注释。这可以进一步减小文件大小。 4. 优化代码结构:对代码进行一些结构上的优化,例如删除不必要的括号、简化条件表达式等。这有助于减小文件大小并提高代码的可读性。 5. 压缩字符串:将字符串中的重复字符替换为更短的表示形式。例如,将多个相同的字符串替换为一个变量,并在使用时引用该变量。 6. 其他优化:根据具体情况,还可以进行其他优化措施,例如将常量计算为字面量、合并重复的代码片段等。 代码压缩通常使用专门的工具或构建工具来自动完成。流行的工具包括UglifyJS、Terser等。这些工具可以根据特定的配置选项进行代码压缩,并生成优化后的代码文件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值