[转载]用UglifyJS2合并压缩混淆JS代码—

从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化网站，我们自己的Geek网站！！

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/nodejs-uglifyjs2-js/

nodejs-uglifyjs2

前言

做Web前端开发，总是要考虑页面的打开速度，如果文件数量越少、文件长度越小，就可以直接的提升网页的访问速度。

但在开发的时候，为了保证代码的可读性，我们写的程序文件会很多而且很大，这样就与部署的要求发生背离，通过UglifyJS2这个工具，我们可以在开发完成时，对代码文件进行合并、混淆、压缩等的操作，达到最优的访问性能。

UglifyJS介绍
UglifyJS2介绍
UglifyJS2安装
UglifyJS2命令操作
UglifyJS2的API使用

1. UglifyJS介绍

开始UglifyJS2介绍之前，我们先要说一下UglifyJS。UglifyJS是UglifyJS2的前身，是一个Javascript开发的通用的语法分析、代码压缩、代码优化的一个工具包。UglifyJS是基于Nodejs环境开发，支持CommonJS模块系统的任意的Javascript平台。

UglifyJS的实现主要分为2部分：

生成JS代码的抽象语法树(AST)，通过parse-js.js完成。
遍历AST语法树，做各种操作，比如自动缩进、缩短变量名、删除块括号{}、去空格、常量表达式、连续变量声明、语块合并、去掉无法访问的代码等，通过process.js完成。

2. UglifyJS2介绍

UglifyJS2是作者对UglifyJS的重写，是完全的重写，而不仅仅是升级。从UglifyJS2官司方网页介绍看，UglifyJS2把整个的JS压缩过程，做了更进一步的细化。

parser,用于实现抽象语言法树(AST)。
the code generator, 通过AST生成JS代码和source map。
compressor, 用于JS代码的压缩。
mangler, 用于减少局部变量的命名，用单字母替换。
scope analyzer, 用来判断变量定义范围和变量引用范围的工具。
tree walker, AST树遍历工具。
tree transformer, AST树转换工具。

上述所有的功能代码API是在6500行的左右，比其他的相同功能的开发包都要小。作者还提供了一个在线版本UglifyJS2的JS压缩工具，http://lisperator.net/uglifyjs/，大家可以测试一下。

3. UglifyJS2安装

系统环境：

win7 64bit
Nodejs:v0.10.5
Npm:1.2.19

UglifyJS2的安装非常简单，和Nodejs的其他包一样，全局安装使用如下命令。

npm install uglify-js -g

也可以通过github下载源代码安装。


git clone git://github.com/mishoo/UglifyJS2.git
cd UglifyJS2

我们在使用UglifyJS2的时候主要有2种方式，一种是通过命令行操作，对指定的JS文件进行压缩；另一种是通过程序的API调用，对文件或内存中的JS代码进行压缩。下面我将分两种情况进行介绍。

4. UglifyJS2命令操作

在全局安装好UglifyJS2以后，我们就可以使用UglifyJS2的命令了。

打印uglifyjs命令行的帮助信息，会打出很长一段说明。


