如前，本地調(diào)試過程的require，都是同步ajax請求的。這種邏輯不可能部署到線上吧，所以針對上線，我們做了特殊的處理。

?

編譯

在根目錄下運行

?

python pyjs.py

?

程序會在build目錄下生成所有module編譯后的文件，如increment會編譯成

?

define(?"increment"?,?function(require?,?exports?,?module){
????
var?add?=?require('math').add;
exports.increment?=?function(val)?{
????return?add(val,?1);
};

}?);?

這與我們本地調(diào)試時從調(diào)試服務器上獲取到的文件是一致的，也保證了本地調(diào)試與線上運行時的統(tǒng)一。

?

但僅僅這樣還是不行的，我們無法得到完整的依賴鏈，還是會重復RequireJS和SeaJs的老路。

于是就有了下面。

?

boot.js

boot.js是在編譯時生成的文件，為pyjs.js和依賴關系的合集。

依賴關系的生成，是在編譯時對文件進行全面掃描，提取出單個文件的require模塊，按照一定的方式合并起來。

依賴關系編譯后代碼如下：

addDependence('core'?,?'main,math');
addDependence('main'?,?'increment');
addDependence('increment'?,?'math');

addDependence('math'?,?'');?

如此，如果我們引入了core模塊，將能知道其依賴于main& math。雖然繼續(xù)尋找main和math的依賴關系，直至找出這個core的依賴鏈。

編譯后的require，不能使用require('module').a的方式執(zhí)行，必須使用

require('module' , function(module){module.xx})

這樣的回調(diào)方式運行，原因自然明了:)。回調(diào)的一個參數(shù)是require的module的公開方法綁定的對象。

?

獲取到依賴鏈后將請求文件，這里有兩種方式。?

Combo

combo就是類似yui configurator服務。我們用一個請求就可以將所有的依賴文件按序讀回來。文件中執(zhí)行require的時候其依賴的模塊已經(jīng)在此之前載入到瀏覽器中了，所以可以直接讀取模塊內(nèi)容。

combo請求的url類似如下

?

http://openapi.baidu.com/connect/js/v2.0/combo?0.1.1/xd.js&0.1.1/ui.js&0.1.1/conf.js&0.1.1/lib.js&0.1.1/connect.js

?

?

使用combo服務需要在manifest.json中配置combo信息。?

異步并行加載?

對于沒有combo服務的用戶，我們使用異步并行加載的策略。

首先對所有的js文件進行預加載，參考這篇文章?

這樣所有文件的請求都是異步且并行的。

隨后按序串行執(zhí)行每一個Js文件， 因為本地已經(jīng)有緩存，按序執(zhí)行并不會有太大的性能影響。

請求的瀑布圖如下：

?

?

可以看到，前面的請求已經(jīng)把文件緩存到本地了，所以后面重新請求的時候都是from cache。

該機制目前還不完善，同時我們也推薦使用combo服務。?

?

以上兩種模式，完全解決了commonjs模式對瀏覽器加載的串行問題。而且已經(jīng)在百度連接JavaScript 2.0中使用(combo模式)。簡單可依賴 :)

?

?

最后附上PyJs和SeaJs的對比

?

?

?

如上，PyJs只有在本地依賴上有缺憾（對部分開發(fā)者來說XD，我個人還好）。但是本地服務器也能帶來很多好處的，這在我們接下來會繼續(xù)介紹。?

轉(zhuǎn)載于:https://www.cnblogs.com/demix/archive/2011/08/26/2154496.html

總結(jié)

以上是生活随笔為你收集整理的[PyJs系列介绍]三、编译与上线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。