摘要:開(kāi)發(fā)者需要將小程序劃分成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶(hù)在使用時(shí)按需進(jìn)行加載。從獨(dú)立分包中頁(yè)面進(jìn)入小程序時(shí),不需要下載主包,當(dāng)小程序進(jìn)入不同分包的時(shí)候,主包才會(huì)被下載。
</>復(fù)制代碼
開(kāi)發(fā)者需要將小程序劃分成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶(hù)在使用時(shí)按需進(jìn)行加載。
在構(gòu)建小程序分包項(xiàng)目時(shí),構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包。每個(gè)使用分包小程序必須包含
一個(gè)主包,所謂的主包,即放置默認(rèn)啟動(dòng)頁(yè)/TabBar 頁(yè)面,以及一些所有分包需要用到
整個(gè)小程序所有分包大小不超過(guò) 8M單個(gè)分包/主包大小不能超2M
對(duì)小程序進(jìn)行分包,可以?xún)?yōu)化小程序首次啟動(dòng)的下載時(shí)間,以及在多團(tuán)隊(duì)共同開(kāi)發(fā)時(shí)可以更高的解耦協(xié)作。
配置方法:
假設(shè)支持分包的小程序目錄結(jié)構(gòu)
</>復(fù)制代碼
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
開(kāi)發(fā)者通過(guò)在 app.json subPackages 字段聲明項(xiàng)目分包結(jié)構(gòu):
</>復(fù)制代碼
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
subPackages 中,每個(gè)分包的配置有以下幾項(xiàng):
字段 | 類(lèi)型 | 說(shuō)明 |
---|---|---|
root | String | 分包根目錄 |
name | String | 分包別名,分包預(yù)下載時(shí)可以使用 |
pages | StringArray | 分包頁(yè)面路徑,相對(duì)與分包根目錄 |
independent | Boolean | 分包是否是獨(dú)立分包 |
打包原則
1.聲明 subPackages 后,將按 subPackages 配置路徑進(jìn)行打包,subPackages 配置路徑外的目
2.錄將被打包到 app(主包) 中
3.app(主包)也可以有自己的 pages(即最外層的 pages 字段)
4.subPackage 的根目錄不能是另外一個(gè) subPackage 內(nèi)的子目錄
5.tabBar 頁(yè)面必須在 app(主包)內(nèi)
引用原則
packageA 無(wú)法 require packageB JS 文件,但可以 require app、自己 package 內(nèi)的 JS 文件
packageA 無(wú)法 import packageB 的 template,但可以 require app、自己 package 內(nèi)的 template
packageA 無(wú)法使用 packageB 的資源,但可以使用 app、自己 package 內(nèi)的資源
獨(dú)立分包
獨(dú)立分包是小程序的一種特殊類(lèi)型的分包,可以獨(dú)立于主包和其他分包獨(dú)立運(yùn)行。從獨(dú)立
分包中頁(yè)面進(jìn)入小程序時(shí),不需要下載主包,當(dāng)小程序進(jìn)入不同分包的時(shí)候,主包才會(huì)被下載。
可發(fā)者可以按需將某些具有一定功能獨(dú)立性的頁(yè)面配置到獨(dú)立分包中。當(dāng)小程序從普通的
分包頁(yè)面中啟動(dòng)時(shí),需要首先下載主包;而獨(dú)立分包不依賴(lài)主包即可運(yùn)行,可以很大程度上
提升分包頁(yè)面的啟動(dòng)速度, 一個(gè)小程序中可以有多個(gè)獨(dú)立分包。
配置方法:
假設(shè)小程序的目錄如下;
</>復(fù)制代碼
├── app.js
├── app.json
├── app.wxss
├── moduleA
│ └── pages
│ ├── rabbit
│ └── squirrel
├── moduleB
│ └── pages
│ ├── pear
│ └── pineapple
├── pages
│ ├── index
│ └── logs
└── utils
開(kāi)發(fā)者可以通過(guò)在 app.json 的 subpackages 字段中的分包配置中自定義 independent
字段聲明對(duì)應(yīng)分包為獨(dú)立分包
</>復(fù)制代碼
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "moduleA",
"pages": [
"pages/rabbit",
"pages/squirrel"
]
}, {
"root": "moduleA",
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true
限制:
獨(dú)立分包屬于分包的一種,普通分包的所有限制獨(dú)立分包有效。獨(dú)立分包中插件
自定義組件的處理方式同普通分包。
使用獨(dú)立分包需要注意:
</>復(fù)制代碼
1.獨(dú)立分包中不能依賴(lài)主包和其他分包中的內(nèi)容,包括js 文件,template,
2.wxss,自定義組件,插件等,主包的app.wxss 對(duì)獨(dú)立分包無(wú)效。應(yīng)避免在
3.獨(dú)立分包頁(yè)面中使用 app.wxss 中的樣式。
4.App 只能在主包中定義,獨(dú)立分包中不能定義 App 會(huì)造成無(wú)法預(yù)期的行為。
5.獨(dú)立分包中暫時(shí)不支持使用插件。
注意事項(xiàng):
(1) 關(guān)于 getApp()
與普通分包不同,獨(dú)立分包運(yùn)行時(shí),App 并不一定被注冊(cè),因此,getApp()
也不一定獲得App 對(duì)象,
當(dāng)用戶(hù)從獨(dú)立分包頁(yè)面啟動(dòng)小程序時(shí),主包不存在,App 也不存在,此時(shí)調(diào)用
getApp 獲取到的是undefined 。當(dāng)用戶(hù)進(jìn)入普通分包或者主包時(shí),主包才會(huì)
被下載, App 才會(huì)被注冊(cè)。
當(dāng)用戶(hù)從普通分包或者主包的頁(yè)面挑到獨(dú)立分包的時(shí)候,主包已經(jīng)存在,此時(shí)
調(diào)用getApp(),才能獲得真正的App。
為了滿(mǎn)足獨(dú)立分包中的這一需求,基礎(chǔ)庫(kù)2.2.4 版本開(kāi)始getApp 支持,
allowDefault 參數(shù),在 App 未定義的時(shí)候返回一個(gè)默認(rèn)實(shí)現(xiàn)。當(dāng)主包
</>復(fù)制代碼
加載 App 被注冊(cè)的時(shí)候,默認(rèn)實(shí)現(xiàn)中被定義的屬性會(huì)被合并覆蓋到默認(rèn)的App 中。
示例:
</>復(fù)制代碼
const app = getApp({allowDefault:true})
app.data = 456
app.global = {}
.app.js 中
App({
data:12
other:"hello
})
console.log(getApp()) // {global: {} ,data: 456,other: "hello"}
(2) 關(guān)于 App 的生命周期
當(dāng)從獨(dú)立分包中啟動(dòng)小程序時(shí),主包的中的onLanch 和首次 onShow 會(huì)從
獨(dú)立分包頁(yè)面首次進(jìn)入主包或普通分包頁(yè)面時(shí)調(diào)用。
分包下載:
開(kāi)發(fā)者可以通過(guò)配置,在進(jìn)入小程序某個(gè)頁(yè)面時(shí),由框架自動(dòng)預(yù)下載可需要的分包。
提升進(jìn)入后續(xù)分包頁(yè)面的速度,對(duì)于獨(dú)立分包,可以預(yù)下載主包。
配置方法:
預(yù)下載分包行為在進(jìn)入某個(gè)頁(yè)面的時(shí)候觸發(fā),在通過(guò)app.json 增加 preloadRule
</>復(fù)制代碼
{
"pages": ["pages/index"],
"subpackages": [
{
"root": "important",
"pages": ["index"],
},
{
"root": "sub1",
"pages": ["index"],
},
{
"name": "hello",
"root": "path/to",
"pages": ["index"]
},
{
"root": "sub3",
"pages": ["index"]
},
{
"root": "indep",
"pages": ["index"],
"independent": true
}
],
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["important"]
},
"sub1/index": {
"packages": ["hello", "sub3"]
},
"sub3/index": {
"packages": ["path/to"]
},
"indep/index": {
"packages": ["__APP__"]
preloadRule 中,key 是頁(yè)面路徑, value 是進(jìn)入此頁(yè)面的 預(yù)下載配置,每個(gè)配置都
有以下幾項(xiàng)。
字段 | 類(lèi)型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
---|---|---|---|---|
packages | StringArray | 是 | 無(wú) | 進(jìn)入頁(yè)面后預(yù)下載分包的 root 或 name。__APP__ 表示主包。 |
network | String | 否 | WiFi | 在指定網(wǎng)絡(luò)下預(yù)下載,可選值為:all: 不限網(wǎng)絡(luò) wifi: 僅wifi下預(yù)下載 |
限制
同一個(gè)分包中的頁(yè)面享有共同的預(yù)下載大小限額2M,會(huì)在工具打包時(shí)校驗(yàn)。
</>復(fù)制代碼
如:頁(yè)面A 和頁(yè)面B 都在同一個(gè)分包中,A 中預(yù)下載大小為0.5 M的分包,B 中最大多只能預(yù)下載大小1.5 的分包。
結(jié)語(yǔ)
感謝您的觀看,如有不足之處,歡迎批評(píng)指正。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/27537.html
摘要:希望大家看完這篇文章能對(duì)小程序性能優(yōu)化有一定的認(rèn)識(shí),如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正,如果喜歡,歡迎點(diǎn)贊收藏。 小程序從發(fā)布到現(xiàn)在也已經(jīng)有將近兩年的時(shí)間,越來(lái)越來(lái)多的公司開(kāi)始重視小程序生態(tài)帶來(lái)的流量,今年也由于小程序平臺(tái)對(duì)外能力的越來(lái)越多的開(kāi)放以及小程序平臺(tái)的自身優(yōu)化,越來(lái)越多的開(kāi)發(fā)者也自主的投入到小程序的開(kāi)發(fā)當(dāng)中,現(xiàn)在,作為前端如果會(huì)寫(xiě)小程序,絕對(duì)是一個(gè)不折不扣的面試加分項(xiàng)。相...
摘要:希望大家看完這篇文章能對(duì)小程序性能優(yōu)化有一定的認(rèn)識(shí),如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正,如果喜歡,歡迎點(diǎn)贊收藏。 小程序從發(fā)布到現(xiàn)在也已經(jīng)有將近兩年的時(shí)間,越來(lái)越來(lái)多的公司開(kāi)始重視小程序生態(tài)帶來(lái)的流量,今年也由于小程序平臺(tái)對(duì)外能力的越來(lái)越多的開(kāi)放以及小程序平臺(tái)的自身優(yōu)化,越來(lái)越多的開(kāi)發(fā)者也自主的投入到小程序的開(kāi)發(fā)當(dāng)中,現(xiàn)在,作為前端如果會(huì)寫(xiě)小程序,絕對(duì)是一個(gè)不折不扣的面試加分項(xiàng)。相...
摘要:希望大家看完這篇文章能對(duì)小程序性能優(yōu)化有一定的認(rèn)識(shí),如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正,如果喜歡,歡迎點(diǎn)贊收藏。 小程序從發(fā)布到現(xiàn)在也已經(jīng)有將近兩年的時(shí)間,越來(lái)越來(lái)多的公司開(kāi)始重視小程序生態(tài)帶來(lái)的流量,今年也由于小程序平臺(tái)對(duì)外能力的越來(lái)越多的開(kāi)放以及小程序平臺(tái)的自身優(yōu)化,越來(lái)越多的開(kāi)發(fā)者也自主的投入到小程序的開(kāi)發(fā)當(dāng)中,現(xiàn)在,作為前端如果會(huì)寫(xiě)小程序,絕對(duì)是一個(gè)不折不扣的面試加分項(xiàng)。相...
摘要:開(kāi)發(fā)者需要將小程序劃分成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶(hù)在使用時(shí)按需進(jìn)行加載。從獨(dú)立分包中頁(yè)面進(jìn)入小程序時(shí),不需要下載主包,當(dāng)小程序進(jìn)入不同分包的時(shí)候,主包才會(huì)被下載。 開(kāi)發(fā)者需要將小程序劃分成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶(hù)在使用時(shí)按需進(jìn)行加載。 在構(gòu)建小程序分包項(xiàng)目時(shí),構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包。每個(gè)使用分包小程序必須包含 一個(gè)主包,所謂的主包,即放置默認(rèn)啟動(dòng)頁(yè)/...
閱讀 3693·2021-10-09 09:44
閱讀 3396·2021-09-22 15:29
閱讀 3152·2019-08-30 15:54
閱讀 3027·2019-08-29 16:19
閱讀 2155·2019-08-29 12:50
閱讀 602·2019-08-26 14:04
閱讀 1707·2019-08-23 18:39
閱讀 1356·2019-08-23 17:59