D:\workspace\javascript\nodejs-uglifyJS2>uglifyjs -h
D:\toolkit\nodejs\\node.exe D:\toolkit\nodejs\node_modules\uglify-js\bin\uglifyjs input1.js [input2.js ...] [options]
Use a single dash to read input from the standard input.NOTE: by default there is no mangling/compression.
Without [options] it will simply parse input files and dump the AST
with whitespace and comments discarded.  To achieve compression and
mangling you need to use `-c` and `-m`.Options:--source-map                  Specify an output file where to generate sourcemap.                                    [string]--source-map-root             The path to the original source to be includedin the source map.                      [string]--source-map-url              The path to the source map to be added in //#sourceMappingURL.  Defaults to the value passedwith --source-map.                      [string]--source-map-include-sources  Pass this flag if you want to include thecontent of source files in the source map assourcesContent property.               [boolean]--in-source-map               Input source map, useful if you're compressingJS that was generated from some other originalcode.--screw-ie8                   Pass this flag if you don't care about fullcompliance with Internet Explorer 6-8 quirks(by default UglifyJS will try to be IE-proof).[boolean]--expr                        Parse a single expression, rather than aprogram (for parsing JSON)             [boolean]-p, --prefix                  Skip prefix for original filenames that appearin source maps. For example -p 3 will drop 3directories from file names and ensure they arerelative paths. You can also specify -prelative, which will make UglifyJS figure outitself the relative paths between originalsources, the source map and the output file.[string]-o, --output                  Output file (default STDOUT).-b, --beautify                Beautify output/specify output options.[string]-m, --mangle                  Mangle names/pass mangler options.      [string]-r, --reserved                Reserved names to exclude from mangling.-c, --compress                Enable compressor/pass compressor options. Passoptions like -choist_vars=false,if_return=false. Use -c withno argument to use the default compressionoptions.                                [string]-d, --define                  Global definitions                      [string]-e, --enclose                 Embed everything in a big function, with aconfigurable parameter/argument list.   [string]--comments                    Preserve copyright comments in the output. Bydefault this works like Google Closure, keepingJSDoc-style comments that contain "@license" or"@preserve". You can optionally pass one of thefollowing arguments to this flag:- "all" to keep all comments- a valid JS regexp (needs to start with aslash) to keep only comments that match.Note that currently not *all* comments can bekept when compression is on, because of deadcode removal or cascading statements intosequences.                              [string]--preamble                    Preamble to prepend to the output.  You can usethis to insert a comment, for example forlicensing information.  This will not beparsed, but the source map will adjust for itspresence.--stats                       Display operations run time on STDERR.[boolean]--acorn                       Use Acorn for parsing.                 [boolean]--spidermonkey                Assume input files are SpiderMonkey AST format(as JSON).                             [boolean]--self                        Build itself (UglifyJS2) as a library (implies--wrap=UglifyJS --export-all)          [boolean]--wrap                        Embed everything in a big function, making the“exports” and “global” variables available. Youneed to pass an argument to this option tospecify the name that your module will takewhen included in, say, a browser.       [string]--export-all                  Only used when --wrap, this tells UglifyJS toadd code to automatically export all globals.[boolean]--lint                        Display some scope warnings            [boolean]-v, --verbose                 Verbose                                [boolean]-V, --version                 Print version number and exit.         [boolean]--noerr                       Don't throw an error for unknown options in -c,-b or -m.                              [boolean]

对命令参数进行解释：

–source-map [string]，生成source map文件。
–source-map-root [string], 指定生成source map的源文件位置。
–source-map-url [string], 指定source map的网站访问地址。
–source-map-include-sources，设置源文件被包含到source map中。
–in-source-map，自定义source map，用于其他工具生成的source map。
–screw-ie8, 用于生成完全兼容IE6-8的代码。
–expr, 解析一个表达式或JSON。
-p, –prefix [string], 跳过原始文件名的前缀部分，用于指定源文件、source map和输出文件的相对路径。
-o, –output [string], 输出到文件。
-b, –beautify [string], 输出带格式化的文件。
-m, –mangle [string], 输出变量名替换后的文件。
-r, –reserved [string], 保留变量名，排除mangle过程。
-c, –compress [string], 输出压缩后的文件。
-d, –define [string], 全局定义。
-e, –enclose [string], 把所有代码合并到一个函数中，并提供一个可配置的参数列表。
–comments [string], 增加注释参数，如@license、@preserve。
–preamble [string], 增加注释描述。
–stats, 显示运行状态。
–acorn, 用Acorn做解析。
–spidermonkey, 解析SpiderMonkey格式的文件，如JSON。
–self, 把UglifyJS2做为依赖库一起打包。
–wrap, 把所有代码合并到一个函数中。
–export-all, 和–wrap一起使用，自动输出到全局环境。
–lint, 显示环境的异常信息。
-v, –verbose, 打印运行日志详细。
-V, –version, 打印版本号。
–noerr, 忽略错误命令行参数。

通过对命令行各种参数的解释，我们基本上知道了这些参数都是干什么的了，下面我就试一下。

写2个简单地JS文件，demo.js, main.js。


~ vi D:\workspace\javascript\nodejs-uglifyJS2\demo.js'use strict';function hello(name){if(name==='fens.me'){return "Long time no see, "+name;}return "hello "+name;
}console.log(hello('Conan'));
console.log(hello('fens.me'));

main.js


~ vi D:\workspace\javascript\nodejs-uglifyJS2\main.js'use strict';function book(){return [{head:'前言',page:'/views/tpl/book-r1/preface.html',active:false},{head:'目录',page:'/views/tpl/book-r1/contents.html',active:true},{head:'代码',page:'/views/tpl/book-r1/code.html',active:false},{head:'试读',page:'/views/tpl/book-r1/sample.html',active:false},{head:'勘误',page:'/views/tpl/book-r1/mistake.html',active:false}];
}var tab=function(arr,idx){for(var i=0;i<arr.length;i++){arr[i].active = (idx==i?true:false);}return arr;
}console.log(tab(book(),3));

接下来，用UglifyJS2命令进行操作，合并两个文件，对变量名用单字母替换，进行压缩，所有代码合并到一个函数，生成source map，指定source map来源网站。


