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完成

本文链接http://element-ui.cn/news/show-22579.aspx