小程序分包流程

目录

问题：小程序为什么要分包？

一、常见的分包形式

二、常规分包

概念：

1.操作位置

2.特点

3.分包使用

1.主包结构不变，但是要把分包过的页面移除

2.分几个包就声明几个

3.主结构展示

 注意：分包之后当进行页面跳转的时候原先的页面路径可能会出现问题，记得修改，局部样式需要修改，但是全局样式就不用修改，记得将修改的部分进行修改

三、独立分包

概念：

1.如何使用

2.特点

3.使用场景

四、分包预下载

1.在全局的app.json文件中添加

2.注意点

3.效果展示

总结：

---

问题：小程序为什么要分包？

1. 小程序要求压缩包体积不能大于 2M，否则无法发布
2. 实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传
3. 分包后可解决 2M 限制，并且能分包加载内容，提高性能
4. 分包后单个包的体积不能大于 2M
5. 分包后所有包的体积不能大于 16M

一、常见的分包形式

1.  常规分包
2. 独立分包

二、常规分包

概念：

常规分包意思就是将pages下的页面分到其他几个包里，分开来进行管理，减少每个包的压力，虽然分包，但是还是一样，只是环节了压力，可以理解为分包，不分家

1.操作位置

开发者通过在 app.json subpackages 字段声明项目分包结构

2.特点

1. 加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容
2. 分包的页面可以访问主包的文件，数据，图片等资源
3. 主包：
   1. 主包来源： 除了分包以外的内容都会被打包到主包中
   2. 通常放置启动页/tabBar 页面

3.分包使用

1.主包结构不变，但是要把分包过的页面移除

"pages": [
    "pages/index/index",
    "pages/search/search",
    "pages/video/video",
    "pages/login/login",
    "pages/personal/personal"
  ],

2.分几个包就声明几个

"subPackages": [
    {
      "root": "songPackage",
      "pages": [
        "pages/recommendSong/recommendSong",
        "pages/songDetail/songDetail"
      ]
    },
    {
      "root": "otherPackage",
      "name": "other",
      "pages": [
        "pages/other/other"
      ]
    }
  ],

3.主结构展示

 注意：分包之后当进行页面跳转的时候原先的页面路径可能会出现问题，记得修改，局部样式需要修改，但是全局样式就不用修改，记得将修改的部分进行修改

三、独立分包

概念：

没有主包和副包的概念，每一个包都是一个整体

1.如何使用

只需要将常规分包的independent 为 true即可

2.特点

•  独立分包可单独访问分包的内容，不需要下载主包

• 独立分包不能依赖主包或者其他包的内容

3.使用场景

通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包 如：临时加的广告页 || 活动页

四、分包预下载

1.在全局的app.json文件中添加

  "preloadRule": {
    "pages/index/index":{
      "packages": ["songPackage","other"]
    }
  },

2.注意点

"packages": ["songPackage","other"]的字段应该和独立分包或者常规分包的name或者root一样

3.效果展示

总结：

• 分包解决小程序要求压缩包体积不能大于 2M，否则无法发布的问题
• 分包方便管理页面数据