D:\workspace\javascript\nodejs-uglifyJS2>uglifyjs main.js demo.js -o foo.min.js --source-map foo.min.js.map --source-map-root http://onbook.me -p 5 -c -m --wrap --export-all

在当前目录生成了2个新文件：foo.min.js.map, foo.min.js，分别查看这两个文件。

foo.min.js


!function(e,t){"use strict";function o(){return[{head:"前言",page:"/views/tpl/book-r1/preface.html",active:!1},{head:"目录",page:"/views/tpl/book-r1/contents.html",active:!0},{head:"代码",page:"/views/tpl/book-r1/code.html",active:!1},{head:"试读",page:"/views/tpl/book-r1/sample.html",active:!1},{head:"勘误",page:"/views/tpl/book-r1/mistake.html",active:!1}]}function n(e){return"fens.me"===e?"Long time no see, "+e:"hello "+e}t["true"]=e,console.log(a(o(),3));var a=function(e,t){for(var o=0;o<e.length;o++)e[o].active=t==o?!0:!1;return e};console.log(n("conan")),console.log(n("fens.me")),e.book="o,e.hello=n,e.tab=a}({},function(){return" this}());="" #="" sourcemappingurl="foo.min.js.map" <="" code="">

foo.min.js.map


{"version":3,"file":"foo.min.js","sources":["?"],"names":["exports","global","book","head","page","active","hello","name","console","log","tab","arr","idx","i","length","this"],"mappings":"CAAC,SAASA,EAASC,GAAnB,YAEA,SAASC,KACL,QACKC,KAAK,KAAKC,KAAK,kCAAkCC,QAAO,IACxDF,KAAK,KAAKC,KAAK,mCAAmCC,QAAO,IACzDF,KAAK,KAAKC,KAAK,+BAA+BC,QAAO,IACrDF,KAAK,KAAKC,KAAK,iCAAiCC,QAAO,IACvDF,KAAK,KAAKC,KAAK,kCAAkCC,QAAO,IANjE,QAASC,GAAMC,GACd,MAAU,YAAPA,EACK,qBAAqBA,EAEtB,SAASA,EANWN,EAAO,QAAUD,EAY7CQ,QAAQC,IAAIC,EAAIR,IAAO,GADvB,IAAIQ,GAAI,SAASC,EAAIC,GACpB,IAAI,GAAIC,GAAE,EAAEA,EAAEF,EAAIG,OAAOD,IACxBF,EAAIE,GAAGR,OAAUO,GAAKC,GAAE,GAAK,CAE9B,OAAOF,GAGRH,SAAQC,IAAIH,EAAM,UAClBE,QAAQC,IAAIH,EAAM,mBAjBTJ,UAAAI,QASLI,MAX8E,WAAW,MAAOK","sourceRoot":"http://onbook.me"}

通过一条简单的命令，就实现了对JS代码的合并、压缩等的操作，确实非常方便。

下载jquery-2.1.1.js文件自己压缩，并与官方的压缩文件进行对比。


# 下载
~ wget http://code.jquery.com/jquery-2.1.1.js
~ wget http://code.jquery.com/jquery-2.1.1.min.js# 压缩
~ uglifyjs jquery-2.1.1.js -o jquery-2.1.1.min.uglifyjs2.js -p 5 -c -m# 比较3个文件大小
~ ls -l
-rwx------  1 4294967295 mkpasswd 247351 Jul  6 16:26 jquery-2.1.1.js
-rwx------  1 4294967295 mkpasswd  84245 Jul  6 16:32 jquery-2.1.1.min.js
-rwx------  1 4294967295 mkpasswd  84113 Jul  6 16:28 jquery-2.1.1.min.uglifyjs2.js

我在本地压缩的文件jquery-2.1.1.min.uglifyjs2.js，与jquery官司网下载的压缩文件jquery-2.1.1.min.js大小差不多，都在84KB左右。

5. UglifyJS2的API使用

另一种使用方式是，把UglifyJS2包放到程序中，通过API对JS文件或JS代码进行压缩。首先，新建一个NPM项目文件package.json，然后在是下载UglifyJS2依赖包。

新建文件package.json


~ vi D:\workspace\javascript\nodejs-uglifyJS2\package.json{"name": "nodejs-uglifyjs2","version": "0.0.1","description": "uglifyjs2","author": "Conan Zhang <bsspirit@gmail.com>","dependencies": {}
}

下载UglifyJS2依赖包


