React实战-FB最新开源Javascript优化利器Prepack

长久以来Javascript缺乏一个完善的IDE,究其原因无非是Javascript一直以来就不是主角，它要么是Java,Asp等语言的装饰品，要么需要与css，html等语言结合共同完成一项功能。但是Node,React的兴起将改变这种状态，在React生态圈里，各类工具链逐步新起，最近这几天，最令人兴奋的要算是Prepack了。Facebook开源的新的Javascript代码优化工具。

1.Prepack与传统的Javascript优化工具是有本质区别的(微信公众号：React实战)。

先看看传统Javascript优化工具是怎么做的：它们是以缩小Javascript文件大小为目标，从而减少客户端加载时间。通常采用在物理上清理源码文件在运行时的多余信息的方式，如删除注释、空行等。

Prepack则显得要高级的多：它是在编译阶段就估算运行时间，将一些操作或运算采用另一种更加简单的方式就行替换，这就大大的减少了在运行阶段的中间过程和运行时间。

2.转化实例。

a.实例一：

输入：

(function () {

  function hello() { return 'hello'; }

  function world() { return 'world'; }

  global.s = hello() + ' ' + world();

})();

转化后结果：

(function () {

  s = "hello world";

})();

b.实例二

输入：

(function() {

//React 实战 Prepack

  var s='hello';

  s = s + ' world';

  s = s + ' honey';

  console.log(s);

})();

转化后结果：

console.log("hello world honey");

实例三：

输入：

(function () {

  function fibonacci(x) {

    return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);

  }

  global.x = fibonacci(23);

})();

转化后结果：

(function () {

  x = 28657;

})();

通过上面三个例子可以看出Prepack不再是简单的清除，而是一直更加智能的转化,同时也保留了原有打包工具的一些优点。这种方式对Javascript这种解释型的语言来说，将代码优化向前走了一大步。

 

3.Prepack采用了哪些技术

Prepack是通过综合多项技术分析整合才得以实现目标效果的，主要采用了以下几种：

l Abstract Syntax Tree (AST)

l Concrete Execution

l Symbolic Execution

l Abstract Interpretation

l Heap Serialization

4.如何使用Prepack

安装： npm install -g prepack

使用： prepack originSource.js --out outputSource.js

5.Prepack的目标

Facebook对Prepack有着短期、中期和长期的目标，目前Prepack只是作为服务于React的代码优化工具，最终成为集代码优化、信息流分析，Bug跟踪，类型分析等于一身的Javascript开发平台。

6.官网地址：

https://prepack.io/