寫在前面

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

項(xiàng)目背景：

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

工具類：

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

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

模塊打包

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

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

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

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

按需加載

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

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

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

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

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

指令懶加載;

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

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

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

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

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

最新評(píng)論