@zhouweicsu
2017-07-18T14:37:06.000000Z
字数 2981
阅读 1067
JavaScript Facebook Prepack
译者：zhouweicsu
原文：https://hackernoon.com/facebooks-prepack-the-next-killer-in-the-javascript-zone-d932556ffd8c
这几天社交网络上都在热火朝天地讨论 Prepack。如果你没听过这个名词也很正常！因为这个工具才开源没几天。Prepack 由 Facebook 出品，还在活跃的开发阶段。目前还属于实验性质，仍处于早期阶段，但它简直棒极了 😱。
本文会给大家介绍 Prepack，包括 Facebook 借此想要解决的问题，还会列举几个超赞的示例，最后回介绍 Prepack 目前的发展现状。
Prepack 是一个 JavaScript 源代码优化工具。
Prepack 能消除那些本可以在编译阶段完成的运行时计算。会将 JavaScript 代码包中的全局代码替换为一系列等价的赋值语句。这样做能省去很多中间计算和对象的分配工作。
Prepack, a partial JavaScript evaluator and optimising compiler we've developed at FB, has just been open sourced! https://t.co/IDrNfHhpJL
Prepack，我们在 FBI 开发的一个 JavaScript 部分求值器和优化编译器，现在开源啦！https://t.co/IDrNfHhpJL
—— @sebmck
Sebastian McKenzie — Prepack 开发者之一
Prepack 是一个 JavaScript 的部分求值器（partial evaluator）。Prepack 会重写 JavaScript 包，让代码更高效地执行。对于重初始化的代码（initialization-heavy code），Prepack 在可以有效缓存 JavaScript 解析结果的环境中优化效果最佳。
Prepack 更关注于优化后的运行时性能，而 Closure Compiler 则侧重于减小 JavaScript 代码量。
Closure Compiler 也优化 JavaScript 代码。但 Prepack 更进一步，它会在初始化阶段就执行全局代码，展开循环和递归。
一年以前，在 2016 React 欧洲会议上，Sebastian McKenzie 提到了如何更快初始化 JavaScript。
Sebastian McKenzie - Making JavaScript Initialize Faster at react-europe 2016
McKenzie 在 2016 React 欧洲会议上的演讲
看到这里，大家应该对 Prepack 有了进一步的了解。了解了 Prepack 名字的含义及其网站，下面就看看如何使用它。
Prepack 通过 npm 包发布（译者注：Prepack 现在已经改为 yarn），你可以用 Prepack-CLI 工具，也可以调用 Node.js 模块的 API。
安装 Prepack-CLI，运行
npm install -g prepack
然后编译文件，运行
prepack script.js
在项目中安装，运行
npm install --save-dev prepack
js 代码如下：
通过 npm 包使用 Prepack api —— 代码示例（译者注：请点击原文查看此代码）
有一个 webpack 插件可以方便地使用 Prepack。
webpack 插件的使用示例（译者注：请点击原文查看使用示例）
下面是一些超赞的示例。示例中左侧是输入，右侧是 Prepack 优化后的输出。
第一个示例是惯例：hello world
示例 1
如你所见，Prepack 将代码编译成了一个无法再小的版本。
下一个示例有两个函数。代码如下：
示例 2
编译后的代码由第一个函数生成。func2 函数没有被调用，也没有包含任何副作用代码，所以编译后的代码和 func2 没有任何关系。
注意，如果代码不是 IIFE，则编译后的代码不是完全最优。
不是 IIFE 的示例
这个示例展示了一段 for 循环代码。循环在编译阶段被移除，但是还生成许多不用的代码行。如果是 IIFE，则会是这样：
IIFE 示例
如你所见，最后只留下了 5 行 log 操作的代码。
你可以在官网中的 playground 中试一试 Prepack。这个 playground 为那些不想在本地安装 Prepack，或者只是感兴趣想尝尝鲜的用户提供了一个选择。
Playground 示例
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 会成为一个“生活变革者(life changer)”。它背后有一个稳定公司 —— Facebook。他们想将这个工具集成到 React 中，并且已经为此工作了一段时间。但未来仍有很长的路要走。Facebook 的愿景是利用 Prepack 打造一个平台。这看起来很有希望。我会密切关注它的进展。Prepack 简直棒极了！