有幻想，有干貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。愛掏網 - it200.com
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試殘缺考點、材料以及我的系列文章。愛掏網 - it200.com
分包
什么是分包
分包指的是把一個殘缺的小程序我的項目，依照需要劃分為不同的子包，在構建時打包成不同的分包，用戶在應用時按需進行加載。愛掏網 - it200.com
分包的益處
對小程序進行分包的益處次要有以下兩點：
- 能夠優化小程序首次啟動的下載工夫
- 在多團隊共同開發時能夠更好的解耦合作
uniapp 分包配置
按官網，假如反對分包的 uni-app 目錄構造如下：
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─pagesA
│ ├─static
│ └─list
│ └─list.vue
├─pagesB
│ ├─static
│ └─detail
│ └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json 則須要在 pages.json 中填寫:
{
"pages": [{
"path": "pages/index/index",
"style": { ...}
}, {
"path": "pages/login/login",
"style": { ...}
}],
"subPackages": [{
"root": "pagesA",
"name": "分包的別名"
"pages": [{
"path": "list/list",
"style": { ...}
}]
}, {
"root": "pagesB",
"pages": [{
"path": "detail/detail",
"style": { ...}
}]
}],
}入手實際：https://github.com/qq44924588&＃8230;
運行后，能夠在開發者詳情里查看分包信息：
這樣配置的目錄構造真的好？
按官網的事例，如果咱們要分兩個包，則對在 pages 同級下建設兩個目錄 pagesA、 pagesB，這樣劃分真的好嗎？假如咱們有一個流動的業務模板，對應 的流動詳情地址是 /pages/activity/detail。愛掏網 - it200.compages.json 配置如下：
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁"
}
},
{
"path": "pages/activity/detail",
"style": {
"navigationBarTitleText": "流動詳情"
}
}
],隨著業務的倒退，該模塊的性能也越來越多。愛掏網 - it200.com哪天，咱們要對該包進行分包的時候，如果依照后面的分包形式，咱們如果在 pages 同級下建設一個子包的目錄，假如咱們這里叫 pagesA，而后把對應的流動模塊的文件都移動到該目錄下，對應的 pages.json配置如下：
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "activity/detail"
}]
}]此時，對應的 流動詳情地址是 /pagesA/activity/detail，這樣就會引發一個問題，此時流動詳情門路曾經變動了，所以分包要能失常工作，之前的門路都要改過來，如果有其它小程序有跳到該詳情頁面也得改，顯然這種分包構造是很不靠譜的，為了一個分包得改多個文件，甚至多個小程序。愛掏網 - it200.com
那要怎么解決這個問題了？顯然，只有門路不變動，但能正確分包不就能夠解決這個問題了。愛掏網 - it200.com
在細想一下分包，無非就是在 subPackages 中指定一個分包名，分包頁面對應該分包名下的文件。愛掏網 - it200.com所以，咱們能夠指定原有 pages 下的模塊作為一個子分包，這樣配置就能夠解決分包后門路不統一的問題，改寫后的構造如下：
"subPackages": [
{
"root": "pages/activity",
"pages": [
{
"path": "detail"
}
]
}
],事例地址：https://github.com/qq44924588&＃8230;
分包預加載
分包預載配置。愛掏網 - it200.com配置 preloadRule 后，在進入小程序某個頁面時，由框架主動預下載可能須要的分包，晉升進入后續分包頁面時的啟動速度。愛掏網 - it200.com
假如，咱們兩個分包 pagesA 和 pagesB ，當咱們進入詳情頁面，想事后加 pagesA ，對應的配置如下：
{
"pages": [ //pages數組中第一項示意利用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁"
}
},
{
"path": "pages/detail/index",
"style": {
"navigationBarTitleText": "詳情"
}
}
],
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "detail/index"
}]
}, {
"root": "pagesB",
"pages": [{
"path": "detail/index"
}]
}],
"preloadRule": {
"pages/detail/index": {
"network": "wifi",
"packages": ["pagesA", "pagesB"]
}
}
}
preloadRule 中，key 是頁面門路，value 是進入此頁面的預下載配置, packages 是進入頁面后預下載分包的 。愛掏網 - it200.comnetwork 在指定網絡下預下載，可選值為：all（不限網絡）、wifi（僅wifi下預下載）。愛掏網 - it200.com
事例地址：
https://github.com/qq44924588&＃8230;
分包的加載規定
分包須要留神一點是：tabBar 頁面須要放在主包中，假如咱們如兩個 tabBar，配置如下：
{
"pages": [
{
"path": "pages/channel/index",
"style": {
"disableScroll": true
}
},
{
"path": "pages/member/index",
"style": {
"disableScroll": true
}
}
],
"tabBar": {
"color": "#BBBBBD",
"selectedColor": "#1C1C1C",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/channel/index",
"iconPath": "static/tabbar_icon_channel.png",
"selectedIconPath": "static/tabbar_icon_channel_active.png",
"text": "會員專屬"
},
{
"pagePath": "pages/member/index",
"iconPath": "static/tabbar_icon_member.png",
"selectedIconPath": "static/tabbar_icon_member_active.png",
"text": "掌通會員"
}
]
}
}
如果咱們把 tabBar 頁面配置到 subPackages，則會出錯：
事例地址：https://github.com/qq44924588&＃8230;
分包優化
在對應平臺的配置下增加"optimization":{"subPackages":true}開啟分包優化。愛掏網 - it200.com
分包優化具體邏輯
- 動態文件：分包下反對 static 等動態資源拷貝，即分包目錄內擱置的動態資源不會被打包到主包中，也不可在主包中應用
- js文件：當某個 js 僅被一個分包援用時，該 js 會被打包到該分包內，否則仍打到主包（即被主包援用，或被超過 1 個分包援用）
- 自定義組件：若某個自定義組件僅被一個分包援用時，且未放入到分包內，編譯時會輸入提示信息
首先，咱們來化驗一下第一條規定，首頁建設對應的配置:
{
"pages": [
{
"path": "pages/index/index",
}
],
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "detail/index"
}]
}],
}
這里，咱們有一個分包 pagesA 對應一個詳情頁面，詳情頁面應用一張圖片，該圖片擱置以后包下 static 文件下，內容如下：
而后，咱們開始打包，而后點擊開發者工具的 詳情，點擊 本地代碼-> 依賴剖析，就能夠查看打包的詳細信息，如下圖所示：
能夠看到，咱們點擊 主包 下的 static 是沒有咱們的在分包中用的 test.png 圖片，相同，它被打包本人的分包上面。愛掏網 - it200.com即分包目錄內擱置的動態資源不會被打包到主包中，成立。愛掏網 - it200.com
接下來，在來驗證一下，如果在主包中應用分包的 test.png 圖片會怎么樣？改寫一上咱們主包的 index 文件的內容：
運行后，控制臺會給出謬誤：
所以，分包下反對 static 等動態資源拷貝，即分包目錄內擱置的動態資源不會被打包到主包中，也不可在主包中應用 成立。愛掏網 - it200.com
事例地址：https://github.com/qq44924588&＃8230;
而后，咱們來驗證一下第二條規定：js文件：當某個 js 僅被一個分包援用時，該 js 會被打包到該分包內，否則仍打到主包（即被主包援用，或被超過 1 個分包援用）。愛掏網 - it200.com
首先，咱們在主包中的 src/utils中建設一個 common.ts,內容如下：
export const add = (a: number, b:number) => {
return a + b
}而后，咱們在子包 pagesA 中導入應用：
同樣，打包，而后點擊開發者工具的 詳情，點擊 本地代碼-> 依賴剖析：
從上圖能夠看到，咱們在 主包 中的的 vender.js 沒有找到 src/utils/common.ts 中的 add 辦法，但在分包 pagesA 找到了。愛掏網 - it200.com
那如果某個 js被多個分包所援用呢？
咱們再建設一個分包 pagesB，與同樣的形式在子包 pagesB 中導入common.ts：
同樣，打包，而后點擊開發者工具的 詳情，點擊 本地代碼-> 依賴剖析：
從圖能夠看到，咱們在主包中的 vendor.js 能夠找到咱們應用的 add 辦法，在分包中沒有找到對應的 vendor.js，所以當某個 js 僅被多個分包援用時，該 js 會被打包到主包。愛掏網 - it200.com
事例地址：https://github.com/qq44924588&＃8230;
最初，咱們來驗證一下第三條規定：自定義組件：若某個自定義組件僅被一個分包援用時，且未放入到分包內，編譯時會輸入提示信息
首先，咱們在主包中的 src/components 建設一個自定義組件 SayHello，內容如下：
Hello World
而后，以同樣的形式建個分包(步驟跟下面的例子一樣)，在分包的中援用咱們的組件 SayHello：
而后，編譯能夠在控制臺看到提醒的信息：
那如果自定義組件被多個分包援用呢？提醒應該會隱沒，為了嚴謹性，咱們再建個分包 pagesB 以同樣姿態援用組件，而后編譯，再查看控制臺：
能夠看到，提示信息隱沒了。愛掏網 - it200.com
至此，UniApp 官網提到分包優化具體邏輯咱們都驗證過，Nice。愛掏網 - it200.com
事例地址：https://github.com/qq44924588&＃8230;
代碼部署后可能存在的BUG沒法實時曉得，預先為了解決這些BUG，花了大量的工夫進行log 調試，這邊順便給大家舉薦一個好用的BUG監控工具 Fundebug。愛掏網 - it200.com
交換
有幻想，有干貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。愛掏網 - it200.com
本文 GitHub https://github.com/qq44924588&＃8230; 已收錄，有一線大廠面試殘缺考點、材料以及我的系列文章。愛掏網 - it200.com