首頁  >  文章  >  web前端  >  詳細了解uniapp和小程式中的分包步驟

詳細了解uniapp和小程式中的分包步驟

青灯夜游
青灯夜游轉載
2021-09-08 19:21:214825瀏覽

uniapp和小程式如何分包?以下這篇文章帶大家詳細了解一下uniapp和小程式的分包步驟,希望對大家有幫助!

詳細了解uniapp和小程式中的分包步驟

一、小程式分包

每個使用分包小程式必定含有一個主包。所謂的主包,即放置預設啟動頁面/TabBar 頁面,以及一些所有分包都需用到公共資源/JS 腳本;而分包則是根據開發者的配置進行劃分。

在小程式啟動時,預設會下載主包並啟動主包內頁面,當使用者進入分包內某個頁面時,客戶端會把對應分包下載下來,下載完成後再進行展示

目前小程式分包大小有以下限制:

整個小程式所有分包大小不超過20M 單一分包/主包大小不能超過 2M 對小程式進行分包,可以優化小程式首次啟動的下載時間,以及在多團隊共同開發時可以更好的解耦協作。

這裡直接點擊去看官方的分包教學容易理解:

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic. html

二、uniapp分包小程式

App預設為整包。相容於小程式的分包配置。其目的不用於下載提速,而用於首頁是vue時的啟動提速。 【相關推薦:《uniapp教學》】

  • components:公用元件(供主包引用)
  • page_後跟拼音的都是分包
  • 分包裡的components是單一分包自己的元件目錄,分包vue頁面的引用只能是在自己page_xxxx分包目錄下才可以引用
  • pages是主包,裡面都是啟動頁面/TabBar 頁面
  • static裡放的是公共靜態資源,圖片類別

分包步驟:

1.設定manifest.json

"mp-weixin": {
"optimization":{"subPackages":true}
}

詳細了解uniapp和小程式中的分包步驟

#優化分包:

在對應平台的設定(manifest .json)下新增"optimization":{"subPackages":true}開啟分包優化

目前只支援mp-weixin、mp-qq、mp-baidu的分包優化

  • 靜態檔案:分包下支援static 等靜態資源拷貝,即分包目錄內放置的靜態資源不會被打包到主包中,也不可在主包中使用
  • js檔案:當某個js 僅被一個分包引用時,該js 會被打包到該分包內,否則仍打到主包(即被主包引用,或被超過1 個分包引用)
  • #自訂元件:若某個自訂元件只被一個分包引用時,且未放入到分包內,編譯時會輸出提示訊息

2.設定pages .json

在pages.json中新建陣列"subPackages",陣列中包含兩個參數:1.root:為子套件的根目錄,2.pages:子套件由哪些頁面組成,參數同pages;

注意:主套件和分包是不能再同一目錄下,在建構uniapp專案時,可以考慮目錄結構,以便後期進行分包;

詳細了解uniapp和小程式中的分包步驟

#3.分包預載配置(preloadRule)

#做這一步主要為了優化速度,不想優化速度的可以跳過這個配置

配置preloadRule後,進入小程式某個頁面時,由框架自動預先下載可能需要的分包,提升進入後續分包頁面時的啟動速度

preloadRule 中,key 是頁面路徑,value 是進入此頁面的預先下載配置,每個配置有以下幾項:

#欄位 類型 #必填 預設值 說明
#packages StringArray 進入頁面後預下載分包的 root 或 name__APP__ 表示主包。
network String #wifi #在指定網路下預先下載,可選值為:all(不限網路)、wifi(僅限wifi已預先下載)

app的分包,同樣支援preloadRule,但網路規則無效。

可查看官方設定項:

https://uniapp.dcloud.io/collocation/pages?id=subpackages

本文轉載自:https://juejin.cn/post/7003138257798037512

更多程式相關知識,請造訪:程式設計入門! !

以上是詳細了解uniapp和小程式中的分包步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除