当前位置: 首页 > 编程日记 > 正文

如何利用微信小游戏的分包加载机制突破4M代码包体积限制

相信大家度过了一个不错的端午假期,在端午前夕,即6月15日晚上,微信小游戏宣布支持分包加载功能,白鹭引擎在端午节后第一天正式支持分包加载机制。在正式向开发者介绍如何使用前,我先为各位解读一下我对微信提供这个 API 的理解。

如何评论微信小游戏中新加入的分包加载 API ?

首先小标题先来一个标准的知乎体并自问自答。先说结论,我认为微信小游戏目前支持了分包加载,并将最大代码包体积从 4M 提升到 8M,并不是鼓励开发者将包体积提升到8M,恰恰相反是希望开发者将包体积尽可能降低。

目前微信小游戏存在的一个问题是,如果开发者的包体积较大(假设4M),游戏会长时间停留在小游戏的启动页(俗称白屏),用户卡在白屏阶段分为以下两种情况:

  • 下载时间过长,这是由于微信小游戏的初始包体积较大,并且用户的网络较差引起的

  • 首次渲染时间过长,这是由于用户代码体积较大,JS引擎首次解析较慢引起的

微信小游戏之所以提供了分包的策略,最主要的目标是希望开发者将包体积尽可能降低,将首屏加载的压力分散到游戏逻辑中,保证尽快给玩家一个可以交互的界面,而不是停留在微信小游戏的启动页中。

为此,微信小游戏本次更新中不仅仅更新了分包加载,也在管理后台的运维中心提供了加载性能监控功能,允许开发者针对上述数据数据分析功能,正是希望通过这些数据分析能力帮助开发者更精细化的优化小游戏的加载效率。

因此,将微信的本次更新简单粗暴的理解为“包体积从4M提升到了8M”是片面的。并且我个人也很不建议开发者直接这样做,因为目前您仍然要兼容微信不存在分包下载的老版本,如果您将您的游戏直接放置了8M的分包,就会在用户首次启动时必须加载完8M资源才能跳出启动页,这也不是很好的用户体验。

为此,白鹭引擎的策略是,引入一个 loading.js 的逻辑,并将其与白鹭引擎的核心代码(以及最简化的loading资源)打包为主包,然后在 loading.js 中去动态下载子包,并在下载过程中借助已经加载的白鹭引擎为用户渲染出 Loading 界面。

作为一位多年前从事 Flash 页游开发的开发者,我之所以将微信分包策略与白鹭引擎采用这种方式结合,是因为几乎所有的 Flash 页游都会至少存在两个 SWF 文件(可以近似理解为编译后的代码包文件),第一个SWF文件只负责加载逻辑并保持其体积尽可能小,而真正的业务逻辑由于代码总编译体积很大,都会放在后续加载。

最后用一张图概述:

如何在白鹭引擎中使用分包下载

首先宣布一个好消息,借助于白鹭引擎 5.1 版引入的新的自定义构建管线功能,您无需升级白鹭引擎至最新版本,而只是在构建管线中添加一些插件,并调整少量逻辑就可以完成此改动。

考虑到这项功能是引擎工程师利用端午节的这几天快速实现出来的,我们决定暂时将这个功能不放在引擎中,而是给开发者提供一个示例项目,开发者应首先在引擎提供的示例项目中将该功能跑通,然后再将其应用于您的正式项目。

步骤一:下载示例项目

您可以在

https://github.com/himuil/subPackageDemo

下载示例项目,该项目可以直接运行看到效果

该项目使用了Egret 5.2.3 版本,但是您也可以将 egretProperties.json 中的 engineVersion 和 compilerVersion 调整为您的引擎版本,我们支持 5.1 以上的版本。

