寫在前面

最近在工作中接觸到angular模塊化打包加載的一些內(nèi)容，感覺中間踩了一些坑，在此標(biāo)記一下.

項(xiàng)目背景：

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

工具類：

項(xiàng)目使用grunt打包根據(jù)AMD規(guī)范，使用grunt-contrib-requirejs來壓縮合并模塊，同時用ocLazyLoad來完成angular模塊的懶加載.

項(xiàng)目進(jìn)程：

模塊打包

項(xiàng)目中代碼基本按照AMD規(guī)范來編寫，使用grunt-contrib-requirejs來將每一個模塊壓縮到一個js文件中.

問題一：在項(xiàng)目代碼中，各個模塊都會依賴第三方庫/項(xiàng)目中公共服務(wù)/項(xiàng)目中公共指令，如果不對這部分內(nèi)容進(jìn)行處理的話， grunt-contrib-requirejs會在壓縮每個模塊的時候，將其依賴的所有模塊都加載過來，然后壓縮到同一個js文件中.

應(yīng)對:將第三方庫/公共服務(wù)和指令分別壓縮為三個模塊，然后每個模塊的打包腳本中使用” exclude”將其移除.如下圖所示：

需要注意的是，公共模塊的模塊名 需要在相應(yīng)的路徑下有同名的js文件

按需加載

將腳本按模塊打包為一個個的js文件后，下一步的工作就是將根據(jù)用戶請求來加載不同的模塊，項(xiàng)目用使用ui-router來處理路由跳轉(zhuǎn)，可以從route入手來完成模塊的懶加載.

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

至此為止，基本實(shí)現(xiàn)按需加載，但還有以下幾個問題：

模塊之間項(xiàng)目依賴

因?yàn)榇嬖谝恍┠K之間項(xiàng)目之間有強(qiáng)依賴，對此的處理是在配置文件中添加模塊之間的依賴關(guān)系，在加載某個模塊之前查看其是否有依賴模塊，如果有的話，優(yōu)先加載其依賴模塊，待依賴模塊加載完成后再去加載當(dāng)前模塊

指令懶加載;

Angular中可以通過$compile來實(shí)現(xiàn)指令之間的相互依賴，對此的處理是配置指令名和指令模塊的依賴，當(dāng)用到某個指令的時候，先去加載其模塊，然后執(zhí)行編譯方法.這種解決方案能解決大部分的指令依賴.

指令的位置問題.項(xiàng)目中大多用到的都是長頁面，每一個長頁面劃分為若干個區(qū)域，每一個區(qū)域都是一個指令.使用攔截的時候會有一個問題，就是每個指令加載時間的長短不一樣，先回來的指令會優(yōu)先append到dom上，從而導(dǎo)致頁面布局的不確定性.解決方案是，使用deffer機(jī)制，待所有指令加載/編譯完成后，再往dom樹上添加執(zhí)行.

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

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

關(guān)于這篇淺談angular懶加載的一些坑就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論