[小程序开发] 分包加载

news2024/9/20 14:59:02

一、介绍

分包加载是一种小程序的优化技术，将小程序不同功能的代码，分别打包成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，在构建小程序分包项目时，构建会输出一个或多个分包，每个使用分包小程序必定包含有一个主包。

主包：包含默认启动页面/TabBar页面以及所有分包都需用到公共资源的包。
分包：根据开发者的配置进行划分出来的子包。

整个小程序所有分包大小不超过20MB。
单个分包/主包大小不能超过2MB。

二、分包加载配置

小程序进行分包加载，需要在app.json中，通过subPackages或者subpackages定义分包结构。

分包结构三个常用字段：

1、root：分包的根目录，该目录下的所有文件都会被打包成一个独立的包。（根目录配置不能./开头，也不能以/开头）

2、name：分包的别名，用于在代码中引用该分包。

3、pages：指定当前分包中包含哪些页面。

"subPackages": [
        {
            "root": "modules/goodModel",
            "name": "goodModel",
            "pages": [
                "pages/list/list",
                "pages/detail/detail"
            ]
        }
    ]

三、打包原则

1、tabBar页面必须在主包内。

2、最外层的pages字段，属于主包的包含的页面。

3、按subPackages配置路径进行打包，配置路径外的目录将打包到主包中。

4、分包之间不能相互嵌套，subpackage的根目录不能是另一个subpackage内的子目录。

四、引用原则

1、主包不可以引用分包的资源，但分包可以使用主包的公共资源。

2、分包与分包之间资源无法相互引用，分包异步化时不受此条限制。

五、独立分包

能够独立于主包和其他分包运行的包。从独立分包中页面进入小程序时，不需要下载主包，当用户进入普通分包或主包内页面时，主包才会被下载。可以将功能相对独立的页面配置到独立分包中。

声明对应的独立分包，给subPackages定义的分包结构添加independent字段即可。

"subPackages": [
        {
            "root": "modules/marketModel",
            "name": "marketModel",
            "pages": [
                "pages/market/market"
            ],
            "independent": true
        }
    ]

注意事项：

1、独立分包中不能依赖主包和其他分包中的资源。

2、主包中的app.wxss对独立分包无效。

3、App只能在主包内定义，独立分包中不能定义App，会造成无法预期的行为。

六、分包预下载

访问小程序某个页面时，预先下载其他分包中的代码和资源，当用户需要访问分包中的页面时，已经预先下载的代码和资源，因此可以直接使用。

分包预下载需要在app.json中通过preloadRule字段设置预下载规则。

主包预下载分包

 "preloadRule":{
        "pages/index/index":{
            "network": "all",
            "packages": ["goodModel"]
        }
    }

"pages/index/index"：访问该页面时，进行预下载。

"packages": ["goodModel"]：预下载页面别名（也可以是路径）。

预下载成功时，控制台显示

独立分包预下载主包

 "preloadRule":{
        "modules/marketModel/pages/market/market":{
            "network": "all",
            "packages": ["__APP__"]
        }
    }