Facebook 开源代码优化工具 Prepack

泡在网上的日子 / 文 发表于2017-05-05 15:32 次阅读 Facebook,Prepack

本文作者:文蔺
本文地址:http://www.wemlion.com/2017/prepack/
本文由 @文蔺 创作

Fackbook 又搞了个大新闻!

今天一早,朋友圈被一个名为 Prepack 的工具刷爆了。

周刊君很好奇地看了下官网(prepack.io),这么厉害的工具,有必要第一时间向大家介绍一下(还能不能好好过个青年节了)。

看 “Prepack” 这个名字就能大概知道,它的作用,肯定是在发布前(“pre”)对代码动了些什么手脚。官网介绍 Prepack 是“一个使 JavaScript 跑得更快的工具”。那么它到底做了些什么厉害的事情呢?

根据官网首页信息,Prepack “能够消除那些可以本可以在编译(compile)阶段完成的运行时计算”,将代码中的某些部分替换为一系列赋值语句,这样一来就可以省去很多中间计算和对象的分配工作。

官方示例

下面是 Prepack 官网给出的一个例子:

(function () {
  var self = this;
  ['A', 'B', 42].forEach(function(x) {
    var name = '_' + x.toString()[0].toLowerCase();
    var y = parseInt(x);
    self[name] = y ? y : x;
  });
})();

经过 Prepack 的处理,上面这段代码变成了下面这样:

(function () {
  _a = "A";
  _b = "B";
  _4 = 42;
})();

原来的 .forEach 调用没有了,一系列的中间转换过程也不见了。借用官网的说法,“多数的计算都在 Prepack 编译时进行了预初始化”。

再举一个 Fibonacci 的例子:

// 处理前
(function () {
  function fibonacci(x) {
    return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);
  }
  global.x = fibonacci(23);
})();
// 处理后
(function () {
  x = 28657;
})();

工作机制

据官网介绍,Prepack 的实现依赖以下几个方面:

1. AST(抽象语法树)

Prepack 是在 AST 这一层级对代码进行操作的。通过 Babel 来解析源码,并生成优化后的代码。关于 Babel 与 AST,周刊君推荐两篇文章:

2. 具体执行(Concrete Execution)

Prepack 的核心部分是“一个大致兼容 ECMAScript 5 的编译器”(an almost ECMAScript 5 compatible interpreter),而这个编译器是通过 JavaScript 实现的。这个编译器可以追踪、撤销包括对象变化在内的所有的操作。这样一来就能进行推理性的优化(speculative optimizations)。

3. 符号执行(Symbolic Execution)

除了计算具体值,Prepack 的编译器还可以操作抽象值,而这些抽象值通常都来自于代码与环境的交互。如 Date.now 所返回的就是抽象值。此外,根据官网首页的描述,还可以通过 __abstract() 这样的辅助工具函数,手动插入抽象值。Prepack 会追踪发生在抽象值之上的操作,如果有分支情况,则会对所有可能性进行探查。

官网介绍说,“因此,Prepack 为 JavaScript 实现了一套符号执行引擎”。为了方便大家理解,周刊君特地引用了维基百科上的一段话:

符号执行 (Symbolic Execution)是一种程序分析技术。其可以通过分析程序来得到让特定代码区域执行的输入。使用符号执行分析一个程序时,该程序会使用符号值作为输入,而非一般执行程序时使用的具体值。在达到目标代码时,分析器可以得到相应的路径约束,然后通过约束求解器来得到可以触发目标代码的具体值。

4. 抽象解释(Abstract Interpretation)

官网的描述有点复杂。关于抽象解释,请移步维基百科。有兴趣的可以去官网阅读原文。

5. 堆序列化(Heap Serialization)

初始化阶段结束时,Prepack 会捕获最终的堆。按顺序遍历堆,生成新的代码,创建、链接堆中的可及对象。

如前所述,堆中的一些值可能是对抽象值进行计算的结果。Prepack 将会根据这些值生成执行计算的代码,其计算过程与源程序相同。

环境很重要!

需要注意的是,Prepack 并未完整模拟浏览器、Node 环境,Prepack 对 document 和 window 并没有多少了解。对这样一些属性求值的时候,将会得到 undefined。如果需要在这样一些地方使用 Prepack,必须通过一些工具函数实现。

如何尝鲜

# 安装
npm install -g prepack
# 处理文件,并打印到控制台
prepack script.js
# 处理文件,并输出到新文件
prepack script.js --out script-processed.js

除了上面的基本用法之外,还支持如 sourceMap 等更多选项。这里就不一一介绍了。

当前支持情况

此外,官方介绍称,“Prepack 目前仍处于早期开发阶段,尚未做好投入生产环境的准备”。不过,还是响应 Prepack 的号召吧,“try it out, give feedback, and help fix bugs”。

想要进一步关于该项目的发展计划,可以访问官网首页的 Roadmap 部分。

相关技术

Closure Compiler 同样会对 JavaScript 代码进行优化。Prepack 比 Closure Compiler 走得更远的地方在于执行了初始化阶段的全局代码,展开循环、递归。官网的一个说法是,“Prepack 着眼于运行时性能,而 Closure Compiler 的重点在于代码体积”。

收藏 赞 (0) 踩 (0)
上一篇:最简版CNode中文社区web app
发现最近CNode社区出了这么多版本社区的web app,终于可以手机浏览器访问了,试一试,却发现没有适合自己审美的,特别是在web app上搞的登录,着实有点受不了,毕竟access token这么长一串。偶然发现iOS版本的Cnode还不错,于是就大概仿照着做了一个。本着简
下一篇:IMUI for React Native
Aurora IMUI ,一个通用的即时通讯(IM)UI 库。不局限于任何 IM SDK,现在已经支持 React Native。 本 UI 库提供了消息列表、输入视图等常用组件。 初心 过去的一年,JMessage 用户量呈指数级增长趋势,成千上万的开发者将我们的 SDK 集成到应用程序中,通