日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
小程序分包的一些思考及Uiniapp分包優(yōu)化邏輯的驗證

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

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

分包

什么是分包

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

分包的好處

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

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

uniapp 分包配置

按官網(wǎng)，假設支持分包的 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/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ā)者詳情里查看分包信息：

這樣配置的目錄結構真的好?

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

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


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

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


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

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

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

  "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

分包預加載

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

假設，我們兩個分包 pagesA 和 pagesB ，當我們進入詳情頁面，想預先加 pagesA ，對應的配置如下：

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

事例地址：

??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 頁面需要放在主包中，假設我們?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)化

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

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

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

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

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


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


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

可以看到，我們點擊 主包 下的 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文件：當某個 js 僅被一個分包引用時，該 js 會被打包到該分包內(nèi)，否則仍打到主包(即被主包引用，或被超過 1 個分包引用)。

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

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


然后，我們在子包 pagesA 中導入使用：




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

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

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

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




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

從圖可以看到，我們在主包中的 vendor.js 可以找到我們使用的 add 方法，在分包中沒有找到對應的 vendor.js，所以當某個 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：







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

那如果自定義組件被多個分包引用呢?提示應該會消失，為了嚴謹性，我們再建個分包 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


網(wǎng)頁標題：小程序分包的一些思考及Uiniapp分包優(yōu)化邏輯的驗證
網(wǎng)頁鏈接：http://m.5511xx.com/article/cdsceih.html