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