對(duì)于微信端來(lái)說(shuō)，其實(shí)使用ionic是一個(gè)比較大的前端框架。

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

但是使用ionic有一個(gè)明顯的優(yōu)點(diǎn)就是，能夠做到一端開(kāi)發(fā)，三端同步上線。

這個(gè)梗說(shuō)了好多遍了，但確實(shí)是這樣子的，ios和安卓都能跑了，為什么在公司的微信公眾號(hào)，還要再重新開(kāi)發(fā)呢。

這就是我一開(kāi)始研究這個(gè)解決方案的初衷。

其實(shí)在這個(gè)方向的研究目的并不是要在性能上達(dá)到一個(gè)很好的高度，而是在首頁(yè)打開(kāi)速度上要取得明顯的時(shí)間優(yōu)勢(shì)。

最開(kāi)始使用requestjs把所有的文件壓縮打包成一個(gè)文件，這個(gè)方案在項(xiàng)目還很小或者說(shuō)還不是很大的時(shí)候，

將多文件小文件壓縮成少文件較大文件，確實(shí)較少了網(wǎng)絡(luò)下載請(qǐng)求的時(shí)間同時(shí)也變相的提速了開(kāi)始應(yīng)用的時(shí)間。

但是當(dāng)項(xiàng)目中加入了微信授權(quán)，這個(gè)過(guò)程會(huì)增加3秒左右的進(jìn)入首頁(yè)的時(shí)間。

然后當(dāng)項(xiàng)目越做越大，被壓縮后的文件越來(lái)越大，使得網(wǎng)絡(luò)下載時(shí)間增加，

從點(diǎn)擊鏈接，進(jìn)入頁(yè)面，開(kāi)始下載文件，下載完成，進(jìn)行微信授權(quán)，授權(quán)完成頁(yè)面跳轉(zhuǎn)回來(lái)，再加載緩存文件（可能還重新下載），最后啟動(dòng)項(xiàng)目，進(jìn)入首頁(yè)。

這樣一個(gè)過(guò)程，像我們公司項(xiàng)目比較大的時(shí)候，在安卓端（以下說(shuō)的時(shí)間基本上都是指在安卓手機(jī)上的時(shí)間，在ios上，只要不是網(wǎng)絡(luò)問(wèn)題，都挺快的）需要24-37秒鐘。

當(dāng)然這個(gè)24秒還包含了在首頁(yè)加載太多的業(yè)務(wù)的關(guān)系。反正我剛接手的時(shí)候是這個(gè)時(shí)間。

一開(kāi)始我的嘗試優(yōu)化的方案是把微信授權(quán)的文件和主體的文件分離，首先下載一個(gè)小文件，進(jìn)行微信授權(quán)，授權(quán)完畢，回調(diào)回來(lái)再下載大文件。（這個(gè)過(guò)程是同事實(shí)現(xiàn)的。）

調(diào)整首頁(yè)的業(yè)務(wù)，和產(chǎn)品協(xié)商有哪些業(yè)務(wù)可以從首頁(yè)中移到別的頁(yè)面去。

最后重構(gòu)了業(yè)務(wù)邏輯代碼，把跟首頁(yè)無(wú)關(guān)的業(yè)務(wù)封裝到獨(dú)立的服務(wù)里面。（我接手的時(shí)候很多全局通用的服務(wù)都使用$rootscope實(shí)現(xiàn)，這里也需要提醒大家一下）

這樣一套調(diào)整優(yōu)化之后，同一個(gè)測(cè)試設(shè)備上，從點(diǎn)擊鏈接到進(jìn)去首頁(yè)的時(shí)間是8-10秒。

最后甚至去掉了微信授權(quán)，先讓用戶進(jìn)入首頁(yè)，再需要用戶信息的時(shí)候再進(jìn)行授權(quán)，時(shí)間還是5-10秒

有了明顯的優(yōu)化。

但是微信3、5、8原則，不知道大家有沒(méi)有聽(tīng)過(guò)這個(gè)原則，就是說(shuō)頁(yè)面打開(kāi)時(shí)間在3秒5秒8秒的時(shí)候分別對(duì)應(yīng)了一定的跳出率，雖然說(shuō)跳出率這種東西不能完全的認(rèn)為就是這個(gè)問(wèn)題引起的，但不可否認(rèn)的是有一定的影響因素在里面，主要是營(yíng)運(yùn)指標(biāo)，就拿這個(gè)說(shuō)事，那就不得不改了。

在經(jīng)過(guò)了一階段的重構(gòu)代碼，之后，并不能顯著的加快啟動(dòng)速度。

因此我決定放棄重構(gòu)，項(xiàng)目重做。

這次重做涉及的項(xiàng)目還比較多，web端，pc官網(wǎng)，獨(dú)立活動(dòng)地址，還有sdk等等項(xiàng)目都要考慮在內(nèi)。

