背景

前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件。

如今主流的Js代码压缩工具主要有:

1)Uglify http://lisperator.net/uglifyjs/

2)YUI Compressor http://developer.yahoo.com/yui/compressor/

3)Google Closure Compiler https://developers.google.com/closure/compiler/

自从jQuery等流行库使用Uglify作为压缩工具,Uglify慢慢流行起来,如今也是很多开发工具(框架)默认使用的Js压缩工具,比如百度的Fis以及绝大部分的Yeoman脚手架等。YUI Compressor也逐渐被Uglify所替代。

Uglify的压缩策略较为安全,所以不会对源代码进行大幅度的改造,压缩相对较为保守。所以将通过Uglify压缩后的代码格式化之后,还是大致能看明白。

而Google Closure Compiler(以下简称GCC)的高级压缩则是完全重新改造JS代码,去除代码中一些可以直接输出运行结果的逻辑,去除根根本不会执行到的JS代码,从而压缩效率会更高。

GCC三种压缩模式

GCC提供三种压缩模式:

1)Whitespace only
2)Simple
3)Advanced

我们以这段简单的代码为例

function sayHello(name) {
alert('Hello, ' + name);
}
sayHello('binnng');

分别使用这三种压缩模式进行压缩:

Whitespace only

function sayHello(name){alert("Hello, "+name)}sayHello("binnng");

发现只是简单的去除空格换行注释。

Simple

function sayHello(a){alert("Hello, "+a)}sayHello("binnng");

Whitespace only要高端一点,在其基础上,还对局部变量的变量名进行缩短。这也是其他压缩工具所使用的压缩方式,如Uglify等,也是最为主流的压缩方式。比较安全。

Advanced

alert("Hello, binnng");

会发现,Advanced级别的压缩改变(破坏)了原有代码结构,直接输出了代码最终运行结果,可见的确是分析重写破坏,但是对代码压缩做到了极致,极大的减少了代码量。

注意的地方

正因为GCC是这样的破坏性压缩工具,所以使用起来得异常小心,稍微不规范可能就会引起压缩报错或者压缩成功后却不能正常运行。那么,如果要使用Advanced级别压缩,要注意哪些呢?

以下所有未指名级别的GCC压缩均为Advanced级别。

GCC会对变量的属性名也进行压缩

var data = {
user: "binnng",
age: "18"
}; if ("user" in data) {
alert(data.age);
}

经过Uglify压缩:

var data={user:"binnng",age:"18"};"user"in data&&alert(data.age);

经过GCC压缩:

var a={b:"binnng",a:"18"};"user"in a&&alert(a.a);

会发现GCC压缩时,将变量的属性名也缩短,代码量减少了,但是却带来了问题,会发现以上GCC压缩后的代码运行其实是不正确的。因为属性名缩短改变后,data已经不再拥有名为user的属性了。

那如何解决呢?

var data = {
user: "binnng",
age: "18"
}; if (data.user) {
alert(data.age);
}

这时候再经过GCC压缩:

alert("18");

直接输出了正确的结果。

如果不想让GCC压缩属性名,比如在Ajax请求发送给后端接口的时候,可以将属性名用双引号包裹:

var data = {
"user": "binnng",
"age": "18"
}; var ajax = function(url, data, callback) {
(new window.XMLHttpRequest()).send(data);
// ...
}; ajax("//baidu.com", data, function(res) {console.log(res)});

这样经过GCC压缩后:

(new window.XMLHttpRequest).send({user:"binnng",age:"18"});

原封不动的保留了后端需要的参数名。

全局变量要显式挂载在window下

var foo = "1234";
alert(widnow.foo);

这时候,经过GCC压缩后:

alert(window.a);

有点莫名其妙。。因为在GCC中,不再认可隐式全局变量,所以上面的代码中在GCC眼里,foo是没有挂载到window下的,所以下文的window.foo其实是未定义的。

要解决这个问题,必须将foo显式挂载到window下:

window.foo = "1234";
alert(widnow.foo);

这样经过压缩后:

window.a="1234";alert(widnow.a);

这时候可能就会疑问,为何不直接压缩成alert("1234")呢?这是因为GCC不会去除挂载在window下的变量

必要时导出变量函数等

window.btnClick = function() {
alert("clicked");
};

以上的代码经过压缩后成为:

window.a=function(){alert("clicked")};

此时,如果HTML中存在如下代码,就会报错。

<a onclick="btnClick()">点我</a>

这时候就需要导出函数

window["btnClick"] = function() {
alert("clicked");
};

用双引号包裹后,btnClick就保留了下来。在构造函数中,尤其需要注意导出,例如:

var Animal = function(name) {
this.name = name;
};
Animal.prototype.eat = function() {
alert(this.name + " is eating!");
};

以上的代码经过GCC压缩后,什么都没剩下,因为GCC认为,代码中的代码都没有执行,属于dead code。既然这么写了,那肯定是需要它,提供给别人外部调用什么的,这时候就需要这么导出:

var Animal = function(name) {
this.name = name;
};
Animal.prototype.eat = function() {
alert(this.name + " is eating!");
}; window["Animal"] = Animal;
Animal.prototype["eat"]= Animal.prototype.eat;

经过压缩后:

function a(b){this.name=b}a.prototype.a=function(){alert(this.name+" is eating!")};window.Animal=a;a.prototype.eat=a.prototype.a;

这时候,Animal这个方法成功的保留了下来。

还有,在使用JSONP方式获取服务端数据的时候,也一定要导出callback方法名:

