学习
实践
活动
专区
工具
TVP
写文章
专栏首页柠檬先生小程序分包加载

小程序分包加载

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

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必须包含

一个主包,所谓的主包,即放置默认启动页/TabBar 页面,以及一些所有分包需要用到

整个小程序所有分包大小不超过 8M单个分包/主包大小不能超2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更高的解耦协作。

配置方法:

假设支持分包的小程序目录结构

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

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

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

subPackages 中,每个分包的配置有以下几项:

字段

类型

说明

root

String

分包根目录

name

String

分包别名,分包预下载时可以使用

pages

StringArray

分包页面路径,相对与分包根目录

independent

Boolean

分包是否是独立分包

打包原则

  声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目

  录将被打包到 app(主包) 中

  app(主包)也可以有自己的 pages(即最外层的 pages 字段)

  subPackage 的根目录不能是另外一个 subPackage 内的子目录

  tabBar 页面必须在 app(主包)内

引用原则

  packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件

  packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template

  packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源

独立分包

  独立分包是小程序的一种特殊类型的分包,可以独立于主包和其他分包独立运行。从独立

  分包中页面进入小程序时,不需要下载主包,当小程序进入不同分包的时候,主包才会被下载。

  可发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的

  分包页面中启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上

  提升分包页面的启动速度, 一个小程序中可以有多个独立分包。

配置方法:

  假设小程序的目录如下;

  ├── app.js
  ├── app.json
  ├── app.wxss
  ├── moduleA
  │   └── pages
  │       ├── rabbit
  │       └── squirrel
  ├── moduleB
  │   └── pages
  │       ├── pear
  │       └── pineapple
  ├── pages
  │   ├── index
  │   └── logs
  └── utils

  开发者可以通过在  app.json 的 subpackages 字段中的分包配置中自定义 independent

  字段声明对应分包为独立分包

  {
      "pages": [
        "pages/index",
        "pages/logs"
      ],
     "subpackages": [
        {
          "root": "moduleA",
          "pages": [
            "pages/rabbit",
            "pages/squirrel"
          ]
        }, {
          "root": "moduleA",
          "pages": [
            "pages/pear",
            "pages/pineapple"
          ],
        "independent": true
      }
    ]
  }

限制:

  独立分包属于分包的一种,普通分包的所有限制独立分包有效。独立分包中插件

  自定义组件的处理方式同普通分包。

使用独立分包需要注意:

  独立分包中不能依赖主包和其他分包中的内容,包括js 文件,template,

  wxss,自定义组件,插件等,主包的app.wxss 对独立分包无效。应避免在

  独立分包页面中使用 app.wxss 中的样式。

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

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

注意事项:

  (1) 关于 getApp()

    与普通分包不同,独立分包运行时,App 并不一定被注册,因此,getApp()

    也不一定获得App 对象,

当用户从独立分包页面启动小程序时,主包不存在,App 也不存在,此时调用

    getApp 获取到的是undefined 。当用户进入普通分包或者主包时,主包才会

    被下载, App 才会被注册。

    当用户从普通分包或者主包的页面挑到独立分包的时候,主包已经存在,此时

    调用getApp(),才能获得真正的App。

为了满足独立分包中的这一需求,基础库2.2.4  版本开始getApp 支持,

  allowDefault 参数,在 App 未定义的时候返回一个默认实现。当主包

  加载 App 被注册的时候,默认实现中被定义的属性会被合并覆盖到默认的App 中。

  示例:

    const  app = getApp({allowDefault:true})  // {}

      app.data = 456

      app.global = {}

     .app.js  中

      App({

        data:123

        other:'hello'

      })

     console.log(getApp())   // {global: {} ,data: 456,other: 'hello'}

  (2) 关于 App 的生命周期

当从独立分包中启动小程序时,主包的中的onLanch 和首次 onShow  会从

    独立分包页面首次进入主包或普通分包页面时调用。

分包下载:

  开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可需要的分包。

  提升进入后续分包页面的速度,对于独立分包,可以预下载主包。

配置方法:

  预下载分包行为在进入某个页面的时候触发,在通过app.json 增加 preloadRule

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

  preloadRule  中,key  是页面路径, value  是进入此页面的 预下载配置,每个配置都

  有以下几项。

字段

类型

必填

默认值

说明

packages

StringArray

进入页面后预下载分包的 root 或 name。__APP__ 表示主包。

network

String

wifi