不止要滿足現(xiàn)在的指標(biāo)，還要滿足在公司發(fā)展的道路上，web端不再是能被提到臺(tái)面上的短板。

整體的前端架構(gòu)設(shè)計(jì)基本上完成了，這個(gè)有需要的話，后面也會(huì)分享給大家。

首先我新建了一個(gè)ionic的tab類型的項(xiàng)目，放到微信中，在同一個(gè)設(shè)備上，從點(diǎn)擊鏈接到進(jìn)入首頁(yè)的時(shí)間是3秒鐘。

ionic在安卓設(shè)備的微信端真的不是很優(yōu)，空白項(xiàng)目也要3秒鐘，那我們加了這么多圖片這么多請(qǐng)求和業(yè)務(wù)，8秒看起來(lái)也挺好了。

我是這么想的，既然小項(xiàng)目的啟動(dòng)時(shí)間會(huì)更快，那為什么不把大項(xiàng)目拆成若干個(gè)小項(xiàng)目呢？

這里我就考慮了按需加載，這個(gè)我在之前的教程中就已經(jīng)有提到了，在ionic入門教程第四課-使用$controllerProvider按需加載controller

這里我說(shuō)的比較簡(jiǎn)單，也只是按需加載了controller文件，只是為了作為一個(gè)技術(shù)上的演示而已。

里面還提到了requestjs技術(shù)，這里先不提。我們純粹的來(lái)看看按需加載。

先說(shuō)說(shuō)簡(jiǎn)要的思路，就是在開(kāi)啟項(xiàng)目的時(shí)候，只加載首頁(yè)的相關(guān)文件，然后啟動(dòng)項(xiàng)目，再切換界面的時(shí)候再去下載新的界面。

把所有的文件細(xì)分，獨(dú)立壓縮，減小下載的流量。

這里需要處理幾個(gè)問(wèn)題，或者說(shuō)是技術(shù)難點(diǎn)，也行。。。

1、所有的文件要支持按需加載

2、文件相關(guān)性怎么實(shí)現(xiàn)

3、文件獨(dú)立壓縮

決解方案：

1、所有的文件要支持按需加載

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; 2、文件相關(guān)性怎么實(shí)現(xiàn)

走配置表的形式

3、文件獨(dú)立壓縮

使用grunt（使用gulp好像也行，還沒(méi)去研究）

