前言

Prepack前幾個(gè)月剛出來的時(shí)候已經(jīng)得到了前端界的大范圍關(guān)注，而在不久之后又逐漸退出了人們的視線。此時(shí)這篇文章出來可能顯得有些滯后，個(gè)人還是比較看好它未來對(duì)于前端代碼預(yù)編譯優(yōu)化所帶來的收益。所以再詳細(xì)地介紹一下Prepack和它給我?guī)淼乃伎肌?/p>

在前端技術(shù)迭代更新速度較快、前端人力寶貴的情況下，面對(duì)新技術(shù)的不斷涌現(xiàn)我們需要保持冷靜和嚴(yán)謹(jǐn)?shù)膽B(tài)度去接受這些新技術(shù)，所以一般在一個(gè)新技術(shù)涌現(xiàn)時(shí)，我都會(huì)先弄清楚這幾個(gè)問題再考慮是否要推動(dòng)和更迭現(xiàn)有的技術(shù)棧：

• 是什么？

• 解決了什么問題？

• 帶來了什么新的問題？

• 新的問題和解決的問題在目前場(chǎng)景下權(quán)重是怎么樣的？

• 投入產(chǎn)出比如何？

帶著這幾個(gè)問題進(jìn)入正題。

一、什么是Prepack

官網(wǎng)的第一句是：A tool for making JavaScript code run faster. —— 一個(gè)讓JavaScript代碼運(yùn)行更快的工具。

實(shí)際上Prepack 就是一個(gè)部分求值器（Partial Evaluator），代碼打包編譯時(shí)提前將計(jì)算結(jié)果放到編譯后的代碼中，從而去除冗余的代碼（相對(duì)運(yùn)行時(shí)來說，對(duì)應(yīng)的代碼邏輯本身并不是冗余的），而不是在代碼真正運(yùn)行時(shí)才去求值。消除那些本可以在編譯階段完成的運(yùn)行時(shí)計(jì)算，一定程度上減少了javascript資源包大小以及瀏覽器運(yùn)行js所耗費(fèi)的時(shí)間。詳情移步prepack.io/

另外要說明的是，Prepack雖然能一定程度上減少代碼量的大小，但是Prepack開發(fā)團(tuán)隊(duì)開發(fā)它的初衷并不是為了減少代碼包大小，主要還是減少運(yùn)行時(shí)的時(shí)間消耗，代碼包的大小減少算是一個(gè)附加收益。

二、工作原理

根據(jù)官網(wǎng)列的幾個(gè)點(diǎn)依次進(jìn)行詳細(xì)解釋。

• Abstract Syntax Tree (AST) 抽象語法樹 （粒度） Prepack在抽象語法樹的級(jí)別運(yùn)行，使用Babel解析并生成JavaScript源代碼。 那什么是“在抽象語法樹的級(jí)別運(yùn)行”？ 將一種結(jié)構(gòu)化語言編譯成另一個(gè)結(jié)構(gòu)化語言的代碼過程如下：

1、Parse，將代碼解析成抽象語法樹(AST)；

2、對(duì)抽象語法樹（AST）進(jìn)行遍歷（traverse）和替換(replace) 生成新的 抽象語法樹（AST）；

3、Generator—— 根據(jù)新的 AST 生成編譯后的代碼； “在抽象語法樹的級(jí)別運(yùn)行” 說明了Prepack的編譯流程，也說明了編譯粒度。 比抽象語法樹粒度更細(xì)的還有一個(gè)分析樹。 例如以下一個(gè)3+4 例子的對(duì)比： 分析樹：

抽象語法樹：

概括來說，分析樹包含了記號(hào)序列和推導(dǎo)的各個(gè)步驟，拆分粒度更細(xì)；抽象語法樹則只包含了關(guān)鍵的信息，不知道具體的文法和運(yùn)算符細(xì)節(jié)。 在抽象語法樹的級(jí)別編譯，也就是說不用依賴于具體的文法，不依賴于語言的細(xì)節(jié)。也進(jìn)一步說明，原code經(jīng)過語法分析后總是構(gòu)造出相同的抽象語法樹，再通過Prepack進(jìn)行轉(zhuǎn)換處理成新的抽象語法樹，Prepack不會(huì)對(duì)原有的代碼文法和處理邏輯帶來影響，對(duì)編譯器的接口的統(tǒng)一性也不會(huì)造成影響。 對(duì)編譯更多細(xì)節(jié)感興趣的可讀 兩周自制腳本語言 (圖靈程序設(shè)計(jì)叢書)

• Concrete Execution 具體執(zhí)行 Prepack的核心是一個(gè)JavaScript解釋器，它與ECMAScript 5幾乎完全兼容，而且緊密地保持與 ECMAScript 2016語言規(guī)范 的一致性，你可以將Prepack中的解釋器視為完全參照J(rèn)avaScript實(shí)現(xiàn)的。

解釋器能夠跟蹤并撤銷包括所有對(duì)象Mutation在內(nèi)的結(jié)果，從而能夠進(jìn)行推測(cè)優(yōu)化（Speculative Optimization）。