D:\workspace\javascript\nodejs-uglifyJS2>npm install uglify-js --save
npm WARN package.json nodejs-uglifyjs2@0.0.1 No readme data!
npm http GET https://registry.npmjs.org/uglify-js
npm http 304 https://registry.npmjs.org/uglify-js
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/optimist
npm http GET https://registry.npmjs.org/uglify-to-browserify
npm http 304 https://registry.npmjs.org/uglify-to-browserify
npm http 304 https://registry.npmjs.org/optimist
npm http 304 https://registry.npmjs.org/async
npm http 304 https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/wordwrap
npm http GET https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/wordwrap
npm http 304 https://registry.npmjs.org/amdefine
uglify-js@2.4.14 node_modules\uglify-js
├── uglify-to-browserify@1.0.2
├── async@0.2.10
├── optimist@0.3.7 (wordwrap@0.0.2)
└── source-map@0.1.34 (amdefine@0.1.0)

我们新建一个文件uglify2.js，用于编写程序。


~ vi D:\workspace\javascript\nodejs-uglifyJS2\uglify2.js'use strict';var UglifyJS = require('uglify-js');//代码压缩
var result = UglifyJS.minify("var b = function () {};", {fromString: true});
console.log("\n===========================");
console.log(result);//文件压缩
result = UglifyJS.minify(["demo.js"]);
console.log("\n===========================");
console.log(result.code);//多文件压缩，指定source map和网站来源
result = UglifyJS.minify(["main.js","demo.js"],{outSourceMap: "out.js.map",sourceRoot: "http://onbook.me",mangle:true
});
console.log("\n===========================");
console.log(result.code);
console.log(result.map);

程序输出：


D:\workspace\javascript\nodejs-uglifyJS2>node uglify2.js===========================
{ code: 'var b=function(){};', map: 'null' }===========================
"use strict";function hello(e){return"fens.me"===e?"Long time no see, "+e:"hello "+e}var tab=function(e,o){for(var n=0;n
<e.length;n++)e[n].active=o==n?!0:!1;return e};console.log(hello("Conan")),console.log(hello("fens.me"));===========================
"use strict";function book(){return[{head:"前言",page:"/views/tpl/book-r1/preface.html",active:!1},{head:"目录",page:"/v
iews/tpl/book-r1/contents.html",active:!0},{head:"代码",page:"/views/tpl/book-r1/code.html",active:!1},{head:"试读",page
:"/views/tpl/book-r1/sample.html",active:!1},{head:"勘误",page:"/views/tpl/book-r1/mistake.html",active:!1}]}function he
llo(e){return"fens.me"===e?"Long time no see, "+e:"hello "+e}console.log(tab(book(),3));var tab=function(e,o){for(var t=
0;t<e.length;t++)e[t].active=o==t?!0:!1;return e};console.log(hello("Conan")),console.log(hello("fens.me"));
//# sourceMappingURL=out.js.map
{"version":3,"file":"out.js.map","sources":["main.js","demo.js"],"names":["book","head","page","active","hello","name","
console","log","tab","arr","idx","i","length"],"mappings":"AAAA,YAEA,SAASA,QACL,QACKC,KAAK,KAAKC,KAAK,kCAAkCC,QAAO,IACxD
F,KAAK,KAAKC,KAAK,mCAAmCC,QAAO,IACzDF,KAAK,KAAKC,KAAK,+BAA+BC,QAAO,IACrDF,KAAK,KAAKC,KAAK,iCAAiCC,QAAO,IACvDF,KAAK,KAAKC
,KAAK,kCAAkCC,QAAO,ICNjE,QAASC,OAAMC,GACd,MAAU,YAAPA,EACK,qBAAqBA,EAEtB,SAASA,EDMjBC,QAAQC,IAAIC,IAAIR,OAAO,GCDvB,IAAIQ,
KAAI,SAASC,EAAIC,GACpB,IAAI,GAAIC,GAAE,EAAEA,EAAEF,EAAIG,OAAOD,IACxBF,EAAIE,GAAGR,OAAUO,GAAKC,GAAE,GAAK,CAE9B,OAAOF,GAGR
H,SAAQC,IAAIH,MAAM,UAClBE,QAAQC,IAAIH,MAAM","sourceRoot":"http://onbook.me"}

我们看到用操作uglifyJS2包的API，还是挺简单的，如果对AST树有遍历需求，API提供了非常实用的函数支持。

不过我在测试API过程中,发现有2个问题。

通过API设置mangle选项，但输出没有效果。
没有--wrap和--export-all 命令行参数对应的API。

通过本文的介绍，我们基本上了解了uglifyJS2包的功能和使用方法，然后就可以放心大胆地对JS代码进行压缩了。在实际的前端项目中，一般不用自己配置uglifyJS2包，而是通过grunt来调用uglifyJS2进行代码发布前的压缩，关于grunt使用，请参考文章：grunt让Nodejs规范起来。

转载请注明出处：
http://blog.fens.me/nodejs-uglifyjs2-js/

转载于:https://www.cnblogs.com/sunws/p/4783375.html