在指定网络下预下载,可选值为: all: 不限网络  wifi: 仅wifi下预下载

  限制

    同一个分包中的页面享有共同的预下载大小限额2M,会在工具打包时校验。

    如:页面A 和页面B 都在同一个分包中,A 中预下载大小为0.5 M的分包,

    B 中最大多只能预下载大小1.5 的分包。

 详细请参考 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.cnblogs.com/nmxs复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 小程序分包加载及可视化分析

    在开发中,如果放在本地资源太大,导致编译出来的单包或主包会超过2M大小,这个原则在小程序端真机编译上是失败的,因此如果要发布上线,必须优化编译大小,一般两种方法...

    公众号guangcity
  • mpvue小程序分包

    基于mpvue小程序进行分包首先在 pages / 下,新建 packageA/index 目录,在目录下再新建两个文件,index.vue和 main.js ...

    李维亮
  • 微信小程序之分包加载,解决代码超过2M的方法

    分包加载的介绍 大部分小程序都会由某几个功能组成,通常这几个功能之间是独立的,但会依赖一些公共的逻辑,并且这些功能通常会对应某几个独立的页面。那么小程序代码的...

    前端江太公
  • 微信小程序分包反编译教程

    1.使用自己手机上的微信打开"EMS中国邮政速递物流"小程序,可以添加到"我的小程序" 2.打开模拟器的微信并登录 3.在模拟器微信的下拉小程序最近使用历史...

    薛定喵君
  • 小程序分包的一些思考及Uiniapp 分包优化逻辑的验证

    分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

    前端小智@大迁世界
  • 小程序无限加载

    小程序无限加载 什么是无限加载呢? 比如 刷朋友圈的时候,一直往下拉一直都会有内容 就像没有尽头一样,可以不断的加载出东西来,也可以叫滚动加载。数据不可能在打开...

    企鹅号小编
  • 微信小程序使用wepy开发之分包操作

    听着music睡
  • 小程序之图片懒加载

    懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

    前端黑板报
  • 直播、NFC、分包加载……小程序这两次新能力,有哪些开发者们可以玩的东西?

    小程序释放的能力一波接一波,对于开发者而言,真的是高潮一波接一波,微信已经越来越像一个移动端的操作系统。 如今,理论上来说,基于微信几乎可以完成所有想完成的开发...

    企鹅号小编
  • 惊爆!小程序连发7种新能力,开直播、连Wi-Fi、分包加载……你们想要的都来了!

    昨晚沉寂已久的小程序又在深夜向我们发射了四大新能力 ? 1 升级实时音视频录制及播放能力 小程序拥有实时录制音、视频和播放音视频组件啦! 符合类目要求的小程序自...

    企鹅号小编
  • 微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

    我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序...

    编程小石头
  • 【小程序项目开发-- 京东商城】uni-app开发之分包配置

    只需要我们配置分包配置的根目录文件root,就会按照分包页面生成自动修改配置,而在小程序开发工具中是需要全部自己配置选择的,这是与uni-app的不同

    计算机魔术师
  • 微信小程序性能极致优化——独立分包和性能测速上报

    当前环境下,微信小程序成为了重要的活动运营渠道。为了满足页面高效率在小程序端、H5、App 端上线和迭代的需求,大量运营和活动页面在小程序端选择了 Webvie...

    童欧巴
  • 小程序中实现视图懒加载

    在写小程序时,有个页面由于要展示很多内容,光弹窗都6个,还有大量的列表,所以wxml节点数很多,超过了小程序建议的1000个节点以下。

    别盯着我的名字看
  • 小程序 下拉刷新 上拉加载

    至此,一个简单的下拉刷新上拉加载基本搞定了。巧用微信的各种Api,就很舒服。 继续扩展的话: 1.updateDom那里下拉刷新是简单的清空重新加载,其实可...

    从今若
  • 微信小程序 加载 HTML 标签

    最近写项目中遇到一个问题,后台接口返回数据时有html标签,小程序如何加载html标签格式的字符串呢?小程序有跳转外连接的功能可以直接跳转到一个h5页面。具体使...

    honey缘木鱼
  • 腾讯课堂小程序性能极致优化——独立分包和性能测速上报

    此前综合篇中有提到,“对于独立性较强的页面可以通过独立分包的方式提升启动速度”。实践过程中,腾讯课堂小程序是如何分析问题并利用独立分包进行优化的呢?又如何得知生...

    用户1097444

扫码关注腾讯云开发者

领取腾讯云代金券