• Symbolic Execution 符號(hào)執(zhí)行 除了對(duì)具體值進(jìn)行計(jì)算外，Prepack的解釋器還可以操作受環(huán)境相互作用影響的抽象值。例如Date.now可以返回一個(gè)抽象值，你可以通過helper輔助函數(shù)（如__abstract()）手動(dòng)注入抽象值。Prepack會(huì)跟蹤所有在抽象值上執(zhí)行的操作，在遇到分支時(shí)，Prepack會(huì)執(zhí)行并探索所有可能性。所以，Prepack實(shí)現(xiàn)了一套JavaScript的符號(hào)執(zhí)行引擎。 以上是官網(wǎng)的翻譯，就是符號(hào)可以代表一個(gè)根據(jù)環(huán)境不同而可變的一個(gè)方法執(zhí)行結(jié)果，例如以下例子中的_0就是這樣的一個(gè)抽象值，它無法提前計(jì)算，因?yàn)樵诓煌臑g覽器或運(yùn)行時(shí)機(jī)下結(jié)果是不同的。左邊編譯前代碼，x 存在if 判斷的分支情況，Prepack會(huì)匯總所有的分支情況進(jìn)行優(yōu)化編譯，如例子中將所有分支匯總（2個(gè)分支）替換成三目運(yùn)算符表達(dá)。

• Abstract Interpretation 抽象釋義 符號(hào)執(zhí)行在遇到抽象值的分支時(shí)會(huì)分叉（fork），Prepack會(huì)在控制流合并點(diǎn)加入分歧執(zhí)行（Diverged Execution）來實(shí)現(xiàn)抽象釋義的形式。連接變量和堆屬性可能會(huì)得到條件抽象值，Prepack會(huì)跟蹤有關(guān)抽象值和型域（Type Domain）的信息。 還是之前的例子，就是抽象值“_0 ” 存在2個(gè)分支，Prepack底層會(huì)匯總分支情況，生成新的抽象語法樹，在優(yōu)化解析時(shí)（Generator）通過連接變量和堆屬性，得到各分支下的抽象值“_0 ”可能的對(duì)應(yīng)情況，并跟蹤相關(guān)情況的信息計(jì)算出結(jié)果形成新的代碼。

• Heap Serialization堆序列化

這里的堆序列化其實(shí)指的是當(dāng)全局代碼返回，初始化階段結(jié)束時(shí)，也就是在generator 過程中Prepack 會(huì)捕獲最終的堆，按順序遍歷堆創(chuàng)建、鏈接堆中的可及對(duì)象。堆中的一些值可能是對(duì)抽象值進(jìn)行計(jì)算的結(jié)果，Prepack 將會(huì)根據(jù)這些值生成執(zhí)行計(jì)算的代碼，最終組成新的代碼。

總結(jié)一下Prepack的工作過程：

1. 開發(fā)的代碼經(jīng)過解析（Parse）形成抽象語法樹

2. Transform時(shí)期預(yù)先計(jì)算出的可求的值，對(duì)存在受環(huán)境影響的抽象值進(jìn)行抽象釋義，轉(zhuǎn)換成新的抽象樹

3. Generate時(shí)期按順序遍歷堆進(jìn)行符號(hào)執(zhí)行和跟蹤有關(guān)抽象值和型域信息處理抽象值等，最終組成新的代碼。

三、示例

官網(wǎng)（prepack.io/）有舉代表性的例子，這里不再詳述。還可以通過線上的Prepackprepack.io/repl.html將自己的代碼輸入動(dòng)態(tài)查看解析結(jié)果。

四、Prepack 引入會(huì)帶來的問題

Prepack 帶來的優(yōu)勢(shì)是把 js 的 AST 編譯到更加低級(jí)的語義，提前計(jì)算出值, 減少 js 代碼在瀏覽器端初始化運(yùn)行消耗的時(shí)間，附帶收益是減少了代碼包的大小，還可以與Closure Compiler 配合進(jìn)一步縮小代碼包.，但同時(shí)也帶來了新的問題：

• 沒有官方統(tǒng)一、成熟的方案支持打包集成到開發(fā)環(huán)境——需要開發(fā)者另辟蹊徑完成集成

• 不能識(shí)別 document 和 window，會(huì)識(shí)別為 undefined——瀏覽器環(huán)境代碼利用Prepack存在較大局限性

• 沒有完全支持瀏覽器環(huán)境和node.js環(huán)境——node代碼不能全面接入Prepack

• 生成的代碼沒有針對(duì)引擎做好優(yōu)化——運(yùn)行效率會(huì)存在變低的情況

• 存在一些尚未解決的issues——會(huì)有更多的“坑”需要踩

五、Prepack 未來規(guī)劃

目前Prepack仍處于早期開發(fā)階段，尚未準(zhǔn)備好在生產(chǎn)環(huán)境中使用，官方建議僅嘗試使用，并且歡迎提供反饋以幫助修復(fù)錯(cuò)誤。

Prepack團(tuán)隊(duì)對(duì)未來的規(guī)劃如下：

短期

