草草伊人电影久久无码区,久久精品超碰亚洲DV,中日韩一级片欧一级大片视频

新聞中心

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

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

今天，帶來我在團(tuán)隊(duì)的最近一次分享。

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

分包

什么是分包

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

分包的好處

對(duì)小程序進(jìn)行分包的好處主要有以下兩點(diǎn)：

可以優(yōu)化小程序首次啟動(dòng)的下載時(shí)間
在多團(tuán)隊(duì)共同開發(fā)時(shí)可以更好的解耦協(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": { ...}
        }]
    }],
}

動(dòng)手實(shí)踐：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

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

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

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

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

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

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

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

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

在細(xì)想一下分包，無非就是在 subPackages 中指定一個(gè)分包名，分包頁面對(duì)應(yīng)該分包名下的文件。所以，我們可以指定原有 pages 下的模塊作為一個(gè)子分包，這樣配置就可以解決分包后路徑不一致的問題，改寫后的結(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 后，在進(jìn)入小程序某個(gè)頁面時(shí)，由框架自動(dòng)預(yù)下載可能需要的分包，提升進(jìn)入后續(xù)分包頁面時(shí)的啟動(dòng)速度。

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

{
 "pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dò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 是進(jìn)入此頁面的預(yù)下載配置, packages 是進(jìn)入頁面后預(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ī)則

分包需要注意一點(diǎn)是：tabBar 頁面需要放在主包中，假設(shè)我們?nèi)鐑蓚€(gè) 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": "會(huì)員專屬"
      },
      {
        "pagePath": "pages/member/index",
        "iconPath": "static/tabbar_icon_member.png",
        "selectedIconPath": "static/tabbar_icon_member_active.png",
        "text": "掌通會(huì)員"
      }
    ]
  }
}

如果我們把 tabBar 頁面配置到 subPackages，則會(huì)出錯(cuò)：

事例地址：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)化

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

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

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

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

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

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

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

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

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

運(yùn)行后，控制臺(tái)會(huì)給出錯(cuò)誤：

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

事例地址：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

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

首先，我們?cè)谥靼械?src/utils中建立一個(gè) common.ts,內(nèi)容如下：

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

然后，我們?cè)谧影?pagesA 中導(dǎo)入使用：

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

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

那如果某個(gè) js被多個(gè)分包所引用呢?

我們?cè)俳⒁粋€(gè)分包 pagesB，與同樣的方式在子包 pagesB 中導(dǎo)入common.ts：

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

從圖可以看到，我們?cè)谥靼械?vendor.js 可以找到我們使用的 add 方法，在分包中沒有找到對(duì)應(yīng)的 vendor.js，所以當(dāng)某個(gè) js 僅被多個(gè)分包引用時(shí)，該 js 會(huì)被打包到主包。

事例地址：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

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

首先，我們?cè)谥靼械?src/components 建立一個(gè)自定義組件 SayHello，內(nèi)容如下：

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

然后，編譯可以在控制臺(tái)看到提示的信息：

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

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

至此，UniApp 官網(wǎng)提到分包優(yōu)化具體邏輯我們都驗(yàn)證過，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)化邏輯的驗(yàn)證
URL網(wǎng)址：http://www.5511xx.com/article/cdsceih.html

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