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

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

使用分包:

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)名字
    }
},

 

 

PS:

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

posted @ 2023-04-09 21:41  一统天下。  阅读(358)  评论(0编辑  收藏  举报