使用 UglifyJS 对 JavaScript 进行压缩

glifyJS 以其高效的Javascript压缩器而知名. UglifyJS 默认的压缩设置很好用,但还没有发挥出全部潜力. 还有许多的附加指令可以用于压缩选项,包括:

  • sequences — 使用逗号操作符加入连续的简单语句
  • properties — 使用点好重写属性访问,例如foo["bar"] → foo.bar
  • dead_code — 移除不可达的代码
  • drop_debugger — 移除调试器和调试语句
  • unsafe (default: false) — 应用“不安全”的转换(下面会讨论到)
  • conditionals — 为if -s 和条件表达式应用优化
  • comparisons — 针对二进制节点应用某些特定的优化,例如:!(a <= b) → a > b (只在不安全时), 尝试去否认二进制节点,例如.a = !b && !c && !d && !e → a=!(b||c||d||e) 等等.
  • evaluate — 尝试去计算常量表达式
  • booleans — 多种针对布尔上下文的优化,例如 !!a ? b : c → a ? b : c
  • loops — 当我们可以静态的判断条件的取值时,针对do,while和for循环的优化
  • unused — 去掉没有被引用过的函数和变量
  • hoist_funs — 提升函数声明
  • hoist_vars (默认值: false) — 提升var声明 (因为一般看起会增加输出的大小,所以它默认是false的)
  • if_return — 这对 if/return 和 if/continue 的优化
  • join_vars —加入连续的var语句
  • cascade — 对于 sequences, transform x, x into xandx = something(), x into x = something() 的一些小优化
  • warnings — 当去掉不可达代码或者没有被使用的声明等东西时,显示警告.
  • negate_iife — 在返回值被丢弃的地方否认 "即刻调用函数表达式", 来避免代码生成器会插入的括号.
  • pure_getters — 默认为false。如果你传入true, UglifyJS 会假定对象属性访问(例如. foo.bar 或者 foo["bar"]) 不会有任何副作用.
  • pure_funcs — 默认为null. 你可以传入一个名称的数组,而UglifyJs将会假定那些函数不会产生副作用. 危险: 如果名称在作用范围内被重新定义了就不会检查. 这里有一个示例场景, 例如 var q = Math.floor(a/b). 如果变量q没有在别的地方使用, UglifyJS 会去掉它,但是仍然会保留 Math.floor(a/b), 而不清楚它是做什么用的. 你可以传入 pure_funcs: [ 'Math.floor' ] 来让其知道这个函数不会产生任何副作用, 在这种情况下,整个语句会被丢弃. 当前的实现会增加一些开销(压缩会变慢).
  • drop_console — 默认为false. 传入true会丢弃对console.函数的调用.

因此可以通过 修改布尔值 , 移除不必要var语句,砍掉不可达代码以及其它更多的办法,UglifyJS把你的js文件中多余的东西就挤了出来,而不只是做一下简单的压缩而已. 这里有一个使用NodeJS API的场景示例:

var UglifyJS = require('uglify-js');
var fs = require('fs');

var result = UglifyJS.minify('site.js', {
    mangle: true,
    compress: {
        sequences: true,
        dead_code: true,
        conditionals: true,
        booleans: true,
        unused: true,
        if_return: true,
        join_vars: true,
        drop_console: true
    }
});

fs.writeFileSync('site.min.js', result.code);

你也可以通过命令行传入那些压缩值.本文之意义不在开创,而更多的是去提升那种运用起来很简便的意识 —compress 并不会对任何潜在的方面都进行最小化优化. 如果你想要最小化压缩你的js,那就全力以赴吧!

时间: 2024-09-11 22:25:20

使用 UglifyJS 对 JavaScript 进行压缩的相关文章

javascript怎样压缩文件?

问题描述 javascript怎样压缩文件? 为了减少http请求,我把js代码压缩.现在问题来了,怎样才能把所有脚本都压缩成一份文件,但能保证一些id命名不冲突. 解决方案 如果是 Asp.Net.MVC 自带这种功能 配置一下即可. 其他不是太了解 可能需要自己找工具压缩 有些服务器 支持gzip压缩. Gzip的官方网址为: http://www.gnu.org/software/gzip/ 解决方案二: 这个需要你自己代码实现命名空间等来避免

利用YaHoo YUI实现Javascript CSS 压缩

网站优化时,往往需要对js文件,css文件进行压缩,以达到减少网络传输数据,减少网页加载时间:利用YaHoo的YUI可以实现Javascript,CSS,压缩,包括在线的js压缩和程序压缩,发现C#也是支持的,所以就写了个js和css压缩的工具,包括单文本压缩和文件批量压缩,如下图所示: 源代码下载

JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具_javascript技巧

昨天分享了 http://jscompress.sinaapp.com/ 这个小工具后,发现大家还是很喜爱的. 因此今天我把它json化了.用json传输数据,也开放了api    本工具所有的功能实现都是由 http://jscompress.sinaapp.com/api 处理.(包括现在可以使用的这个在线压缩) 所有的数据交换均由 HTTP POST 输入处理后由 json 作为数据输出格式.  API参数 : http://jscompress.sinaapp.com/api?get={

JavaScript 在线压缩和格式化收藏_javascript技巧

以前在找到过压缩 Javascript 代码的程序,一直在用,感觉效果不错.http://javascriptcompressor.com/在线压缩 Javascript 源码只是把空格.换行.多余的注释等等清理掉,尤其选中 Shrink variables 时,会把长的变量名缩减成单个字母的变量名,压缩比通常能达到50%甚至更小.现在 AJAX 大行其道,JavaScript 文件越来越大,用此压缩应该能减轻不少流量负担.而且缩减变量名后,程序并没有加密,但会使程序变得很难看懂,一定程度上也能

UglifyJS有个超赞的JavaScript解析器

我一直在为Jscex寻找好用的JavaScript解析器,之前我用的是Narcissus,也写过相关文章.不过可惜的是,Narcissus使用了SpiderMonkey的扩展,因此它并不是用ECMAScript 3实现的,无法在IE 8等浏览器中使用.目前Jscex使用的是NarrativeJS中旧版的Narcissus,但是我并不喜欢它输出的AST结构,使用中也发现高级功能里的一些bug,有些食之无味弃之可惜的感觉,而改写新版Narcissus又必须大动干戈.最近我接触到了UglifyJS,发

使用GruntJS链接与压缩多个JavaScript文件过程详解

怎么把多个JS文件搞成一个啊,GruntJS – JavaScript多文件编译,风格检查,链接与压缩神器,使用过程如下,有需要的朋友可以参考下,希望对大家有所帮助   自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想把这些多个JS文件变成 一个JS文件发布出去,于是我的问题来啦,怎么把这些JS文件搞成一个啊,群里有个 朋友告诉我,GruntJS – JavaScript多文件编译,风格检查,链接与压缩

javascript教程:关于if语句优化的方法

文章简介:UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度? UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能

javascript关于if语句优化的方法

UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 if (foo) bar(); else baz(); ==> foo?bar():baz(); if (!foo) bar(); else baz(); ==> foo?ba

javascript教程:关于if简写语句优化的方法_javascript技巧

UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 if (foo) bar(); else baz(); ==> foo?bar():baz();if (!foo) bar(); else baz(); ==> foo?baz