什么是分包加载?

举个简单列子:比如点烤鱼的时候,为了不能浪费就不点其他小菜就先点主菜烤鱼,再吃烤鱼的时候觉得不够你觉得需要小菜的时候在去点小菜。小程序分包加载也是这个道理,大部分小程序是有很多很多功能来组成的,通常这几个功能之间是独立的，但会依赖一些公共的逻辑，并且这些功能通常会对应某几个独立的页面,那么我们不需要一次性全部进行代码打包,我们可以按照相应功能的划分,来进行相对应的打包,每当我需要某个功能的时候,才加载这个功能对应的分包。

加载流程

1.首次启动时，先下载小程序主包，显示主包内的页面；
2.如果用户进入了某个分包的页面，再下载这个对应分包，下载完毕后，显示分包的页面。

采用分包加载，对开发者而言，能使小程序有更大的代码体积，承载更多的功能与服务；而对用户而言，可以更快地打开小程序，同时在不影响启动速度前提下使用更多功能

划分分包

以下是uniapp目录分包结构

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json   

在配置前首先需要开发者规划下各个分包需要容纳的内容，建议开发者按照功能划分的的原则，将同一个功能下的页面和逻辑放置于同一个目录下，对于一些跨功能之间公共逻辑，将其放置于主包下，这样可以确保在分包引用这部分功能时，这部分的逻辑一定存在。

在分包划分时，应该注意以下事项：
1.避免分包与分包之间引用上的耦合。因为分包的加载是由用户操作触发的，并不能确保某分包加载时，另外一个分包就一定存在，这个时候可能会导致 JS 逻辑异常的情况，例如报「"xxx.js" is not defined」这样的错误；
2.一些公共用到的自定义组件，需要放在主包内。

配置分包

写在pages.json与pages同级

"subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "1/index",
            "style": {
                "navigationBarTitleText": ""
            }
        }
        ]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "2/index",
            "style": {
                "navigationBarTitleText": ""
            }
        }]
    }, {
        "root": "pagesC",
        "pages": [{
                "path": "3/index",
                "style": {
                    "navigationBarTitleText": ""
                }
            }

        ]
    }]

image.png

subPackages 里的pages的路径是 root 下的相对路径，不是全路径!!!

注意!!!

分包加载后路径不要这样写'pagesA/log/index',注意前面一定要加 "/" 这样:/pagesA/log/index,如果不加 / 的话,点击跳转会失效.控制台也不会报错,就是这样莫名其妙!!!