zhouweicsu

Facebook Prepack --JavaScript 的下一个杀手级工具

zhouweicsu · 2017-07-05翻译 · 1039阅读 原文链接

这几天社交网络上都在热火朝天地讨论 Prepack。也许你还没听过这个名词。这很正常!因为这个工具才开源没几天。Prepack 由 Facebook 出品,目前还在积极开发阶段。目前还属于实验性质,仍处于早期阶段,但它简直棒极了 😱。

本文会简单介绍 Prepack,包括 Facebook 想要借此解决的问题,还会列举几个超赞的示例,以及 Prepack 目前的发展现状。


预.. 什么?

Prepack 是一个 JavaScript 源代码优化工具。

Prepack 能消除那些本可以在编译阶段完成的运行时计算。会将 JavaScript 代码包中的全局代码替换为一系列等价的赋值语句。这样可以省去很多中间计算和对象的分配工作。

Sebastian McKenzie  — Prepack 开发者之一

Prepack 是一个 JavaScript 的部分求值器(partial evaluator)。Prepack 会重写 JavaScript 包,让 JavaScript 代码更高效地执行。对于重初始化的代码(initialization-heavy code),Prepack 在可以有效缓存 JavaScript 解析结果的环境中优化效果最佳。

那和 Closure Compiler 有什么区别呢?

Prepack 更关注于优化后的运行时性能,而 Closure Compiler 则侧重于减小 JavaScript 代码量。

Closure Compiler 也能优化 JavaScript 代码。但 Prepack 更进一步,它会在初始化阶段执行全局代码,展开循环和递归。

一段小历史

一年以前,在 2016 React 欧洲会议上,Sebastian McKenzie 提到了如何让 JavaScript 初始化更快。

McKenzie 在 2016 React 欧洲会议上的演讲

看到这里,大家应该对 Prepack 有了进一步的了解。了解了 Prepack 名字的含义及其网站,下面就看看如何使它。


如何开始呢?

Prepack 通过 npm 包发布(译者注:Prepack 现在已经改为 yarn),你可以用 Prepack-CLI 工具,也可以调用 Node.js 模块的 API。

Prepack CLI

安装 Prepack-CLI,运行

npm install -g prepack

然后编译一个文件,运行

`prepack script.js`

Prepack API

在项目中安装,运行

`npm install --save-dev prepack`

js 代码如下:

通过 npm 包使用 Prepack api —— 代码示例

prepack-webpack-plugin

有一个 webpack 插件可以方便地使用 Prepack。

webpack 插件的使用示例


好戏开场

这里有一些超赞的示例。示例中左侧是输入,右侧是 Prepack 优化后的输出。

第一个示例是惯例:hello world

示例 1

如你所见,Prepack 将代码编译成一个无法再小的版本。

下一个示例有两个函数。代码如下:

示例 2

编译后的代码由第一个函数生成。func2 函数没有被调用,也没有包含任何副作用代码,所以编译后的代码和 func2 没有任何关系。

注意,如果代码不是 IIFE,则不是完全最优。

不是 IIFE 的示例

这个示例展示了一段 for 循环代码。循环在编译阶段被移除,但是还生成许多不用的代码行。如果是 IIFE,则会是这样:

IIFE 示例

如你所见,最后只留下了 5 行 log 操作的代码。

Playground

你可以在官网(官网请查看参考文献模块)中的 playground 中试一试Prepack。这个 playground 为那些不想在本地安装 Prepack,或者只是感兴趣想尝尝鲜的用户提供了一个选择。

Playground 示例


发展现状

Github 指标

Prepack 代码托管在 Github,通过 npm 发布。

Github

目前有 15 个 contributor,大概 6500 个 star,本周 npm 上有约 2000 个 download,约 130 个 fork。由于社交网络上开发者对 Prepack 很感兴趣,预计这些统计数据在未来一段时间会大幅增长。

其中有一个很有趣的 issue,你肯定很想知道……

Converts 1 meaningless line to 1065 lines of code · Issue #543 · facebook/prepack _Looks like @bevacqua managed to break it. Try running this modified example from the docs (function() { function fib…_github.com

但这个无所谓。他们会马上修复这个 bug 的。

测试覆盖率

序列化测试的代码测试覆盖率报告所有人都可以查看。目前的覆盖率是 52.37%。

代码测试覆盖率

Prepack 的代码测试覆盖率由 istanbul 生成。

未来规划 🎯

Facebook 有一个 Prepack 的未来规划。规划分为三个部分:短期,中期和长期。

短期内,Facebook 希望能稳定现有功能集,用于预打包 React Native 代码包。他们也想集成 React Native 工具链。另外,他们还计划基于 React Native 目前使用的模块系统的假设来构建优化。

长期目标是让 Prepack 成长为一个平台。


最后注意

Prepack 不能识别 document 和 window,所以他们的值会是 undefined。因此,我们必须做一些额外的准备工作来解决这个 issue。也许有人愿意自奋告勇写一个 npm package 来解决这个问题?😇

Facebook 号召开发者去使用 Prepack 并给出反馈,通过修复 bug 和在 Github 仓库中提交代码来帮助他们更好的完善 Prepack。

参考文献

以下是一些有用的扩展阅读链接:


结论

Prepack 会成为一个“生活变革者”。它由一个稳定公司 —— Facebook 支持。他们想将这个工具集成到 React 中,并且已经为此工作了一段时间。但未来仍有很长的路要走。Facebook 的愿景是将 Prepack 打造成一个平台。这似乎很有希望。我会密切关注他们的进展。Prepack 简直棒极了!

相关文章