微信小程序---》分包加载

摘要:
---分包加载一、分包加载某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。在小程序启动时,默认会下载主包并启动主包内页面,当用户用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
【小程序】---分包加载

一、分包加载

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

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。

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

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

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

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

二、分包加载的实现

1、目录结构

微信小程序---》分包加载第1张

2、app.jsonsubpackages字段声明项目分包结构

复制代码
"subpackages": [
  {
    "root": "pages/api/",
    "pages": [
     "component/cat/index"
    ]
  }
]
复制代码

免责声明:文章转载自《微信小程序---》分包加载》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇华大MCU的应用中的问题记录DDWRT "中继桥接"模式 配置方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序 发送模板消息的功能实现

背景 - 小程序开发的过程中,绝大多数会满足微信支付 - 那么,作为友好交互的体现,自然就会考虑到支付后的消息通知咯 - 所以,我的小程序项目也要求完成这个效果,so.分享一下自己的实现步骤,以方便道友们少踩点坑... 微信消息通知的区别: 1. 微信网页版、公众号的消息提醒 要求用户必须 "关注商家公众号",才支持消息的接收 并且还有个奇怪...

微信小程序-最新获取用户基本信息方案

如果只是单纯的展示用户信息,那么最简单的方案就是 文档中组件: <open-data type="groupName" open-gid="xxxxxx"></open-data> <open-data type="userAvatarUrl"></open-data> <open-data type...

[转]微信小程序、微信公众号、H5之间相互跳转

本文转自:https://www.cnblogs.com/colorful-paopao1/p/8608609.html 转自慕课网 一、小程序和公众号 答案是:可以相互关联。 在微信公众号里可以添加小程序。 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序。已关联的小程序可被使用在自定义菜单和模版消息等场景中。 公众号可关联同主体的1...

Uniapp 之小程序版本更新检查——uni.getUpdateManager()

在开发小程序的时候,版本更新在所难免。所以,我们希望每次打开的小程序的时候,都可以进行版本检测。如果有新版本,那么,就更新,并且让用户能够重启,并应用新版本。 实现 开门见山,uni-app官方网站给了我们实现方法。以下是代码示例。 const updateManager =uni.getUpdateManager(); updateManager.on...

微信小程序连接无法跳转/ can not navigate to tabBar page错误

这里的说的跳转方式是通过js跳转如下: wxml页面: <button bindtap="enternews" >进入新闻news页面</button> js页面: enternews:function(){ wx.navigateTo({ url: '../products/products',//跳转地址 success: fu...

微信小程序单向数据流解决

1. 小程序中没有vue中v-model一样的双向数据机制,并且小程序也不像vue那样的进行 实时的数据驱动视图. 小程序页面数据加载完成后再去改变data中的数据页面是 不会有变化的. 2. 解决: 使用小程序提供的特定方法, 该方法会触发框架本身再次对页面进行渲染 this.setDate()方法的使用如下:...