var jsonpCb = function() {
//...
}; getScript("/api/data?callback=jsonpCb"); // 导出,否则jsonpCb会被压缩掉不能被识别
window["jsonpCb"] = jsonpCb;

所有业务代码合并压缩

a.js

var getName = function() {return "binnng"};

b.js

alert(getName());

如果单独压缩a.jsb.js就会出问题,结果会是a.js中什么都没有,b.jsgetName方法未定义(undefined)。正确的做法则是,两者合并再进行压缩。

结语

GCC的高级压缩(Advanced)非常强大,对代码压缩做到了极致,但是其对代码书写要求也比较严格,并且破坏性压缩也被很多开发者所诟病。

但是稍加注意,严格规范自身代码风格,了解GCC压缩方式原理,利用好GCC高级压缩,一定会大大减少JS的体积,从而大幅度的提升前端代码性能。

另外,GCC像其他压缩工具一样,也有GruntGulp构建组件,可以很方便的去使用它。

参考

https://developers.google.com/closure/compiler/ (需FQ)

使用Google Closure Compiler高级压缩Javascript代码的更多相关文章

  1. 使用Google Closure Compiler高级压缩Javascript代码注意的几个地方

    介绍 GCC(Google Closure Compiler)是由谷歌发布的Js代码压缩编译工具.它可以做到分析Js的代码,移除不需要的代码(dead code),并且去重写它,最后再进行压缩. 三种 ...

  2. Google Closure Compiler高级压缩混淆Javascript代码

    一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...

  3. 使用Google Closure Compiler全力压缩代码(转)

    JavaScript压缩代码的重要性不言而喻,如今的压缩工具也有不少,例如YUI Compressor,Google Closure Compiler,以及现在比较红火的UglifyJS.Uglify ...

  4. Google Closure Compiler 高级模式及更多思考(转)

    前言 Google Closure Compiler 是 Google Closure Tools 的一员,在 2009 年底被 Google 释出,早先,有 玉伯 的 Closure Compile ...

  5. JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法

    网上搜索了,目前主流的Js代码压缩工具主要有Uglify.YUI Compressor.Google Closure Compiler,简单试用了UglifyJS 和Google Closure Co ...

  6. bootstrap-datetimepicker在经过GC(Google Closure Compiler)压缩后无法使用的解决方案

    将压缩级别由simple改成whitespace 问题就是这样之后压缩后的文件大了很多 <?xml version="1.0"?> <project name=& ...

  7. Gulp压缩JavaScript代码

    因为gulp是自动化工具,所以我们得告诉它,需要怎么做,才能达到我们的目的. 我们首先得新建一个js文件,用来编写我们的需求,以便gulp能按着我们的意愿来执行. 我将这个js文件取名叫gulpfil ...

  8. Grunt 使用(二)uglify插件压缩javascript代码

    本文在配置grunt基本环境的基础下,讲解如何使用grunt-contrib-uglify进行javascript压缩 本文只介绍了grunt-contrib-uglify插件的一种压缩方式适用于大部 ...

  9. 【Java】通过移除空行和注释来压缩 JavaScript 代码

    1. [代码]JavaScriptCompressor.java/** * This file is part of the Echo Web Application Framework (herei ...

随机推荐

  1. Qt:打包成可执行文件(exe文件)后出现Driver not Loaded的解决方法

    问题 在当前电脑上打包为exe可以正常执行,发送给另一台电脑后却无法执行,并且出现"Driver not loaded"的提示框. 可能原因 1.另一台电脑上没有MySQL(或ex ...

  2. strtok:This function or variable may be unsafe.

    https://jingyan.baidu.com/article/49711c616b8a1ffa441b7cdc.html

  3. django程序在windows服务器上发布

    django程序在windows服务器上发布 参考文献:https://www.cnblogs.com/djangocn/p/10227006.html 1.安装 IIS 和 GCI 打开服务器管理器 ...

  4. Spring Cloud Alibaba 2021.0.1.0 发布:版本号再也不迷糊了

    大家好,DD又来了! 3月9日,Spring官方博客发文:Spring Cloud Alibaba 2021.0.1.0发布了. 前段时间DD还在微信群里看到小伙伴吐槽Spring Cloud Ali ...

  5. 面试题--Nginx

    Nginx面试题 整理自网络,侵权删 1.请解释一下什么是Nginx? Nginx是一个web服务器和反向代理服务器,用于http.https.smtp.pop3和IMAP协议 2.请列举Nginx的 ...

  6. 云e办笔记(删减)

    1JwtTokenUtils工具 2公共返回对象 3Admin实现UserDetails 4AdminLoginParam 5AdminLoginController 6SecurityConfig ...

  7. layui 数据表格的使用(分页+总条数)

    下载地址 https://www.layui.com/ 点击实例,找到layui适合模板 2. 新建html将代码复制到对应模板,修改对应样式路径. 5.修改对应参数(url,field) 追加以下参 ...

  8. numpy: np.logical_and/or/not (逻辑与/或/非)+python3-曲线拟合(polyfit/polyval)

    可以用拟合两个变量之间的关系,然后根据一个变量,去推测出另外一个变量的推测值

  9. Windows下载安装RabbitMQ教程-------报错卸载重新安装 (要卸载干净 -看下文)

    Could not update enabled plugins file at c:\Users\忙聸鹿忙聳掳忙聰戮\AppData\Roaming\RabbitMQ\enabled_plugins ...

  10. 配置Pouch镜像

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.pouch镜像简介 阿里巴巴正式开源了基于Apache 2.0协议的容器技术Pouch.Pouch是一款轻量级的容器技术,拥有快速高效.可移植性 ...