编者按:现在开发Web应用程序时,尤其是使用了无刷新技术的应用程序,JavaScript文件成为一种必不可少的组成部分。大量的函数和代码被转移到客户端脚本文件中,使得脚本文件的体积急剧膨胀。
大家知道,我们在编写JavaScript的时候,通常为了是代码更具可读性,因此增加了很多空格和tab控制符以及很多注释。但是,对应脚本解释器来讲,这些是没有什么实际意义的,而这些字符缺占据了总体积的1/3以上甚至超过1半,是时候该对脚本文件进行减肥了。
在笔者的工作中,也经常遇到一些脚本的处理,为了使程序获得更好的性能,减少网络传输数据,减轻服务器压力,需要对脚本进行一个处理。这里我以我所使用的文本编辑器EmEditor来说明如何为JavaScript脚本文件进行压缩,这个过程主要是靠EmEditor的宏功能实现的,宏是一个很常用的技术,很多编辑器和集成开发工具IDE都支持的。
我们首先打开要压缩的JS文件,然后点击宏(Macros)-》选择可以压缩的宏-》运行,就可以把大部分无用字符删除了。
具有压缩功能的宏(EmEditor使用)内容如下,请保存为.jsee文件,或者直接点击这里下载。
//
去除递进
document.selection.Replace(
"
^\\s*\\t*
"
,
""
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
去除注释
document.selection.Replace(
"
://
"
,
"
:$$$
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
//.*
"
,
""
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
document.selection.Replace(
"
:$$$
"
,
"
://
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
//
去除空行
document.selection.Replace(
"
\\n\\n
"
,
"
\\n
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
\\n\\n
"
,
"
\\n
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
\\n\\n
"
,
"
\\n
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
//
去除换行
document.selection.Replace(
"
;\\s*\\t*\\n
"
,
"
;
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
document.selection.Replace(
"
\\}\\s*\\t*\\n
"
,
"
\\}
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
document.selection.Replace(
"
\\{\\s*\\t*\\n
"
,
"
\\{
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
document.selection.Replace(
"
\\s*\\t*\\n\\{
"
,
"
\\{
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
document.selection.Replace(
"
\\s*\\t*\\n\\}
"
,
"
\\}
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
document.selection.Replace(
"
\\\\\\s*\\t*\\n
"
,
""
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
document.selection.Replace(
"
else\\s*\\t*\\n
"
,
"
else
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord
|
eeFindReplaceRegExp);
//
去除空格
document.selection.Replace(
"
==
"
,
"
==
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
+=
"
,
"
+=
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
-=
"
,
"
-=
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
*=
"
,
"
*=
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
/=
"
,
"
/=
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
!=
"
,
"
!=
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
>
"
,
"
>
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
<
"
,
"
<
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
+
"
,
"
+
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
-
"
,
"
-
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
*
"
,
"
*
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord );
document.selection.Replace(
"
&&
"
,
"
&&
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord);
document.selection.Replace(
"
||
"
,
"
||
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord);
document.selection.Replace(
"
=
"
,
"
=
"
,eeFindNext
|
eeFindReplaceCase
|
eeFindReplaceEscSeq
|
eeReplaceAll
|
eeFindReplaceOnlyWord);
不幸的是,压缩后的代码由于没有了递进、空格等字符,变得没有任何可读性,所以这里推荐你在压缩前备份一份,只有在发布版本中采用压缩脚本,正常开发时仍然使用具有格式、注释的代码。
事实上,如果您使用了微软最新的ASP.NET Ajax扩展的话,会注意到微软这个Ajax框架的客户端类库同样提供了两个版本,压缩前和压缩后的,通过配置脚本管理器的属性来输出debug或者release模式的脚本。这两个脚本的体积差别超过1倍,debug是3vxxk,而release版本由于采用了混淆和字符删除,被压缩到100k左右!
本文的例子仅仅进行了压缩,没有混淆,通常混淆也是压缩代码的一个有效手段,方法名都被重命名为a,b,c等这样的名字,大大减少了空间,最后要提醒大家的是,代码压缩是最后的一个优化手段,能够得到的优化是非常有限的,而采用更好的结构,增加重用代码,才是王道。