步骤二:将该项目移植进您的游戏

  • 将 scripts/wxgame/subpackage.ts 拷贝进您的项目

  • 修改 config.wxgame.ts,将 ManifestPlugin 替换为 SubPackagePlugin (注意,您需要修改 build 和 publish)

  • 修改 config.wxgame.ts 中的 CleanPlugin,将 subpackage 对应的目录清除

  • 将示例项目的 EgretSubpackageLoading.js 拷贝进您的微信小游戏项目

  • 修改微信小游戏项目的 game.json,参考示例项目,引入 subpackages 属性

  • 修改微信小游戏项目的 game.js,参考示例项目,重点是添加调用 wx.loadSubPackage 的逻辑

 

步骤三:高级用法

  • 您可以通过修改 SubPackagePlugin 的参数和 game.json 的 subpackage 字段配置多个 subpackage

  • 您可以在游戏过程运行中,而不是游戏初始化时加载某个 subpackage,比如您可以在游戏启动时只加载一个登陆页面,在用户登陆之后再加载游戏主逻辑。

  • 每个 subpackage 可以包含多个 js 文件

转载于:https://www.cnblogs.com/xiaowanyingxiong/p/9857004.html

相关文章:

一个会画图的工程师

发现小谢图画的很好,虽然有些也是他引用的,但是我觉得还是很好所以这里收集下。 【RocketMQ源码学习】2-Namesrv 3-Remoting模块 rocketmq-remoting 模块是 RocketMQ 中负责网络通信的模块,被其他所有需要网络通信的模块依赖。它是基于 Net…

2016百度实习编程题:括号序列

不知如何解决 1.感觉贪心或者动态规划,不知道如何解决 2.做过生成合法括号序列的题目,想到用DFS补成合法的括号,然而没有成功

html动画怎么隐藏,JQuery操作div隐藏和显示的4种动画

