微信小程序-分包 -每包2M

限制在2M以内。如果超过2M,可以通过分包加载实现,在app.json中配置即可,

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

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

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

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

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

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

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

打包原则

  • 声明 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 内的资源

独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时,需要首先下载主包;而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

使用独立分包时要注意:

  • 独立分包中不能依赖主包和其他分包中的内容,包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效,应避免在独立分包页面中使用 app.wxss 中的样式;
  • App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为;
  • 独立分包中暂时不支持使用插件。

关于 getApp()

与普通分包不同,独立分包运行时,App 并不一定被注册,因此 getApp() 也不一定可以获得 App 对象:

  • 当用户从独立分包页面启动小程序时,主包不存在,App也不存在,此时调用 getApp() 获取到的是 undefined。 当用户进入普通分包或主包内页面时,主包才会被下载,App 才会被注册。
  • 当用户是从普通分包或主包内页面跳转到独立分包页面时,主包已经存在,此时调用 getApp() 可以获取到真正的 App

由于这一限制,开发者无法通过 App 对象实现独立分包和小程序其他部分的全局变量共享。

为了在独立分包中满足这一需求,基础库 2.2.4 版本开始 getApp支持 [allowDefault]参数,在 App 未定义时返回一个默认实现。当主包加载,App 被注册时,默认实现中定义的属性会被覆盖合并到真正的 App 中。

当从独立分包启动小程序时,主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。

由于独立分包中无法定义 App,小程序生命周期的监听可以使用 wx.onAppShowwx.onAppHide 完成。App 上的其他事件可以使用 wx.onErrorwx.onPageNotFound 监听

预下载分包行为在进入某个页面时触发,通过在 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__"]
    }
  }
}

限制

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

如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。

原文地址:https://www.cnblogs.com/wen-/p/12109247.html

时间: 2024-11-10 12:00:24

微信小程序-分包 -每包2M的相关文章

微信小程序分包加载

分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本,而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示. 目前小程序分包大小有以下限制

微信小程序使用npm包步骤

这里以npm引入小程序官方UI组件库weui-miniprogram为例 1.在小程序根目录内,初始化npm(官方文档上是没写出这一步,这里做个补充) npm init 2.在小程序中执行命令安装 npm 包(这里使用了weui-miniprogram): npm install --save weui-miniprogram 3.在微信开发者工具中的菜单栏:工具 --> 构建 npm (这里记得先安装 npm 包,即步骤2): 完成构建后可以在目录树里看到了miniprogram_npm以及里

微信小程序分包加载代码实现方式

直接在 “app.json” 中贴入代码 { "pages": [ "pages/Login/xxxx", ], "subpackages":[{ // 这里就是贴入的代码 root值可以任意改 pages同上 "root":"packageA", "pages":[ "pages/Login/bbb", "pages/Login/ccc", ]

微信小程序使用第三方包

1.初始化项目 npm init 2.安装依赖包( 以vant webapp 为例 ) npm i vant-weapp -S --production 3.微信开发者工具配置 1.打开 详情 -- 选中 使用npm模板2.左上角 -- 工具 -- 构建npm ( 之后会提示 完成构建 ) 4.问题 若出现这种错误 VM6419:5 ./miniprogram_npm/[email protected]@vant-weapp/action-sheet/index.wxml ../wxs/util

微信小程序学习 动手撸一个校园网小程序

动手撸一个校园网微信小程序 高考完毕,想必广大学子和家长们都在忙着查询各所高校的信息,刚好上手微信小程序,当练手也当为自己的学校做点宣传,便当即撸了一个校园网微信小程序. 效果预览 源码地址:Github??求你的小星星- 准备工作 微信小程序开发者工具:腾讯开放了小程序个人开发平台,只需要一个微信号就可以成为小程序开发者了. 微信小程序设计指南:由于小程序是一个平台,所以平台上的开发者必须要遵守规范. ?easy-mock:使用easy-mock模拟后端数据,后面会简单介绍配置. 七牛云:使用

微信小程序开发---博客园老牛大讲堂

最新搞了个微信小程序,一切东西都是从头学习.我简单的介绍一下开发中遇到的几个技术点和前提--------博客园老牛大讲堂 注意事项:1.小程序要认证,不认证将来就没办法让别人看到,别人就搜索不到. 2.不要用margin和pandding.因为用这些的话,容易横向屏幕溢出的情况 3.小程序的开发和angular类似,跟其他的都差的远. 第一,怎么做小程序的底部导航.----博客园老牛大讲堂 代码:在app.json文件里面添加代码,selectedIconPath是选中状态的图片,iconPat

2019年最新微信小程序源码解包获取源码(分包教程)

微信小程序解包,源码是 https://github.com/qwerty472123/wxappUnpacker 大神写的.通过node wuWxapkg.js D:\wamp\www\Private\微信小程序代码\wxappUnpacker-master\wxappUnpacker-master\pkg\pkg\xxxx\_788457675_132.wxapkg 没分包一般都能获取到一般的.现在微信 7.X有了分包了后,解出来的就报错. 分包教程 node wuWxapkg.js -s=

微信小程序小结(4) -- 分包加载及小程序间跳转

分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本,而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示.

微信小程序编译包的获取与解压还原1——在手机中获取小程序编译包wxapkg

准备工作: 微信关注需要下载编译包的小程序,然后点进去看一下,微信就会自动下载相应的编译包到手机上了. 获取小程序编译包: 据说root手机可以直接在手机的文件管理中查找wxapkg文件,自己尝试了下,无法通过搜索查找到,对应的文件夹路径也找不到相关文件,所以这里就采用比较通用的方法来获取了. 大部分智能手机都有备份功能,这样就可以在手机重装系统或恢复出厂设置之后快速恢复手机应用和数据.对的,就是这个手机备份功能,当你对一个应用进行备份的时候,除了应用本身,应用的数据也会直接被备份下来.微信也不