微信小程序分包的超詳細(xì)步驟
前言
微信小程序開發(fā)過(guò)程中,隨著業(yè)務(wù)不斷迭代,程序包的體積越來(lái)越大,使用分包加載是開發(fā)者必須面對(duì)的問(wèn)題。
正常情況下,小程序首次啟動(dòng)時(shí),會(huì)將整個(gè)代碼包下載下來(lái),所以如果代碼包過(guò)大,會(huì)影響小程序首次啟動(dòng)時(shí)間,因此微信官方對(duì)小程序代碼包做了大小限制。
一、為什么要使用分包?
1.小程序要求開發(fā)過(guò)程中壓縮包的體積不能大于2M,否則無(wú)法提交發(fā)布
2.對(duì)小程序進(jìn)行分包,可以優(yōu)化小程序首次啟動(dòng)下載時(shí)間,因?yàn)榉职笾靼捏w積小了,加載更快,提高了用戶體驗(yàn)
3.將小程序劃分成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶在使用是按需加載,提升了程序性能
提示:小程序啟動(dòng)時(shí),默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)的頁(yè)面,當(dāng)用戶進(jìn)入分包內(nèi)的某個(gè)頁(yè)面時(shí),客戶端會(huì)把對(duì)應(yīng)的分包下載下來(lái)。
說(shuō)明:合理使用分包可以較好地優(yōu)化小程序的加載時(shí)間,提升用戶體驗(yàn)。
二、分包大小查看
在微信開發(fā)工具->詳情->基本信息面板中即可查看項(xiàng)目及分包信息,如果不采用分包,小程序總大小不能超過(guò)2MB,如果采用分包,總大小可以達(dá)到20MB,每個(gè)包不能超過(guò)2MB
三、如何使用分包?
首先根據(jù)項(xiàng)目需求規(guī)劃目錄結(jié)構(gòu),想需要分包的代碼放在獨(dú)立的目錄中,如下圖
跳轉(zhuǎn)到分包的路由 wx.navigateTo({ url: '/pagesA/pages/activitys/design/index' })
【注意事項(xiàng)】
1.tabBar 里配置的路徑必須放在主包里
2.使用 subpackages 進(jìn)行分包路徑聲明,subpackages 配置路徑外的目錄會(huì)被打包到主包中
3.不同的分包之間的資源不能相互引用,但都可引用主包中的資源
【引用原則】
packageA 無(wú)法 require packageB JS 文件,但可以 require 主包、packageA 內(nèi)的 JS 文件;使用 分包異步化 時(shí)不受此條限制
packageA 無(wú)法 import packageB 的 template,但可以 require 主包、packageA 內(nèi)的 template
packageA 無(wú)法使用 packageB 的資源,但可以使用主包、packageA 內(nèi)的資源
四、獨(dú)立分包
獨(dú)立分包是小程序中一種特殊類型的分包,可以獨(dú)立于主包和其他分包運(yùn)行。從獨(dú)立分包中頁(yè)面進(jìn)入小程序時(shí),不需要下載主包。當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁(yè)面時(shí),主包才會(huì)被下載。
開發(fā)者可以按需將某些具有一定功能獨(dú)立性的頁(yè)面配置到獨(dú)立分包中。當(dāng)小程序從普通的分包頁(yè)面啟動(dòng)時(shí),需要首先下載主包;而獨(dú)立分包不依賴主包即可運(yùn)行,可以很大程度上提升分包頁(yè)面的啟動(dòng)速度。
說(shuō)明:一個(gè)小程序中可以有多個(gè)獨(dú)立分包。
開發(fā)者通過(guò)在app.json的subpackages字段中對(duì)應(yīng)的分包配置項(xiàng)中定義independent字段聲明對(duì)應(yīng)分包為獨(dú)立分包(上圖已備注)
【限制】
1.獨(dú)立分包中不能依賴主包和其他分包中的內(nèi)容,包括 js 文件、template、wxss、自定義組件、插件等(使用 分包異步化 時(shí) js 文件、自定義組件、插件不受此條限制)
2.主包中的 app.wxss 對(duì)獨(dú)立分包無(wú)效,應(yīng)避免在獨(dú)立分包頁(yè)面中使用 app.wxss 中的樣式
3.App 只能在主包內(nèi)定義,獨(dú)立分包中不能定義 App,會(huì)造成無(wú)法預(yù)期的行為
4.獨(dú)立分包中暫時(shí)不支持使用插件
五、分包預(yù)下載
開發(fā)者可以通過(guò)配置,在進(jìn)入小程序某個(gè)頁(yè)面時(shí),由框架自動(dòng)預(yù)下載可能需要的分包,提升進(jìn)入后續(xù)分包頁(yè)面時(shí)的啟動(dòng)速度。對(duì)于獨(dú)立分包,也可以預(yù)下載主包。
注意:分包預(yù)下載目前只支持通過(guò)配置方式使用,暫不支持通過(guò)調(diào)用 API 完成
【限制】
1.同一個(gè)分包中的頁(yè)面享有共同的預(yù)下載大小限額2MB,限額會(huì)在工具中打包時(shí)校驗(yàn)
2.如,頁(yè)面 A 和 B 都在同一個(gè)分包中,A 中預(yù)下載總大小 0.5M 的分包,B中最多只能預(yù)下載總大小 1.5M 的分包
總結(jié)
到此這篇關(guān)于微信小程序分包的文章就介紹到這了,更多相關(guān)微信小程序分包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
腳注(Footnote)是向用戶提供更多信息的一個(gè)最佳途徑,也是主體信息的一個(gè)有效補(bǔ)充,常見于各種印刷書籍中。2009-09-09學(xué)習(xí)javascript面向?qū)ο?理解javascript對(duì)象
這篇文章主要介紹了javascript對(duì)象,學(xué)習(xí)javascript面向?qū)ο?,感興趣的小伙伴們可以參考一下2016-01-01動(dòng)態(tài)的創(chuàng)建一個(gè)元素createElement及刪除一個(gè)元素
本文用示例為大家介紹下動(dòng)態(tài)創(chuàng)建一個(gè)元素createElement及刪除一個(gè)元素,感興趣的朋友可以參考下2014-01-01微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01el-table el-table-column表頭嵌套循環(huán)數(shù)據(jù)的示例代碼
本文介紹了使用兩個(gè)數(shù)組來(lái)實(shí)現(xiàn)el-table中表頭的嵌套循環(huán),一個(gè)數(shù)組用于循環(huán)表格數(shù)據(jù),另一個(gè)用于循環(huán)表頭,幫助讀者更好地理解和應(yīng)用表頭嵌套功能,感興趣的朋友跟隨小編一起看看吧2024-09-09關(guān)于獲取DIV內(nèi)部?jī)?nèi)容報(bào)錯(cuò)的原因分析及解決辦法
這篇文章主要介紹了關(guān)于獲取DIV內(nèi)部?jī)?nèi)容報(bào)錯(cuò)的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-01-01