Jquery-Div动画显示body{font-family:"宋体";font-size:13px;color:#415973;}#ShowDiv{display:none;width:300px;height:100px;border:1px solid #ccc;border-right:2px solid #888;border-bottom:2px solid #888;background-color:#f9f9f9;text-align:center;paddi…

@芥末的糖----------《后端加密》

bcryptsession 生命周期 session 标识产生的时机和清除时机:(权限验证) 用户已经登录:这个唯一标识会在用户登录时产生,用户点击退出时或者关闭浏览器时清除。 …

Java中的ClassLoader和SPI机制

深入探讨 Java 类加载器 成富是著名的Java专家,在IBM技术网站发表很多Java好文,也有著作。 线程上下文类加载器 线程上下文类加载器(context class loader)是从 JDK 1.2 开始引入的。类 java.lang.Thread中的方法 getContextCl…

html在线缓存视频,javascript – 如何为HTML视频添加缓冲

给你的视频提供ID:用于缓冲:var vid document.getElementById("myVideoOne");alert("Start: " vid.buffered.start(0) " End: " vid.buffered.end(0));var vid document.getElementById("myVideoTwo");aler…

ComponentName(String pkg, String cls)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qingfeng812/article/details/51279606 开发中因为改项目包名,用了全局替换,误操作把改构造函数的第二个参数只写了类名,不是完整的全路径…

mysql干货——数据库字符集和校对规则详解

2019独角兽企业重金招聘Python工程师标准>>> 一、什么是字符集 字符是多个文字和符号的总称,包括各个国家的文字、标点符号、图形符号、数字等。字符集多个字符的集合。 字符集合种类较多,每个字符集包含的字符的个数不同。对于字符集不支持的…

android监听器在哪里创建,[转载]android开发中创建按钮事件监听器的几种方法

第一种:匿名内部类作为事件监听器类Button button(Button)findViewById(R.id.button);button.setOnClickListener(newOnClickListener(){public void onClick(View v){System.out.println(“匿名内部类作为事件监听类”);}});大部分时候,事件处理器都没有…

Go语言源码分析CAS的实现和Java如出一辙

看了Go的源码CAS这块实现和java还是类似的。 关于Java的分析参考:Java使用字节码和汇编语言同步分析volatile,synchronized的底层实现 都是使用汇编指令:LOCKCMPXCHGL 原因很简单:单核肯定不能发挥Go的高并发性能,G…

python 的文件读写方法:read readline readlines wirte writelines

read()方法读入整个文件,把整个文件以字符串形式返回。readline() 方法每次只读一行,每运行一次只读一行。如果要读整个文件,需要结合循环判断文件结束。python判断文件末尾的标志是,读到空字符。比如:while str ! :r…

c# 模板方法模式

为什么80%的码农都做不了架构师?>>> 既然是模板肯定定义了相同的东西板式,提供了空白的地方自己添加进去就可以了 模板方法是把相同的部分抽象出来到抽象类中去定义,具体子类来实现具体的不同部分,这个思路也正式模板…

transient HashMap使用目的分析

看HashSet源码有这么一句&#xff1a; private transient HashMap<E,Object> map; 再看HashSet的Add方法&#xff1a; 实际上HashSet是复用HashMap了。 而我们去看看HashMap也会发现一样使用了transient 而不管是HashSet还是HashMapdou都要求是Serializable的&#xff…

4月29日监理师课程作业

软考信息系统监理师&#xff1a;2016年4月29日作业一、信息应用系统分析设计阶段监理1、需求分析的进入条件是什么&#xff1f;&#xff08;记&#xff09;答&#xff1a;①业主单位与承建单位正式签订建设合同&#xff0c;②并对初步的项目开发计划达成一致意见。2、需求分析的…

沉浸式导航栏html,混合开发 h5+ 沉浸式的适配

1.需要在mainfest.json plus对象里添加"statusbar": {"immersed": "true","style":"dark"}2.新建immersed.js注意 在里边不适用plus,因为plus.ready之后再js改变样式 必然造成页面闪烁跳动(function(w){document.addEventLi…

puppet yum模块、配置仓储、mount模块

转载&#xff1a;http://blog.51cto.com/ywzhou/1577335 作用&#xff1a;自动为客户端配置YUM源&#xff0c;为使用yum安装软件包提供便捷。 1、服务端配置yum模块 &#xff08;1&#xff09;模块清单 [rootpuppet ~]# tree /etc/puppet/modules/yum/ /etc/puppet/modules/yum…

最新技术选型解决方案列表

最新技术选型解决方案列表 1 概述 这是一份当前的技术选型方案&#xff0c;针对创业、中小型公司 2 目标2.1 产品目标2.1.1 SaaS 2.1.1.1 免安装 2.1.1.2 多租户 2.1.1.3 流量计费 2.1.2 可配置 2.1.2.1 需开通服务 2.1.2.2 服务自动组合 2.1…

合工大的计算机专业好不好,合肥工业大学计算机好,还是西电的好?差距有多大?...

合肥工业大学计算机好&#xff0c;还是西电的好?差距有多大?这两个大学都是教育部直属的工科院校&#xff0c;但是性质完全不一样&#xff0c;到底谁更厉害&#xff0c;结论是西电的计算机要比合肥工业大学强。首先因为西电本身就是比哈工大厉害的大学&#xff0c;学科评估方…

DataWorks V2使用PyUdf

在DataWorks上新建一个Python资源&#xff0c;命名为 test_udf.py 编辑pyudf的脚本代码&#xff0c;实现方法请参考Python实现MaxCompute UDF # -*- coding:utf-8 -*- from odps.udf import annotate #函数签名&#xff0c;SQL执行前所有函数的参数类型和返回值类型必须确定&a…

Java线程怎样映射到操作系统线程

先说多线程模型&#xff0c;参考经典教材《Operating System Concepts , Silberschatz ,9th edition》 中文版是《操作系统概念&#xff0c;第9版》 https://www.cs.uic.edu/~jbell/CourseNotes/OperatingSystems/4_Threads.html 一个线程是CPU利用率的基本单元&#xff0c;包…

NSUserDefaults的用法

2019独角兽企业重金招聘Python工程师标准>>> NSDictionary* defaults [[NSUserDefaults standardUserDefaults] dictionaryRepresentation]; NSLog("Defaults: %", defaults); 是用来获取设备上的所有的NSUserDefaults的设置。 上面代码输出了 2013-06…

计算机在轻工行业中的应用,计算机在不同领域中的具体应用

计算机以其卓越的性能和强大的生命力&#xff0c;在科学技术、国民经济、社会生活等各个方面得到了广泛的应用&#xff0c;并且取得了明显的社会效益和经济效益。计算机的应用几乎包括人类生活的一切领域&#xff0c;可以说是包罗万象&#xff0c;不胜枚举。据统计&#xff0c;…

自动驾驶L3量产追梦:如何跨过车规级和低成本门槛?

雷锋网新智驾按&#xff1a;从人类设想到落地前行&#xff0c;智能驾驶领域在2018年声响不断。在频繁的融资、技术创新和商业应用等信息背后&#xff0c;无数车企在公司战略中加入“网联化”、“自动化”&#xff0c;前几年涌现的自动驾驶领域的初创公司&#xff0c;近年来也开…

一句话说清聚集索引和非聚集索引以及MySQL的InnoDB和MyISAM

聚集索引和非聚集索引以及MySQL的InnoDB和MyISAM经常遇到有人向我咨询这个问题&#xff0c;其实呢&#xff0c;网上帖子很多&#xff0c;也说的都对&#xff0c;但是呢&#xff0c;看客可不一定是真的理解了。所以今天在这里用最简短的语言让你明白这些区别。 看这种图表就一切…

awstats CGI模式下动态生成页面缓慢的改进

本文可以看做是 多server多站点情况下awstats日志分析 这篇文章的下篇&#xff0c;在使用过程中发现awstats在cgi模式下动态生成分析报告慢的问题 &#xff08;尤其是有些站点每天两个多G的日志&#xff0c;查看起来简直是在考验人的耐性&#xff09;&#xff0c;本文分享一种改…

计算机水平flash试题,计算机flash考试试题

《Flash动画设计》课程考核方案一、考试班级及科目216班 《Flash动画设计》二、考试时间1、考核时间&#xff1a;90分钟2、考试地点&#xff1a;学校计算机3机房3、考核时期&#xff1a;十七、十八周内各课任教师自主选定三、考核形式上机独立完成所有操作。在规定时间内按考核…

CDH大数据集群安全风险汇总

一&#xff0c;风险分为内部和外部 首先内部&#xff1a; CDH大数据集群部署过程中会自动创建以服务命名的用户&#xff0c;如图所示 用户名(login_name)&#xff1a;口令位置(passwd)&#xff1a;用户标识号(UID)&#xff1a;用户组标识号(GID)&#xff1a;注释性描述(users)&…

有界阻塞队列ArrayBlockingQueue和无界阻塞队列LinkedBlockingQueue

ArrayBlockingQueue和LinkedBlockingQueue最大的区别是一个是有界无界&#xff0c;各有优劣。 先看实例代码&#xff1a; main函数起2个线程模拟生成消费者 import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import java.util.…

zabbix监控windows 服务器各项性能

Zabbix agent 在windows上安装部署1、 下载与解压地址: http://www.zabbix.com/downloads/2.4.0/zabbix_agents_2.4.0.win.zip解压zabbix_agents_2.4.0.win.zipconf目录存放是agent配置文件 bin文件存放windows下32位和64位安装程序2、 配置与安装2.1 配置zabbix agent相关配…

计算机设备板块超跌,半导体全线拉升,沪指强势突破3600点,午后A股会再次冲高回落吗...

周四开盘沪指开于3585点&#xff0c;和周三收盘价低开了8个点。上午开盘后沪指呈现低开高走的趋势&#xff0c;10点以后沪指持续拉升上涨不但顺利地突破了3600点而且还创了反弹新高。除了沪指以外深市三大股指也是全线翻红&#xff0c;上午A股的三大股指再次全线拉升并且均创了…