注：app.controller = $controllerProvider.register這個(gè)東西我們?cè)诘谒膫€(gè)中有提到，其他的東西都更這個(gè)差不多，都是框架自帶的懶加載的決解方案。 方案和思路說(shuō)的差不多了，接下來(lái)看看怎么實(shí)現(xiàn)吧。我這里新建了一個(gè)tab類型的ionic項(xiàng)目，來(lái)作為演示。 關(guān)于項(xiàng)目名字，大家別太在意，我新建的時(shí)候隨便敲的，要說(shuō)我騷氣，也行。 首先我們要把新建項(xiàng)目里面的controllers和services文件，里面的內(nèi)容分離，之前我在第三課中講過(guò)了使用requirejs分離controller文件和server文件，這里我們不適用requirejs。 首先我們先在app.js里面定義懶加載服務(wù)。這樣我們就可以全局的只用它們，而不再需要再在單文件里面引用注入服務(wù)。 請(qǐng)仔細(xì)看圖。圖中說(shuō)明的很清楚了。注意在1標(biāo)注的位置要把a(bǔ)ngular.module()返回的對(duì)象存起來(lái)，在2標(biāo)注的位置需要使用這個(gè)對(duì)象。 然后拆分controllers文件和services文件，首先新建一個(gè)文件夾controller，里面新建一個(gè)文件AccountCtrl.js 然后在controllers中把AccountCtrl的內(nèi)容復(fù)制出來(lái) 修改頭部 這里也需要注意標(biāo)注2這里使用的app.controller其實(shí)是使用了$controllerProvider.register，這里直接使用$controllerProvider.register也可以，但是要保證存在$controllerProvider這個(gè)服務(wù)。所以我在app.js里面定義了。 嗯這個(gè)分離的過(guò)程很簡(jiǎn)單，我故意提出來(lái)說(shuō)，其實(shí)細(xì)心的朋友應(yīng)該能夠發(fā)現(xiàn)，我在拆分這些文件的時(shí)候，并沒(méi)有關(guān)注過(guò)這里面實(shí)現(xiàn)的業(yè)務(wù)，只是把文件復(fù)制過(guò)來(lái)修改了頭部。也就是說(shuō)，不管你的項(xiàng)目之前是用什么方式開(kāi)發(fā)的，要使用我提供的這個(gè)方案，修改起來(lái)也很容易，而且不容易出錯(cuò)。 同樣的拆分其他的控制器，將controllers文件拆分成 同樣的方法拆分服務(wù)，需要注意的是服務(wù)使用的不是app.controller，而是app.factory 到此完成了第一個(gè)問(wèn)題，文件拆分，并讓它們符合懶加載的規(guī)范。 接下來(lái)處理第二個(gè)問(wèn)題，配置表。 首先我們新建一個(gè)文件config.js放在那都行。 使用$provide.constant來(lái)定義了一個(gè)靜態(tài)變量，在1圖中我們已經(jīng)說(shuō)過(guò)了需要導(dǎo)入這個(gè)’JS_REQUIRES‘ 這里我還多做了一個(gè)優(yōu)化，把業(yè)務(wù)相關(guān)聯(lián)的文件按照界面寫成分組，這樣在代碼中就不用把太多的精力放在文件關(guān)聯(lián)上。 所有的關(guān)聯(lián)都在這個(gè)配置表里面實(shí)現(xiàn) 就是把我們第四課中提到的這個(gè)文件地址寫到配置里面，這樣子在代碼中就只需要關(guān)注這個(gè)幾面關(guān)聯(lián)的模塊，而不是模塊的所有文件。 這也算是一種簡(jiǎn)化的模塊化。 上圖是第四課中的寫法，我們這里使用類似但不相同的寫法。第四課中是使用require和$q的組合實(shí)現(xiàn)的， 這里我們使用的是oclazyload和$q的組合實(shí)現(xiàn)。 首先在路由中的定義類似。這里提供了兩種方案，一種只關(guān)聯(lián)少量文件的，可以寫上所有的文件，第二種關(guān)聯(lián)文件較多的時(shí)候，寫上關(guān)聯(lián)的模塊名稱。 上面那個(gè)地方如果是兩個(gè)文件的話可以寫成loadSequence('ChatsCtrl','ChatsService')。 暫不支持模塊和文件混合的方式。需要的朋友可以自己修改一下loadSequence方法，判斷如果寫的key在模塊中匹配不到就去匹配單文件。 到此本次方案基本上都實(shí)現(xiàn)了，在瀏覽器中運(yùn)行查看。 首次加載的時(shí)候只加載需要的文件，切換頁(yè)面再加載其他文件，表現(xiàn)與預(yù)期設(shè)想相同。 用這個(gè)方案在我們公司的項(xiàng)目中做過(guò)測(cè)試。在文件壓縮之后，在同一個(gè)測(cè)試設(shè)備上，從點(diǎn)擊鏈接到進(jìn)入首頁(yè)，首次加載時(shí)間為3-5秒，再次加載時(shí)間為1-2秒。 而且還有一個(gè)明顯的好處，不管后續(xù)項(xiàng)目的復(fù)雜度提升多少，都不會(huì)嚴(yán)重的影響這個(gè)時(shí)間。 上圖中還有一個(gè)需要關(guān)注的地方，就是html文件并不是按需加載的。這個(gè)可能是我接下來(lái)需要要研究的內(nèi)容。 還有就是單文件壓縮，配置表管理會(huì)變得非常的繁瑣。可以考慮用requirejs把這些小模塊按照獨(dú)立的小模塊做一個(gè)個(gè)單獨(dú)的打包。 這些東西都是這個(gè)方案可以繼續(xù)前進(jìn)的方向。希望高手能跟我一起完善它們。 至于第三點(diǎn)獨(dú)立打包，是使用了grunt的grunt-contrib-uglify插件，用法很容易的，大家百度一下就好。有不懂得話，我后續(xù)單獨(dú)出一個(gè)將這個(gè)單獨(dú)打包的教程。 由于篇幅問(wèn)題，我這里就不詳細(xì)說(shuō)明了。 看到好多的博客文章的結(jié)尾都會(huì)放上兩個(gè)支付的二維碼，還寫著博主很辛苦請(qǐng)博主喝杯咖啡。我也好想丟兩個(gè)給大家掃一掃，但是我又覺(jué)得這錢太少了，沒(méi)什么興趣。嗯？有需要合作的可以小窗聯(lián)系我。培訓(xùn)質(zhì)詢什么的，你懂的。當(dāng)然找我質(zhì)詢其實(shí)是免費(fèi)的。我在想要是回答收費(fèi)，那我可以辭職回家了。哈哈 項(xiàng)目Demo地址：http://pan.baidu.com/s/1i4Qmkz7如果你還有什么其他的問(wèn)題,可以通過(guò)以下方式找到我新浪微博:小虎Oni 微信公眾號(hào):ionic__
有其他問(wèn)題的可以關(guān)注一下公眾號(hào)提問(wèn)(右側(cè)雙下劃線)：ionic__還是那句公眾號(hào)暫時(shí)沒(méi)人維護(hù)。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuoni/p/7642295.html

總結(jié)

以上是生活随笔為你收集整理的ionic入门教程第十六课-在微信中使用ionic的解决方案（按需加载加强版）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。