天天看點

uniapp和小程式如何分包,詳細步驟手把手(圖解)

一、小程式分包

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

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

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

整個小程式所有分包大小不超過 20M

單個分包/主包大小不能超過 2M

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

這裡直接點選去看官方的分包教程容易了解

二、uniapp分包小程式

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

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

uniapp和小程式如何分包,詳細步驟手把手(圖解)

components:公共元件(供主包引用)

page_後跟拼音的都是分包

分包裡的components是單個分包自己的元件目錄,分包vue頁面的引用隻能是在自己page_zhaoshang分包目錄下才可以引用

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後,在進入小程式某個頁面時,由架構自動預下載下傳可能需要的分包,提升進入後續分包頁面時的啟動速度

uniapp和小程式如何分包,詳細步驟手把手(圖解)

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

例子:

uniapp和小程式如何分包,詳細步驟手把手(圖解)
最後點選進入uniapp官方文檔檢視配置項 

繼續閱讀