微信小程序 分包:普通分包 + 独立分包

基础概念:

  • 组成:分包后,小程序项目由 1 个主包 + 多个分包组成 
    • 主包:一般只包含项目的启动页面或Tabbar页面,以及所有分包都需要用到的一些公共资源
    • 分包:只包含和当前分包有关的页面和私有资源
  • 体积限制:(目前)
    • 整体小程序所有分包大小不超过16M(主包 + 所有分包)
    • 单个分包 / 主包不能超过 2M

微信小程序 分包:普通分包 + 独立分包_第1张图片

使用分包:

  • 1). 配置方法:app.json 文件中:(在 subPackages 节点中声明分包结构)
/* 
    1.分包:需要几个分包就填写几个{}对象   
        * root:分包的根目录 
        * pages:当前页面下,所有页面的相对路径
        * name:分包别名
        * independent:是否为独立分包

    2.如何查看分包体积:(编译器右上角) 详情 -- 基本信息 -- 本地代码(展开就可看到)
*/ 
    "subPackages": [{       // 通过 subPackages 节点,声明分包结构
        "root": "package1", // 第一个分包的根目录  相对于根目录 package1 进行存放的
        "name": "pack1",    // 分包别名  
        "pages": [          //当前分包下,所有页面的相对存放路径(会自动生成对应页面 -- 与上面的pages相同)
            "pages/index/index" 
        ]
    }, {
        "root": "package2",
        "name": "pack2",
        "independent": true, //将package2,设置为独立分包
        "pages": [
            "pages/index/index"
        ]
    }],
  • 2). 打包原则:
    • 小程序会按照subPackages的配置进行分包,subPackages之外的目录将被打包到主包中
    • 主包也可以有自己的pages(即最外层的pages字段)
    • tabBar页面必须主包内
    • 分包之间不能互相嵌套
  • 3). 引用原则:
    • 主包无法引用分包内的私有资源
    • 分包之间不能互相引用私有资源
    • 分包可以引用主包内的公共资源

独立分包

  • 什么是独立分包:
    • 本质上也是分包,只不过它比较特殊,可以独立于主包和其他分包而单独运行
  • 与普通分包区别:
    • 最主要区别:是否依赖于主包才能运行
    • 普通分包:必须依赖于主包才能运行
    • 独立分包可以再不下载主包的情况下,独立运行
  • 应用场景:
    • 可以按需将某些,具有一定功能独立性的页面配置到独立分包中,原因如下:
      • 当小程序从普通分包页面启动时,需要先下载主包
      • 独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度
  • 配置方法:
    • 在 subPackages中,设置independent: true(如上图所示)
  • 引用原则:
    • 独立分包、普通分包、主包之间是相互隔绝的,不能互相引用彼此的资源
    • 主包无法引用独立分包内的私有资源
    • 独立分包之间,不能互相引用私有资源
    • 独立分包和普通分包之间,不能互相引用私有资源
    • 特别注意:独立分包中不能引用主包内的公共资源,而普通分包可以

分包预下载

  • 什么是分包预下载:
    • 在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度
  • 配置方法:
    • 预下载分包行为,会再进入指定页面时触发。在app.json中,使用 preloadRule 定义分包预下载规则
      /*
      分包预下载规则:
          * network:在指定网络模式下进行预下载(默认wifi)。
              * all 不限网络  
              * wifi  仅wifi模式下进行预下载
              
          * packages:需要预下载哪些分包
              *可以通过name / root 指定预下载哪些分包
      */
      "preloadRule": {
          "pages/allColors/allColors": { // 需要预加载其他包的页面路径
              "network": "all", // 在指定模式中预下载, 只有 WiFi / all 选项
              "packages": ["package1", "pack2"] // 需要预加载的分包 -- 填写路径或者名字(name)都可以,因为都具有唯一性。如:package1为(root)路径, pack2 为(name)名字
          }
      },
  • 分包预下载限制:
    • 同一个分包中的页面享有共同的预下载大小限额2M,例如:微信小程序 分包:普通分包 + 独立分包_第2张图片

PS:

(项目文件结构)                        (分包1中的结构)

微信小程序 分包:普通分包 + 独立分包_第3张图片微信小程序 分包:普通分包 + 独立分包_第4张图片

 

 

你可能感兴趣的:(微信小程序,分包,微信小程序,分包,分包预下载)