玄幻小说改编的电视剧,欢乐颂第一季免费阅读

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

小程序分包的一些思考及Uiniapp分包優(yōu)化邏輯的驗證

今天，帶來我在團隊的最近一次分享。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)頁設(shè)計的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)公司依托強大的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！

分包

什么是分包

分包指的是把一個完整的小程序項目，按照需求劃分為不同的子包，在構(gòu)建時打包成不同的分包，用戶在使用時按需進行加載。

分包的好處

對小程序進行分包的好處主要有以下兩點：

可以優(yōu)化小程序首次啟動的下載時間
在多團隊共同開發(fā)時可以更好的解耦協(xié)作

uniapp 分包配置

按官網(wǎng)，假設(shè)支持分包的 uni-app 目錄結(jié)構(gòu)如下：

┌─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/qq449245884/uniapp-subpackage-demo/tree/feature/01.%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E5%8C%85%E9%85%8D%E7%BD%AE

運行后，可以在開發(fā)者詳情里查看分包信息：

這樣配置的目錄結(jié)構(gòu)真的好?

按官網(wǎng)的事例，如果我們要分兩個包，則對在 pages 同級下建立兩個目錄 pagesA、 pagesB，這樣劃分真的好嗎?假設(shè)我們有一個活動的業(yè)務(wù)模板，對應(yīng) 的活動詳情地址是 /pages/activity/detail。pages.json 配置如下：

 "pages": [
  {
   "path": "pages/index/index",
   "style": {
    "navigationBarTitleText": "首頁"
   }
  },
  {
   "path": "pages/activity/detail",
   "style": {
    "navigationBarTitleText": "活動詳情"
   }
  }
 ],

隨著業(yè)務(wù)的發(fā)展，該模塊的功能也越來越多。哪天，我們要對該包進行分包的時候，如果按照前面的分包方式，我們?nèi)绻?pages 同級下建立一個子包的目錄，假設(shè)我們這里叫 pagesA，然后把對應(yīng)的活動模塊的文件都挪動到該目錄下，對應(yīng)的pages.json配置如下：

"subPackages": [{
  "root": "pagesA",
  "pages": [{
    "path": "activity/detail"
   }]
}]

此時，對應(yīng)的活動詳情地址是 /pagesA/activity/detail，這樣就會引發(fā)一個問題，此時活動詳情路徑已經(jīng)變化了，所以分包要能正常工作，之前的路徑都要改過來，如果有其它小程序有跳到該詳情頁面也得改，顯然這種分包結(jié)構(gòu)是很不靠譜的，為了一個分包得改多個文件，甚至多個小程序。

那要怎么解決這個問題了?顯然，只要路徑不變化，但能正確分包不就可以解決這個問題了。

在細(xì)想一下分包，無非就是在 subPackages 中指定一個分包名，分包頁面對應(yīng)該分包名下的文件。所以，我們可以指定原有 pages 下的模塊作為一個子分包，這樣配置就可以解決分包后路徑不一致的問題，改寫后的結(jié)構(gòu)如下：

  "subPackages": [
    {
      "root": "pages/activity",
      "pages": [
        {
          "path": "detail"
        }
      ]
    }
  ],

事例地址：https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/02.%E9%85%8D%E7%BD%AE%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E7%9A%84%E5%90%88%E7%90%86%E6%80%A7

分包預(yù)加載

分包預(yù)載配置。配置 preloadRule 后，在進入小程序某個頁面時，由框架自動預(yù)下載可能需要的分包，提升進入后續(xù)分包頁面時的啟動速度。

假設(shè)，我們兩個分包 pagesA 和 pagesB ，當(dāng)我們進入詳情頁面，想預(yù)先加 pagesA ，對應(yīng)的配置如下：

{
 "pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：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 是進入此頁面的預(yù)下載配置, packages 是進入頁面后預(yù)下載分包的。network 在指定網(wǎng)絡(luò)下預(yù)下載，可選值為：all(不限網(wǎng)絡(luò))、wifi(僅wifi下預(yù)下載)。

事例地址：

??https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/03.%E5%88%86%E5%8C%85%E9%A2%84%E5%8A%A0%E8%BD%BD??

分包的加載規(guī)則

分包需要注意一點是：tabBar 頁面需要放在主包中，假設(shè)我們?nèi)鐑蓚€ 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/qq449245884/uniapp-subpackage-demo/tree/feature/04.%E5%88%86%E5%8C%85%E7%9A%84%E9%99%90%E5%88%B6

分包優(yōu)化

