ionic入門教程第十六課-在微信中使用ionic的解決方案（按需加載增強版）

對於微信端來講，其實使用ionic是一個比較大的前端框架。

有更多比較輕量化的前端框架能夠選擇。

可是使用ionic有一個明顯的優勢就是，可以作到一端開發，三端同步上線。

這個梗說了好多遍了，但確實是這樣子的，ios和安卓都能跑了，爲何在公司的微信公衆號，還要再從新開發呢。

這就是我一開始研究這個解決方案的初衷。

其實在這個方向的研究目的並非要在性能上達到一個很好的高度，而是在首頁打開速度上要取得明顯的時間優點。

最開始使用requestjs把全部的文件壓縮打包成一個文件，這個方案在項目還很小或者說還不是很大的時候，

將多文件小文件壓縮成少文件較大文件，確實較少了網絡下載請求的時間同時也變相的提速了開始應用的時間。

可是當項目中加入了微信受權，這個過程會增長3秒左右的進入首頁的時間。

而後當項目越作越大，被壓縮後的文件愈來愈大，使得網絡下載時間增長，

從點擊連接，進入頁面，開始下載文件，下載完成，進行微信受權，受權完成頁面跳轉回來，再加載緩存文件（可能還從新下載），最後啓動項目，進入首頁。

這樣一個過程，像咱們公司項目比較大的時候，在安卓端（如下說的時間基本上都是指在安卓手機上的時間，在ios上，只要不是網絡問題，都挺快的）須要24-37秒鐘。

固然這個24秒還包含了在首頁加載太多的業務的關係。反正我剛接手的時候是這個時間。

一開始個人嘗試優化的方案是把微信受權的文件和主體的文件分離，首先下載一個小文件，進行微信受權，受權完畢，回調回來再下載大文件。（這個過程是同事實現的。）

調整首頁的業務，和產品協商有哪些業務能夠從首頁中移到別的頁面去。

最後重構了業務邏輯代碼，把跟首頁無關的業務封裝到獨立的服務裏面。（我接手的時候不少全局通用的服務都使用$rootscope實現，這裏也須要提醒你們一下）

這樣一套調整優化以後，同一個測試設備上，從點擊連接到進去首頁的時間是8-10秒。

最後甚至去掉了微信受權，先讓用戶進入首頁，再須要用戶信息的時候再進行受權，時間仍是5-10秒

有了明顯的優化。

可是微信三、五、8原則，不知道你們有沒有聽過這個原則，就是說頁面打開時間在3秒5秒8秒的時候分別對應了必定的跳出率，雖說跳出率這種東西不能徹底的認爲就是這個問題引發的，但不能否認的是有必定的影響因素在裏面，主要是營運指標，就拿這個說事，那就不得不改了。

在通過了一階段的重構代碼，以後，並不能顯著的加快啓動速度。

所以我決定放棄重構，項目重作。

此次重作涉及的項目還比較多，web端，pc官網，獨立活動地址，還有sdk等等項目都要考慮在內。

不止要知足如今的指標，還要知足在公司發展的道路上，web端再也不是能被提到檯面上的短板。

總體的前端架構設計基本上完成了，這個有須要的話，後面也會分享給你們。

首先我新建了一個ionic的tab類型的項目，放到微信中，在同一個設備上，從點擊連接到進入首頁的時間是3秒鐘。

ionic在安卓設備的微信端真的不是很優，空白項目也要3秒鐘，那咱們加了這麼多圖片這麼多請求和業務，8秒看起來也挺好了。

我是這麼想的，既然小項目的啓動時間會更快，那爲何不把大項目拆成若干個小項目呢？

這裏我就考慮了按需加載，這個我在以前的教程中就已經有提到了，在ionic入門教程第四課-使用$controllerProvider按需加載controller

這裏我說的比較簡單，也只是按需加載了controller文件，只是爲了做爲一個技術上的演示而已。

裏面還提到了requestjs技術，這裏先不提。咱們純粹的來看看按需加載。

先說說簡要的思路，就是在開啓項目的時候，只加載首頁的相關文件，而後啓動項目，再切換界面的時候再去下載新的界面。

把全部的文件細分，獨立壓縮，減少下載的流量。

這裏須要處理幾個問題，或者說是技術難點，也行。。。

一、全部的文件要支持按需加載

二、文件相關性怎麼實現

三、文件獨立壓縮

決解方案：

一、全部的文件要支持按需加載

app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
app.value = $provide.value;

二、文件相關性怎麼實現

走配置表的形式

三、文件獨立壓縮

使用grunt（使用gulp好像也行，還沒去研究）

注：app.controller = $controllerProvider.register這個東西咱們在第四個中有提到，其餘的東西都更這個差很少，都是框架自帶的懶加載的決解方案。

