小程序分包（Taro分包案例）

为什么要使用小程序的“分包加载”方案

微信小程序限制了代码包不能超过 2MB，限制大小是对小程序启动速度的考虑，但是2MB 大小严重限制了小程序功能的扩展，业务需求可能需要更大的体积，综合考虑微信推出了“分包加载方案”

分包加载

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。分包小程序必定含有一个主包，和多个分包。

主包：即放置默认启动页面/TabBar页面，以及一些所有分包都需用到公共资源/JS 脚本；

分包：则是根据开发者的配置进行划分。

分包原理：在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M
对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作

项目中使用分包

1、需要在`Taro->app.jsx` ，或者原生小程序的 `app.json` 的config配置中新增 `subpackages`字段声明项目分包结构

config: Config = {
//  tabBar路径+ 非分包路径
    pages: [   
      'pages/index/index',
      'pages/personal/index',
      "pages/pageC/index",
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
//  tabBar路径
    tabBar:{   
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页"
      }, {
        "pagePath": "pages/personal/index",
        "text": "个人中心"
      }]
    },
//  分包路径
    subPackages:[
      {
        "root": "pages/pageA/",
        "pages": [
          "index",
          "pageA1",
        ]
      }, {
        "root": "pages/pageB/",
        "pages": [
          "index",
          "pageB",
        ]
      }
    ]

  }


注意：subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包

2、未分包小程序、分包小程序项目目录结构对比

`2.1、未分包小程序配置文件`

未分包小程序配置文件.png

`2.2、分包小程序项目配置文件`

分包小程序项目配置.png

3、未分包小程序、分包小程序项目打包后项目分包目录对比

`3.1、未分包小程序目录`

未分包小程序目录.png

`3.2、分包小程序分包后目录`

分包小程序分包后目录.png

独立分包

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包

1、独立分包中不能依赖主包和其他分包中的内容，包括js文件、模板、样式、自定义组件、插件等。主包中的样式对独立分包无效，应避免在独立分包页面中使用公共样式；

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

3、独立分包中暂时不支持使用插件。

分包预下载

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。

分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成

最后编辑于：2019.12.12 16:47:18