• 穩(wěn)定現(xiàn)有功能集，用于預(yù)優(yōu)化(Prepack）React Native代碼包

• 集成React Native工具鏈

• 根據(jù)React Native所用模塊系統(tǒng)的假設(shè)來構(gòu)建優(yōu)化

中期

• 進(jìn)一步優(yōu)化序列化（Serialization），包括：消除不暴露特性（identity）的對(duì)象；消除未使用的導(dǎo)出屬性，等等

• 預(yù)優(yōu)化每個(gè)函數(shù)、基本代碼塊、語句、表達(dá)式

• 與ES6保持完全一致

• 支持廣泛的模塊系統(tǒng)

• 假設(shè)ES6支持某些功能，延遲完成或直接忽略Polyfill應(yīng)用

• 進(jìn)一步實(shí)現(xiàn)Web和Node.js環(huán)境中的兼容性目標(biāo)

• 深入集成JavaScript虛擬機(jī)，改進(jìn)堆反序列化過程，包括 ：暴露“對(duì)象懶初始化”的概念 - 以一種JavaScript無感知的方式，在首次使用對(duì)象時(shí)對(duì)其進(jìn)行初始化；通過專門的字節(jié)碼提高普通對(duì)象創(chuàng)建的編碼效率；將代碼分為兩個(gè)階段：1) 非環(huán)境依賴階段，虛擬機(jī)可以安全地捕獲并恢復(fù)生成的堆；2)環(huán)境依賴階段，通過從環(huán)境中獲得的值執(zhí)行所有剩余的計(jì)算過程來拼湊具體的堆，等等

• 總結(jié)循環(huán)和遞歸

長期 - 利用Prepack作為一個(gè)平臺(tái)

• JavaScript Playground - 通過調(diào)整JavaScript引擎體驗(yàn)JavaScript特性，這些引擎由JavaScript所編寫，托管在瀏覽器中；你可以把它想象成一個(gè)“Babel虛擬機(jī)”，實(shí)現(xiàn)了不能被編譯的JavaScript新特性

• 捉Bug - 發(fā)現(xiàn)異常崩潰、執(zhí)行問題……

• 效果分析，例如檢測(cè)模塊工廠函數(shù)可能的副作用或強(qiáng)制純凈注釋

• 類型分析

• 信息流分析

• 調(diào)用圖推理，允許內(nèi)聯(lián)和代碼索引

• 自動(dòng)測(cè)試生成，利用符號(hào)執(zhí)行的特性與約束求解器（Constraint Solver）結(jié)合來計(jì)算執(zhí)行不同執(zhí)行路徑的輸入

• 智能模糊(Smart Fuzzing）

• JavaScript沙盒 - 以不可觀察的方式有效地測(cè)試JavaScript代碼

六、Prepack給微信小程序優(yōu)化帶來的新思路

從以上Prepack帶來的優(yōu)勢(shì)和問題來看，在普遍的前端項(xiàng)目中使用的話投入較大于產(chǎn)出，目前必然是不適宜投入到項(xiàng)目中使用。

雖然目前Prepack尚未完善，但是開拓了一個(gè)新的js代碼優(yōu)化方向。減少 js 代碼在瀏覽器端初始化運(yùn)行消耗的時(shí)間，這對(duì)于提升用戶體驗(yàn)來說也是很關(guān)鍵的點(diǎn)。例如 app本身的啟動(dòng)一般也比較占用時(shí)間，所以一般app 都會(huì)有一個(gè)啟動(dòng)時(shí)的廣告頁或靜態(tài)介紹頁，借此消除啟動(dòng)時(shí)間較長給用戶帶來的不良體驗(yàn)。 App可以用廣告頁和靜態(tài)介紹頁吸引用戶的注意力。

最近在做小程序相關(guān)的業(yè)務(wù)，微信小程序本質(zhì)是app，在業(yè)務(wù)邏輯較重的小程序也同樣存在啟動(dòng)時(shí)間消耗帶來不良用戶體驗(yàn)的問題，但是卻不能以普通app的解決方案來解決。因?yàn)槲⑿疟旧肀容^注重用戶體驗(yàn)，是一個(gè)擅長做減法且克制的產(chǎn)品，加入廣告和啟動(dòng)頁不僅會(huì)影響用戶體驗(yàn)還破壞產(chǎn)品的“克制”性。 所以小程序的啟動(dòng)優(yōu)化就需要新的解決思路，而Prepack就剛好帶來了曙光。

微信小程序不存在 document 和 window 對(duì)象，也非在node.js環(huán)境，不受它帶來的問題所局限?？梢酝ㄟ^腳本或其他集成方式將Prepack加入到打包流程中完成優(yōu)化，也可降級(jí)處理部分主要文件發(fā)揮他的作用。總之和微信小程序之間存在著可能性和可行性，后續(xù)會(huì)再出針對(duì)小程序和Prepack的實(shí)踐文章，感興趣的同學(xué)可待續(xù)。

以上純屬個(gè)人觀點(diǎn)，可能存在不足或錯(cuò)誤之處，歡迎指正。

作者介紹：雪婧，美團(tuán)點(diǎn)評(píng)點(diǎn)餐團(tuán)隊(duì)成員。