寫在前面

    最近在工作中接觸到angular模塊化打包載入的一些內容,感覺中間踩了一些坑,在此標記一下.

項目背景:

項目主要用到angularJs作為前端框架,項目之前發佈的時候會把所有的前端腳本打包壓縮到一個文件中,在頁面初次訪問的時候載入,造成頁面初始載入緩慢,在此基礎上,提出按需載入,即只有當用戶訪問某個模塊的時候,該模塊的腳本才會載入.

工具類:

項目使用grunt打包根據AMD規範,使用grunt-contrib-requirejs來壓縮合併模塊,同時用ocLazyLoad來完成angular模塊的懶載入.

項目進程:

1. 模塊打包

項目中代碼基本按照AMD規範來編寫,使用grunt-contrib-requirejs來將每一個模塊壓縮到一個js文件中.

問題一:在項目代碼中,各個模塊都會依賴第三方庫/項目中公共服務/項目中公共指令,如果不對這部分內容進行處理的話, grunt-contrib-requirejs會在壓縮每個模塊的時候,將其依賴的所有模塊都載入過來,然後壓縮到同一個js文件中.

應對:將第三方庫/公共服務和指令分別壓縮為三個模塊,然後每個模塊的打包腳本中使用” exclude”將其移除.如下圖所示:

需要註意的是,公共模塊的模塊名 需要在相應的路徑下有同名的js文件

1. 按需載入

將腳本按模塊打包為一個個的js文件後,下一步的工作就是將根據用戶請求來載入不同的模塊,項目用使用ui-router來處理路由跳轉,可以從route入手來完成模塊的懶載入.

具體方法是:在用戶操作路由跳轉時,根據用戶要跳轉到的state,去載入此state所屬的模塊.基於此,需要添加一個state和模塊之間的映射,最開始的時候使用requireJS來載入,發現腳本可以載入進來,但是angular中註冊的控制器/services/filter等均不起作用.調查發現,angular在調用bootstrap方法之後註冊的控制器之類的服務不會再被調用.基於此,引入ocLazyLoad來載入(ocLazyLoad對angular源碼有一些註入修改).

至此為止,基本實現按需載入,但還有以下幾個問題:

1. 模塊之間項目依賴

    因為存在一些模塊之間項目之間有強依賴,對此的處理是在配置文件中添加模塊之間的依賴關係,在載入某個模塊之前查看其是否有依賴模塊,如果有的話,優先載入其依賴模塊,待依賴模塊載入完成後再去載入當前模塊

1. 指令懶載入;

Angular中可以通過$compile來實現指令之間的相互依賴,對此的處理是配置指令名和指令模塊的依賴,當用到某個指令的時候,先去載入其模塊,然後執行編譯方法.這種解決方案能解決大部分的指令依賴.

指令的位置問題.項目中大多用到的都是長頁面,每一個長頁面劃分為若幹個區域,每一個區域都是一個指令.使用攔截的時候會有一個問題,就是每個指令載入時間的長短不一樣,先回來的指令會優先append到dom上,從而導致頁面佈局的不確定性.解決方案是,使用deffer機制,待所有指令載入/編譯完成後,再往dom樹上添加執行.

指令之間的依賴:指令之間也存在項目依賴,對此的解決方案是將相互依賴的指令合併為一個模塊,打包到同一個腳本文件中.這個方案能解決大部分的指令依賴,但是無法解決初始化過程中的依賴.可能存在某個指令編譯的時候,其依賴的指令還未完成編譯.對於這樣的超級特殊例子,只有在頁面初始化的時候載入腳本和template.

以上就是在整個項目進程中遇到的問題,基本每前進一次都是踩著坑,好多東西都是第一次接觸,感覺還是學到了一些東西.可能好多問題的解決方案不是很明確.以上所有問題其他人都遇到過,只要用好搜索引擎,加上自己好好閱讀/理解別人的代碼.所有問題都可以得到圓滿的解決

參考:

RequireJS  http://www.requirejs.cn/

Angular懶載入 https://www.zhihu.com/question/30624377;