一種打包文件局部更新的前端模塊化加載器的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)絡(luò)技術(shù)領(lǐng)域，特別是涉及一種打包文件局部更新的前端模塊化加載器。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)的飛速發(fā)展，前端開發(fā)變的越來越重要和復(fù)雜。傳統(tǒng)的前端腳本開發(fā)方式會帶來命名沖突、文件加載順序依賴等問題，大部分的網(wǎng)站都引入了模塊化的解決方案。目前比較流行的解決方案有AMD(Asynchronous Module Definit1n) ,CMDCCommonModule Def init1n)，代表性的工具分別是requirejs和sea JavaScript。
[0003]在傳統(tǒng)的網(wǎng)站中，為了解決前端JavaScript腳本請求數(shù)量過多的問題，通常會把多個js文件合并為一個文件，同時對這個文件進行去空白符、縮短變量名等處理，這樣會使得請求的數(shù)量和體積減少，提升了前端的加載性能。引入模塊化之后，requirejs等提供了r.JavaScript來進行這項工作。
[0004]但是，如果一個JavaScript文件改動，將會引起打包之后的JavaScript改動，瀏覽器的緩存也將失效。在互聯(lián)網(wǎng)項目中，網(wǎng)站的更新和迭代最短可能幾天就會有一個版本的更新，打包合并的JavaScript數(shù)量可能會是幾十個，甚至上百個，這樣一個JavaScript的改動就會弓I起整個打包JavaScr ipt的重新加載，這不僅影響了性能也浪費了流量。
[0005]現(xiàn)有技術(shù)中，申請人:阿里巴巴集團控股有限公司申請了“一種JavaScript文件的管理方法、裝置和系統(tǒng)”，申請?zhí)枮? 200910249840.0，該專利公開了一種JavaScript文件的管理方法、裝置和系統(tǒng)，該方法包括以下步驟:接收并解析來自客戶端的JavaScript請求，獲取所述JavaScript請求對應(yīng)的文件數(shù)組，根據(jù)所述文件數(shù)組遍歷文件依賴關(guān)系結(jié)構(gòu)圖，查找所述JavaScript請求對應(yīng)的JavaScript文件以及與所述JavaScript文件存在依賴關(guān)系的文件集合；如果查找到所述JavaScript請求對應(yīng)的JavaScript文件以及與所述JavaScript文件存在依賴關(guān)系的文件集合，則將所述JavaScript文件和所述文件集合發(fā)送到所述客戶端。此發(fā)明僅僅提高了頁面載入的速度、加快了網(wǎng)頁下載的速度。而腳本文件更新后帶來的打包文件重新全部加載問題卻沒有得到解決。

【發(fā)明內(nèi)容】

