脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-React实战-FB最新开源Javascript优化利器Prepack,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
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这种解释型的语言来说,将代码优化向前走了一大步。
Prepack是通过综合多项技术分析整合才得以实现目标效果的,主要采用了以下几种:
lAbstract Syntax Tree (AST)
lconcrete Execution
lSymbolic Execution
lAbstract Interpretation
lHeap 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/
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-React实战-FB最新开源Javascript优化利器Prepack全部内容,希望文章能够帮你解决javascript代码实例教程-React实战-FB最新开源Javascript优化利器Prepack所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。