寫在前面
最近在工作中接觸到angular模塊化打包加載的一些內容，感覺中間踩了一些坑，在此標記一下.
項目背景：
項目主要用到angularJs作為前端框架，項目之前發布的時候會把所有的前端腳本打包壓縮到一個文件中，在頁面初次訪問的時候加載，造成頁面初始載入緩慢，在此基礎上，提出按需加載，即只有當用戶訪問某個模塊的時候，該模塊的腳本才會加載.
工具類：
項目使用grunt打包根據AMD規範，使用grunt-contrib-requirejs來壓縮合併模塊，同時用ocLazyLoad來完成angular模塊的懶加載.
項目進程：
模塊打包
項目中代碼基本按照AMD規範來編寫，使用grunt-contrib-requirejs來將每一個模塊壓縮到一個js文件中.
問題一：在項目代碼中，各個模塊都會依賴第三方庫/項目中公共服務/項目中公共指令，如果不對這部分內容進行處理的話， grunt-contrib-requirejs會在壓縮每個模塊的時候，將其依賴的所有模塊都加載過來，然後壓縮到同一個js文件中.
應對:將第三方庫/公共服務和指令分別壓縮為三個模塊，然後每個模塊的打包腳本中使用” exclude”將其移除.如下圖所示：
需要注意的是，公共模塊的模塊名需要在相應的路徑下有同名的js文件
按需加載
將腳本按模塊打包為一個個的js文件後，下一步的工作就是將根據用戶請求來加載不同的模塊，項目用使用ui-router來處理路由跳轉，可以從route入手來完成模塊的懶加載.
具體方法是:在用戶操作路由跳轉時，根據用戶要跳轉到的state，去加載此state所屬的模塊.基於此，需要添加一個state和模塊之間的映射，最開始的時候使用requireJS來加載，發現腳本可以加載進來，但是angular中註冊的控制器/services/filter等均不起作用.調查發現，angular在調用bootstrap方法之後註冊的控制器之類的服務不會再被調用.基於此，引入ocLazyLoad來加載(ocLazyLoad對angular源碼有一些注入修改).
至此為止，基本實現按需加載，但還有以下幾個問題：
模塊之間項目依賴
因為存在一些模塊之間項目之間有強依賴，對此的處理是在配置文件中添加模塊之間的依賴關係，在加載某個模塊之前查看其是否有依賴模塊，如果有的話，優先加載其依賴模塊，待依賴模塊加載完成後再去加載當前模塊
指令懶加載;
Angular中可以通過$compile來實現指令之間的相互依賴，對此的處理是配置指令名和指令模塊的依賴，當用到某個指令的時候，先去加載其模塊，然後執行編譯方法.這種解決方案能解決大部分的指令依賴.
指令的位置問題.項目中大多用到的都是長頁面，每一個長頁面劃分為若干個區域，每一個區域都是一個指令.使用攔截的時候會有一個問題，就是每個指令加載時間的長短不一樣，先回來的指令會優先append到dom上，從而導致頁面佈局的不確定性.解決方案是，使用deffer機制，待所有指令加載/編譯完成後，再往dom樹上添加執行.
指令之間的依賴:指令之間也存在項目依賴，對此的解決方案是將相互依賴的指令合併為一個模塊，打包到同一個腳本文件中.這個方案能解決大部分的指令依賴，但是無法解決初始化過程中的依賴.可能存在某個指令編譯的時候，其依賴的指令還未完成編譯.對於這樣的超級特殊例子，只有在頁面初始化的時候加載腳本和template.
以上就是在整個項目進程中遇到的問題，基本每前進一次都是踩著坑，好多東西都是第一次接觸，感覺還是學到了一些東西.可能好多問題的解決方案不是很明確.以上所有問題其他人都遇到過，只要用好搜索引擎，加上自己好好閱讀/理解別人的代碼.所有問題都可以得到圓滿的解決
關於這篇淺談angular懶加載的一些坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。