什么是分包？

某些情況下，開發(fā)者需要將小程序劃分成不同的子包，在構(gòu)建時(shí)打包成不同的分包，用戶在使用時(shí)按需進(jìn)行加載。
在構(gòu)建小程序分包項(xiàng)目時(shí)，構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包。每個(gè)使用分包小程序必定含有一個(gè)主包。所謂的主包，即放置默認(rèn)啟動(dòng)頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分。
在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁面，當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁面時(shí)，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成后再進(jìn)行展示。
目前小程序分包大小有以下限制：
整個(gè)小程序所有分包大小不超過 20M
單個(gè)分包/主包大小不能超過 2M

優(yōu)點(diǎn)

對(duì)小程序進(jìn)行分包，可以優(yōu)化小程序首次啟動(dòng)的下載時(shí)間，以及在多團(tuán)隊(duì)共同開發(fā)時(shí)可以更好的解耦協(xié)作。

有如下的項(xiàng)目結(jié)構(gòu)

app.json配置文件，pages是主包的內(nèi)容，subpackages是分包的內(nèi)容

{
  "pages": [
    "pages/index/index"
  ],
  "subpackages":[
    {
      "root": "packageA",
      "pages": [
        "pages/about/about",
        "pages/app"
      ]
    }
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
  
}

主包頁面跳轉(zhuǎn)到分包頁面

pages\index\index.wxml

<button bindtap="goToClick">跳轉(zhuǎn)到about</button>

  onLoad(options){
    console.log(options,'ops')
  },
  goToClick(){
    console.log('goToClick')
    wx.reLaunch({
      url: '/packageA/pages/about/about',  //必須寫完整路徑
    })
  }

分包頁面跳轉(zhuǎn)到主包頁面且攜帶參數(shù)

packageA\pages\about\about.wxml

<button bindtap="goIndexClick">跳轉(zhuǎn)到首頁</button>

 goIndexClick(){
    wx.navigateTo({
      url: '/pages/index/index?name=gaofeng',
    })
  }

可能會(huì)出現(xiàn)的報(bào)錯(cuò)及處理方法

https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html#packOptions
https://developers.weixin.qq.com/community/develop/doc/00040e5a0846706e893dcc24256009

 "packOptions": {
    "ignore": [],
    "include": [
      {
        "value": "packageA/pages/app/app.js",
        "type": "file"
      },
      {
        "value": "packageA/pages/cat.js",
        "type": "file"
      },
      {
        "value": "packageA/pages/dog.js",
        "type": "file"
      },
      {
        "value": "packageA/pages/about.js",
        "type": "file"
      }
    ]
  }

即可以解決這個(gè)問題文章來源地址http://www.zghlxwxcb.cn/news/detail-501360.html

到了這里，關(guān)于微信小程序的優(yōu)化方案之主包與分包的研究的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！