初识UglifyJS

JS代码压缩在前端项目优化中是用的比较多的方法，特别是对于大量使用JS的Web应用，代码压缩可以是极大的减少代码的大小，加快传输效率，大大提升用户浏览的体验感

最近刚好学习了压缩JS文件的方法--UglifyJS，据说其不仅能压缩JS代码，还能优化JS，是基于node的

而且在所有的压缩工具中，UglifyJS在不改变JS语义的前提下可以提供最好的压缩率

只需要安装node，然后使用npm安装UglifyJS类库

下面我们可以看看具体的实例操作

全局安装

npm install uglify-js -g

命令行简单压缩JS文件

首先创建一个文件夹，将要压缩的js文件放入文件夹中，然后压缩

如下，我在demo_uglify项目文件夹中的src文件下压缩compile.js文件，将压缩文件存放到build文件夹下

uglifyjs src/compile.js -o build/compile-min.js

再运行如下代码，测试-m可选参数

uglifyjs src/compile.js -m -o  build/compile.min.js

如下截图

38k的是没有运行-m参数的，29k的是运行的

-m参数就是把变量名变成a，b，c，...

node实现批量压缩js函数

上面是使用的一个简单命令来压缩一个JS文件，接下来以编程的方式来压缩JS文件

即写一个.js文件，使用node命令执行该文件，.js中的代码需要调用UglifyJS的接口函数来执行压缩任务

所以需要先到github下载UglifyJS

 git clone git://github.com/mishoo/UglifyJS.git

解压后其目录结构如下

然后将uglify-js.js和lib目录拷贝到前面创建的项目中

控制台输出压缩后代码

在demo_uglify的src文件中新建一个index.js，内容如下

取fs模块，fs模块是node的文件模块；接着取UglifyJS的两个模块；然后就是UglifyJS压缩流程

function buildOne (fileIn, fileOut) {
  var origCode = fs.readFileSync(fileIn, 'utf8')
  var ast = jsp.parse(origCode)  
  ast = pro.ast_mangle(ast)  
  ast = pro.ast_squeeze(ast)  

  var finalCode = pro.gen_code(ast)

  fs.writeFileSync(fileOut, finalCode, 'utf8')
}

buildOne('src/index.js', 'build/index-min.js')

最后在命令行中执行

node index.js

单个文件读取压缩输出

通过在上述测试，通过node环境可以输出压缩后的代码，那也可以通过函数直接读取源文件，压缩后输出到指定的目录

在demo_uglify的src文件中新建一个test.js，写入下列代码，将src下的index.js压缩输出到build文件中

函数封装

function buildOne (fileIn, fileOut) {
  var origCode = fs.readFileSync(fileIn, 'utf8')
  var ast = jsp.parse(origCode)  
  ast = pro.ast_mangle(ast)  
  ast = pro.ast_squeeze(ast)  

  var finalCode = pro.gen_code(ast)

  fs.writeFileSync(fileOut, finalCode, 'utf8')
}

buildOne('src/index.js', 'build/index-min.js')

node test.js

这时就会在demo_uglify的build目录中生成一个index-min.js

批量读取文件压缩输出

在上面单个文件读取压缩的代码中稍做修改，如下

function buildAll (fileIn, fileOut) {
    if (fileIn.length > 0) {
        var finalCode = []
        var origCode = ''
        var ast = ''
        
        for (var i = 0, len = fileIn.length; i < len; i++) {
            origCode = fs.readFileSync(fileIn[i], 'utf8')
            ast = jsp.parse(origCode)
            ast = pro.ast_mangle(ast)
            ast = pro.ast_squeeze(ast)

            finalCode.push(pro.gen_code(ast), ';')
        }
    }
    fs.writeFileSync(fileOut, finalCode, 'utf8')
}

buildAll(['index.js', 'compile.js'], 'build.min.js')

node test.js

这时会在demo_uglify目录中生成一个build.min.js

UglifyJS2

UglifyJS2是UglifyJS的重写，我们知道UglifyJS是JS开发通用的语法分析、代码压缩、代码优化的一个工具包。而对比UglifyJS，UglifyJS2则是把整个JS压缩过程，做了更进一步的细化

安装

npm install uglify-js -g

或者通过github下载源代码安装

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

命令操作

用UglifyJS2命令进行操作，合并两个文件，对变量名用字母替换，进行压缩，所有代码合并到一个函数

uglify_demo完整项目

运用UglifyJS压缩JS