uglifyjs压缩JS

Javascript vincent 2474℃ 0评论

介绍:

 
UglifyJS是个JavaScript压缩器,效果和Google Closure Compiler相比有过之而无不及。对于现代化的JavaScript压缩器来说,简单的去除空白和压缩局部变量是远远不够的,同时需要理解代码的语义,将其替换成提及更小的形式(Uglify的说明页上有许多描述)。这显然需要一个JavaScript解析器。UglifyJS基于NodeJS开发,不过可以在各种支持CommonJS模块系统的JavaScript引擎/平台上运行。如果没有CommonJS,也只需将exports相关的代码去掉即可。
 
JavaScript解析器的作用自然是将JavaScript代码分解成AST,然后根据AST便可以做到许多有趣的事情。相同的AST可以在内存中有不同的表现形式,例如之前提到我不太喜欢Jscex目前使用的旧版Narcissus,一个重要的原因便是它的AST结构不够友好(最新的Narcissus倒不错)。此外,虽然它提供了一些高级功能,例如标注了每个元素在源代码中的位置,这样使用者就可以直接根据getSource方法获得它对应的源代码——只可惜经试验这个功能有bug,这迫使我还得遍历完整的AST。
 
UglifyJS的JavaScript分词器和解析器存放在源代码的parse-js.js文件中,移植于parse-js项目,后者是一个用Common Lisp实现的类库。现在您应该可以猜到它输出的AST是什么表现形式了吧。没错,就是个“表”,用JavaScript来表示,就是个数组套数组。我写了点简单的代码对其进行格式化输出,您可以在这里简单尝试一下UglifyJS的解析器。这个输出虽然简单,但对于Jscex来说也已经完全够用了。
 

一、node相关的固定流程

 
凡事提及node应用,无非免不了类似下面的流程:
 

  1. 安装node
  2. 安装nmpnpm
  3. 安装当前应用 – uglifyjs

 
uglifyjs安装如下code:
 

1
npm install uglify-js -g

 
一个回车,于是啪啪啪,就有下图所示的东东:
 
1
 
于是,下面就可以压缩JS了。
 

二、uglifyjs JS压缩

 
uglifyjs压缩有很多的参数,详见其github托管项目。其中有一些可选参数,如下部分截图:
 
2
 
下面演示如何使用uglifyjs压缩JS.
 
我的桌面上有个名叫formini的文件夹,我会把要压缩的文件放在其中,然后再压缩。现在,我从内部拷贝了一个名叫inet.js的JS文件到这个文件夹中,然后:
 
1、打开cmd, 这个不会我就没有办法了
 
2、目录引到formini文件夹,cd 然后什么什么的,这个不会我也没有办法了
 
3、如下代码:
 

1
uglifyjs inet.js -o inet-min.js

 
4、再运行如下代码,测试-m可选参数:
 

1
uglifyjs inet.js -m -o inet.min.js

 
如下截图:
 
3
 
现在就是看结果了,见下截图:
 
4
 
90K的是没有运行-m参数的,70K(69.4)的是运行的。-m参数所以就是把变量名变成a, b, c, d, …
 
从实际应用角度讲,上线的JS显然要压缩变量,减小一定的文件尺寸。
 
跟YUICompressor相比,大小只小了0.6K, 不过网上反映uglifyjs相比YUI压缩很明显,我这里的大小仅优化了0.6÷174=0.345%,这只能说明我写的代码还算比较优化
 
5
 

三、uglifyjs压缩批处理

我们不可能每次都打开cmd去键入压缩执行代码,容易写错不说(如上面那个结果图),还耗时,想想都会让人疯掉。懒人有懒法,花了点功夫,折腾了一个批处理文件,以后,想要压缩JS,只要双击运行这个.bat文件就可以了!完整代码如下:
 

1
2
3
4
5
6
7
8
9
10
11
@echo off
:: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS
SET JSFOLDER=C:\Users\Administrator\Desktop\formini
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

 
新建一个txt文档,任意命名,将上面的代码粘贴进去,修改JSFOLDER后面的文件夹目录为你自己的,然后把.txt后缀改成.bat就可以啦!然后双击就可以批量使用uglifyjs压缩JS文件啦!
 

四、结束语

 
对于自己来讲,本文内容算作备忘。目前而言,我还是uglifyjs不能压缩CSS文件。不过嘛,了解下总会有帮助的。行文匆忙,文中要是有表述不准确的地方欢迎指正。



转载请注明:web翎云阁 » uglifyjs压缩JS

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量