小程序分包

https://blog.csdn.net/weixin_50587417/article/details/126933562

https://blog.csdn.net/weixin_38673922/article/details/128454847

起因

微信小程序的限制大小指的是小程序的代码包大小限制，包括主包和所有分包的大小总和。

目前微信小程序的代码包大小限制为 8MB，

其中主包的大小不能超过 2MB，

每个分包的大小也不能超过 2MB。

分包

pages下要新建分包目录，例如subPack

新建的文件夹也可以放在pages同级

因为最后会指定他的位置（设置root）

再加两个.vue文件作为页面

./pages.json 设置

编辑pages.json-subPackages

json

{
  "pages":[
    //...
  ],
  //分包加载配置，此配置为小程序的分包加载机制。
  "subPackages": [{
    "root": "pages/subPack", //子包的根目录
    "pages": [{ //这里的配置路径和pages里的一样
      //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
      // 对应路由 pages/subPack/list
      "path": "list", 
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
      }
    },
      {
        "path": "tab",
        "style": {
          "navigationBarTitleText": "",
          "enablePullDownRefresh": false
        }
      }
    ]
  }]
}

打包结果预览

输出pages下会有subPack，里面包含tab list

输出的原生小程序的pages.json长这样

分包预加载

设置某个页面提前加载哪些包

pages.json-preloadRule

json

{  
  "subPackages":{},
  // 分包预载配置
  "preloadRule": {
    // 当我们进入了pages/index/index页面以后就会预下载pages/subPack分包
    "pages/index/index": {
      "network": "all",	//在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
      "packages": ["pages/subPack"]	//进入页面后预下载分包
    }
  }
}