• Works
    • 笔记
    • 资源
  • 关于我

拉风的博客

uglify源码

解读uglifyJS(四)——Javascript代码压缩

Posted by raphealguo on 22 五月, 2014 7 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/uglify%E6%BA%90%E7%A0%81/

前言

对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小,前边混淆压缩变量名字是方法之一,但是还有诸多可以把代码体积压小的规则,我在本篇文章会对UglifyJS所有压缩代码体积的细节整理成一条条的规则,为了方便理解,还会给出一些压缩前代码以及压缩后代码的对比。由于UglifyJS里边对IF的压缩规则最多,也是最为丰富精彩的部分,放在最后边解释。
还是那样,有兴趣了解UglifyJS实现细节,看文章最后的我对它源码做的注释。
留意:

  1. 下边代码样例中左侧为压缩前源码,右侧为压缩后代码,为了对比方便,下边多数的代码压缩后的变量名字没有混淆处理,同时一个压缩规则的例子尽量不混其他压缩策略进去。
  2. 我下文多处写到的表达式语句是指UglifyJS语法分析得到的simple_statement,你可以认为只要能放到逗号表达式里边的都算是simple_statement。

[Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

解读uglifyJS(三)——Javascript的变量名混淆

Posted by raphealguo on 17 五月, 2014 2 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/uglify%E6%BA%90%E7%A0%81/

前言

UglifyJS会对JS文件的变量名进行混淆处理,要理解Javascript变量混淆的细节,我们需要回答以下几个问题:
1.遇到一个变量myName,我们怎么知道这个myName变量要不要混淆
2.混淆名字怎么生成才合适,新的名字替换旧的名字时有什么要注意的地方?
3.哪些关键字会产生一个作用域?
4.作用域链跟符号表在UglifyJS里边是怎么体现?
5.UglifyJS混淆的过程是什么样?

我们先梳理一下这5个问题,最后贴出我阅读UglifyJS在这部分的实现时做的代码注释。 [Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

解读uglifyJS(二)——AST生成

Posted by raphealguo on 15 五月, 2014 Leave a Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/uglify%E6%BA%90%E7%A0%81/

为了理解源码结构,必须要进行语法分析,uglify在语法分析阶段得到一棵AST树(它的结构是数组嵌套数组,parse-js移植于一个Lisp的项目,获得的AST树类似Lisp里边的表,数组套数组:["toplevel", ["stat", [xxxx]]])

对于JS来说,一个文件就是处于一个全局域的语句块,uglify里边把这个命名为toplevel的语句块,里边涉及各种状态,太具体的状态就不画图了,上一个语句块的状态转移的图片,其他还是要阅读源码比较爽快。

[Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, Zend源码

解读uglifyJS(一)——token扫描

Posted by raphealguo on 14 五月, 2014 3 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/uglify%E6%BA%90%E7%A0%81/

uglifyjs是用来压缩混淆JS文件,同时会对代码尽可能的优化,使得最后产出的js代码非常小,uglifyjs通过nodejs写的,底层用了一个parse-js的进行AST分析。
这两天在工作空隙的时间阅读了uglifyjs的源码,发现了很多js语法细节的东西,略有收获,顺便把看的过程注释在它代码里边。

词法分析的文章写过好几篇了,不想重复了,直接贴代码注释了。 [Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

标签

BFS CA CSS dfs ExtCSS HTTP HTTPS jQuery MVVM PHP源码 Sizzle ssl uglifyjs Vue Vue2.x webview模拟器 Web开发 Zend源码 上线 云南游 入门 前端工程 加密 协议 工具 提测 效率 数字签名 数学 旅游 游戏 源码 灰度 监控 硬件 算法 网络模型 计算机 认证

近期评论

  • 捕获页面中全局Javascript异常 - 算法网 发表在《前端代码异常监控》
  • Augustmyv 发表在《如何学习Vue2源码》
  • Holographicuqj 发表在《如何学习Vue2源码》
  • Foamcub 发表在《如何学习Vue2源码》
  • liusir 发表在《关于我》

链接表

  • bang
  • DIV.IO
  • 小木舟

Copyright © 2023 拉风的博客.

Theme by ThemeHall.