[0006]本發(fā)明的目的在于:針對現(xiàn)有技術(shù)中存在的上述技術(shù)問題，提出打包文件局部更新的前端模塊化加載器，使得腳本加載過程中能夠充分能利用瀏覽器緩存，達到節(jié)省流量優(yōu)化性能的目的。
[0007]本發(fā)明是通過以下技術(shù)方案實現(xiàn)的:一種打包文件局部更新的前端模塊化加載器，模塊加載器包括靜態(tài)加載器和動態(tài)加載器;所述的動態(tài)加載器由前端加載器和后臺緩存計算組件DynamicJsServlet組成；
所述的動態(tài)加載器用以加載動態(tài)JavaScript;所述的動態(tài)JavaScript為更新頻率比較高的 JavaScr ipt; 所述的靜態(tài)加載器用以加載靜態(tài)JavaScript;所述的靜態(tài)JavaScript為不經(jīng)常更新的JavaScript ο
[0008]進一步，所述的動態(tài)加載器充分利用瀏覽器的本地緩存localstorage，所述的動態(tài)加載器加載動態(tài)JavaScr ipt的時候后臺的緩存計算組件servelet通過比對其生成的唯一資源標(biāo)識tag來決定是否讓瀏覽器更新對應(yīng)腳本。
[0009]進一步，所述靜態(tài)加載器和動態(tài)加載器的結(jié)合，間接實現(xiàn)了打包腳本的局部更新。
[0010]進一步，所述打包腳本的構(gòu)建過程如下:
首先，讀取所有JavaScript ；
其次，將讀取的JavaScript進行分類，分為動態(tài)JavaScript和靜態(tài)JavaScript ；
再次，構(gòu)建現(xiàn)行方案的打包JavaScr ipt;
最后，將動態(tài)JavaScript的列表寫入到打包JavaScript中。
[0011 ]進一步，所述的構(gòu)建現(xiàn)行方案的打包JavaScript為將靜態(tài)JavaScript按照傳統(tǒng)的打包方案進行打包，將動態(tài)JavaScript加入動態(tài)JavaScript列表中。
進一步，，所述JavaScript的模塊文件的基本數(shù)據(jù)結(jié)構(gòu)包括:ID、Deps、Url和Cache策略;所述的ID為標(biāo)識;所述的Deps為要加載的一個依賴數(shù)組;所述的Url為文件路徑;所述的Cache策略為緩存策略。
[0013]進一步，所述的模塊加載器的加載執(zhí)行過程為:
(1)加載執(zhí)行打包JavaScript，所述的打包JavaScr ipt包含了靜態(tài)JavaScr ipt的代碼和動態(tài)JavaScript ID的列表；
(2)生成靜態(tài)JavaScript的模塊信息；
(3)讀取動態(tài)JavaScript列表；
(4)動態(tài)加載器加載動態(tài)JavaScript；
(5)讀取本地緩存localstorage中的動態(tài)JavaScript;
(6)執(zhí)行l(wèi)ocalstorage中的動態(tài)JavaScript生成動態(tài)JavaScript的模塊信息；
(7)根據(jù)靜態(tài)JavaScript模塊信息和動態(tài)JavaScript模塊信息構(gòu)建一棵模塊之間的依賴關(guān)系樹；
(8)按照后序遍歷的順序執(zhí)行模塊代碼。
[0014I 進一步，所述的動態(tài)JavaScript模塊信息包括Tag和Content;所述的Tag為服務(wù)器端計算生成的唯一資源標(biāo)識符;所述的Content為文件內(nèi)容。
[0015]進一步，所述動態(tài)加載器的執(zhí)行過程為:動態(tài)加載器將需要加載的JavaScript文件列表和對應(yīng)的tag發(fā)送到后臺緩存計算組件Dynamic Js Servlet，后臺緩存計算組件Dynamic Js Servlet采用hash算法，計算各個JavaScript的tag值;然后比較這個tag值與前端加載器傳過來的tag值，如果相等代表JavaScr ipt代碼沒有做過修改，如果不相等，代表JavaScript代碼已經(jīng)修改過;對于修改過的JavaScript，將新的tag值和JavaScr ipt代碼內(nèi)容傳到前端加載器，未修改過的JavaScript只需將tag值傳回；前端加載器接收到信息后，將修改過的內(nèi)容寫回到本地緩存local storage中。
[0016]綜上所述，由于采用了上述技術(shù)方案，本發(fā)明的有益效果是:本發(fā)明提出了一種局部更新打包文件的加載機制，對于一些不經(jīng)常改動的JavaScript文件采用現(xiàn)行的合并壓縮方式，對于會經(jīng)常改動的JavaScript采用一種動態(tài)計算tag的本地緩存方式，通過靜態(tài)加載和動態(tài)的結(jié)合，間接的實現(xiàn)了打包腳本的局部更新。本發(fā)明的前端加載器能夠充分利用瀏覽器的緩存，夠適應(yīng)網(wǎng)站的經(jīng)常性變化，達到優(yōu)化網(wǎng)站性能和流量的目的。
【附圖說明】
[0017]本發(fā)明將通過例子并參照附圖的方式說明，其中:
圖1為本發(fā)明的模塊加載器的示意圖；
圖2為本發(fā)明的打包腳本構(gòu)建流程示意圖；
圖3為本發(fā)明的JavaScript模塊文件的基本數(shù)據(jù)結(jié)構(gòu)表；
圖4為本發(fā)明的模塊加載器的加載執(zhí)行過程圖；
圖5為本發(fā)明的動態(tài)JavaScript模塊信息數(shù)據(jù)結(jié)構(gòu)表圖6為本發(fā)明的動態(tài)加載執(zhí)行過程示意圖。
【具體實施方式】
[0018]本說明書中公開的所有特征，或公開的所有方法或過程中的步驟，除了互相排斥的特征和/或步驟以外，均可以以任何方式組合。
[0019]本說明書(包括任何附加權(quán)利要求、摘要和附圖)中公開的任一特征，除非特別敘述，均可被其他等效或具有類似目的的替代特征加以替換。即，除非特別敘述，每個特征只是一系列等效或類似特征中的一個例子而已。
[0020]實施例，現(xiàn)在流行的require JavaScript的r.JavaScript是將所有的腳本文件通過命令行合成一個腳本，當(dāng)前端瀏覽器加載的時候只需加載一個JavaScr ipt。對于一個網(wǎng)站大量的JavaScript中，很大一部分的JavaScript更新的頻率可能并不是很高。
[0021]因此，本專利提出了一種區(qū)分加載的方案，對于大部分不經(jīng)常更新的JavaScript采用現(xiàn)行的方案，對于小部分的更新頻率比較高的JavaScr ipt采用一種新的方案。這小部分JavaScript我們成之為動態(tài)JavaScript，其加載機制稱為動態(tài)加載;相應(yīng)的大部分不經(jīng)常更新的JavaScript稱為靜態(tài)JavaScript，加載機制為靜態(tài)加載。
[0022]動態(tài)加載的基本原理是充分利用了瀏覽器的本地緩存(localstorage)，加載動態(tài)JavaScript的時候后臺緩存計算組件Dynamic Js Servlet通過比對它生成的唯一資源標(biāo)識(tag)來決定是否讓瀏覽