手把手教你uniapp和小程式分包(圖文)

本篇文章為大家帶來了關於uniapp跨域的相關知識，其中介紹了uniapp和小程式分包的相關問題，每個使用分包小程式必定含有一個主包。所謂的主包，即放置預設啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據開發者的配置進行劃分，希望對大家有幫助。

推薦：《uniapp教學》

一、小程式分包

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

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

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

• 整個小程式所有分包大小不超過20M
• 單一分包/主套件大小不能超過2M

對小程式進行分包，可以優化小程式首次啟動的下載時間，以及在多團隊共同開發時可以更好的解耦協作。

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

二、uniapp分包小程式

App預設為整包。相容於小程式的分包配置。其目的不用於下載提速，而用於首頁是vue時的啟動提速。

這是我分包小程式之後的目錄結構

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

##分包步驟：

1.設定manifest.json

"mp-weixin": {

"optimization":{"subPackages":true}

}

登入後複製

#最佳化分包：

在對應平台的設定(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項目時，可以考慮目錄結構，以便後期進行分包；

#3.分包預載配置（preloadRule）

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

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

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

欄位類型#必填預設值#說明packagesStringArray是無進入頁面後預下載分包的 root 或 name。 __APP__ 表示主包。 networkString否#wifi#在指定網路下預先下載，可選值為：all（不限網路）、wifi（僅限wifi已預先下載）#

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

範例：

最後點選進入uniapp官方文件檢視設定項 

建議：《uniapp教學》

以上是手把手教你uniapp和小程式分包(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章！