方案和思路說的差很少了，接下來看看怎麼實現吧。我這裏新建了一個tab類型的ionic項目，來做爲演示。
關於項目名字，你們別太在乎，我新建的時候隨便敲的，要說我騷氣，也行。 

首先咱們要把新建項目裏面的controllers和services文件，裏面的內容分離，以前我在第三課中講過了使用requirejs分離controller文件和server文件，這裏咱們不適用requirejs。

首先咱們先在app.js裏面定義懶加載服務。這樣咱們就能夠全局的只用它們，而再也不須要再在單文件裏面引用注入服務。

請仔細看圖。圖中說明的很清楚了。注意在1標註的位置要把angular.module()返回的對象存起來，在2標註的位置須要使用這個對象。

而後拆分controllers文件和services文件，首先新建一個文件夾controller，裏面新建一個文件AccountCtrl.js

而後在controllers中把AccountCtrl的內容複製出來

修改頭部

這裏也須要注意標註2這裏使用的app.controller實際上是使用了$controllerProvider.register，這裏直接使用$controllerProvider.register也能夠，可是要保證存在$controllerProvider這個服務。因此我在app.js裏面定義了。

嗯這個分離的過程很簡單，我故意提出來講，其實細心的朋友應該可以發現，我在拆分這些文件的時候，並無關注過這裏面實現的業務，只是把文件複製過來修改了頭部。也就是說，無論你的項目以前是用什麼方式開發的，要使用我提供的這個方案，修改起來也很容易，並且不容易出錯。

一樣的拆分其餘的控制器，將controllers文件拆分紅

一樣的方法拆分服務，須要注意的是服務使用的不是app.controller，而是app.factory

到此完成了第一個問題，文件拆分，並讓它們符合懶加載的規範。

接下來處理第二個問題，配置表。

首先咱們新建一個文件config.js放在那都行。

使用$provide.constant來定義了一個靜態變量，在1圖中咱們已經說過了須要導入這個’JS_REQUIRES‘

這裏我還多作了一個優化，把業務相關聯的文件按照界面寫成分組，這樣在代碼中就不用把太多的精力放在文件關聯上。

全部的關聯都在這個配置表裏面實現

就是把咱們第四課中提到的這個文件地址寫到配置裏面，這樣子在代碼中就只須要關注這個幾面關聯的模塊，而不是模塊的全部文件。

這也算是一種簡化的模塊化。

上圖是第四課中的寫法，咱們這裏使用相似但不相同的寫法。第四課中是使用require和$q的組合實現的，

這裏咱們使用的是oclazyload和$q的組合實現。

首先在路由中的定義相似。這裏提供了兩種方案，一種只關聯少許文件的，能夠寫上全部的文件，第二種關聯文件較多的時候，寫上關聯的模塊名稱。

上面那個地方若是是兩個文件的話能夠寫成loadSequence('ChatsCtrl','ChatsService')。

暫不支持模塊和文件混合的方式。須要的朋友能夠本身修改一下loadSequence方法，判斷若是寫的key在模塊中匹配不到就去匹配單文件。

到此本次方案基本上都實現了，在瀏覽器中運行查看。

首次加載的時候只加載須要的文件，切換頁面再加載其餘文件，表現與預期設想相同。

用這個方案在咱們公司的項目中作過測試。在文件壓縮以後，在同一個測試設備上，從點擊連接到進入首頁，首次加載時間爲3-5秒，再次加載時間爲1-2秒。

並且還有一個明顯的好處，無論後續項目的複雜度提高多少，都不會嚴重的影響這個時間。

上圖中還有一個須要關注的地方，就是html文件並非按需加載的。這個多是我接下來須要要研究的內容。

還有就是單文件壓縮，配置表管理會變得很是的繁瑣。能夠考慮用requirejs把這些小模塊按照獨立的小模塊作一個個單獨的打包。

這些東西都是這個方案能夠繼續前進的方向。但願高手能跟我一塊兒完善它們。

至於第三點獨立打包，是使用了grunt的grunt-contrib-uglify插件，用法很容易的，你們百度一下就好。有不懂得話，我後續單獨出一個將這個單獨打包的教程。

因爲篇幅問題，我這裏就不詳細說明了。

看到好多的博客文章的結尾都會放上兩個支付的二維碼，還寫着博主很辛苦請博主喝杯咖啡。我也好想丟兩個給你們掃一掃，可是我又以爲這錢太少了，沒什麼興趣。嗯？有須要合做的能夠小窗聯繫我。培訓質詢什麼的，你懂的。固然找我質詢實際上是免費的。我在想要是回答收費，那我能夠辭職回家了。哈哈

項目Demo地址：http://pan.baidu.com/s/1i4Qmkz7
若是你還有什麼其餘的問題,能夠經過如下方式找到我

新浪微博:小虎Oni
微信公衆號:ionic__

有其餘問題的能夠關注一下公衆號提問(右側雙下劃線)：ionic__
仍是那句公衆號暫時沒人維護。