在對應(yīng)平臺的配置下添加"optimization":{"subPackages":true}開啟分包優(yōu)化。

分包優(yōu)化具體邏輯

靜態(tài)文件：分包下支持 static 等靜態(tài)資源拷貝，即分包目錄內(nèi)放置的靜態(tài)資源不會被打包到主包中，也不可在主包中使用
js文件：當(dāng)某個 js 僅被一個分包引用時，該 js 會被打包到該分包內(nèi)，否則仍打到主包(即被主包引用，或被超過 1 個分包引用)
自定義組件：若某個自定義組件僅被一個分包引用時，且未放入到分包內(nèi)，編譯時會輸出提示信息

首先，我們來化驗一下第一條規(guī)則，首頁建立對應(yīng)的配置:

{
 "pages": [
  {
   "path": "pages/index/index",
  }
 ],
 "subPackages": [{
  "root": "pagesA",
  "pages": [{
   "path": "detail/index"
  }]
 }],
}

這里，我們有一個分包 pagesA 對應(yīng)一個詳情頁面，詳情頁面使用一張圖片，該圖片放置當(dāng)前包下static 文件下，內(nèi)容如下：

然后，我們開始打包，然后點擊開發(fā)者工具的詳情，點擊本地代碼-> 依賴分析，就可以查看打包的詳細(xì)信息，如下圖所示：

可以看到，我們點擊主包下的 static 是沒有我們的在分包中用的 test.png 圖片，相反，它被打包自己的分包下面。即分包目錄內(nèi)放置的靜態(tài)資源不會被打包到主包中，成立。

接下來，在來驗證一下，如果在主包中使用分包的test.png 圖片會怎么樣?改寫一上我們主包的index 文件的內(nèi)容：

運行后，控制臺會給出錯誤：

所以，分包下支持 static 等靜態(tài)資源拷貝，即分包目錄內(nèi)放置的靜態(tài)資源不會被打包到主包中，也不可在主包中使用成立。

事例地址：https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/05.%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96__%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6

然后，我們來驗證一下第二條規(guī)則：js文件：當(dāng)某個 js 僅被一個分包引用時，該 js 會被打包到該分包內(nèi)，否則仍打到主包(即被主包引用，或被超過 1 個分包引用)。

首先，我們在主包中的 src/utils中建立一個 common.ts,內(nèi)容如下：

export const add = (a: number, b:number) => {
  return a + b
}

然后，我們在子包 pagesA 中導(dǎo)入使用：

同樣，打包，然后點擊開發(fā)者工具的詳情，點擊本地代碼-> 依賴分析：

從上圖可以看到，我們在主包中的的 vender.js沒有找到 src/utils/common.ts 中的 add 方法，但在分包 pagesA 找到了。

那如果某個 js被多個分包所引用呢?

我們再建立一個分包 pagesB，與同樣的方式在子包 pagesB 中導(dǎo)入common.ts：

同樣，打包，然后點擊開發(fā)者工具的詳情，點擊本地代碼-> 依賴分析：

從圖可以看到，我們在主包中的 vendor.js 可以找到我們使用的 add 方法，在分包中沒有找到對應(yīng)的 vendor.js，所以當(dāng)某個 js 僅被多個分包引用時，該 js 會被打包到主包。

事例地址：https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/05.%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96__JS%E6%96%87%E4%BB%B6

最后，我們來驗證一下第三條規(guī)則：自定義組件：若某個自定義組件僅被一個分包引用時，且未放入到分包內(nèi)，編譯時會輸出提示信息。

首先，我們在主包中的 src/components 建立一個自定義組件 SayHello，內(nèi)容如下：

然后，以同樣的方式建個分包(步驟跟上面的例子一樣)，在分包的中引用我們的組件 SayHello：

然后，編譯可以在控制臺看到提示的信息：

那如果自定義組件被多個分包引用呢?提示應(yīng)該會消失，為了嚴(yán)謹(jǐn)性，我們再建個分包 pagesB 以同樣姿勢引用組件，然后編譯，再查看控制臺：

可以看到，提示信息消失了。

至此，UniApp 官網(wǎng)提到分包優(yōu)化具體邏輯我們都驗證過，Nice。

事例地址：https://github.com/qq449245884/uniapp-subpackage-demo/tree/feature/0.5.%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96__%E7%BB%84%E4%BB%B6

名稱欄目：小程序分包的一些思考及Uiniapp分包優(yōu)化邏輯的驗證
文章源于：http://m.fisionsoft.com.cn/article/cdsceih.html