长久以来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.官网地址: