Cocos Creator发布微信小游戏包内体积过大问题

cocos 微信小游戏 资源超20M 解决方案 阅读详情
AI摘要

本文介绍了如何使用CocosCreator发布微信小游戏时解决包体积过大的问题,推荐使用OSS资源管理,如七牛云和阿里云。同时,详细阐述了由于微信调整导致本地服务器搭建的复杂性,提供了一套完整的Node.js环境配置和http-server的安装步骤,以实现本地资源的加载,避免包内资源过大导致的错误。

1.初识

设置微信开发工具和js编辑器

3.5.2 :Cocos Creator perferences

2.Cocos Creator发布微信小游戏包内体积过大问题

2.1 已不可取:搭建本机服务器

2.2 也不建议分包:因为分完包依然很大

2.3 建议利用OSS资源管理

参照搭建本地服务器,构建填的地址换一下,拷贝文件的方式换一下即可
方式一:七牛云OSS,我注册,实名认证有10G免费,还有30天免费域名,适合开发调试,学习,网址如下:

https://s.qiniu.com/Znyqeu

方式二:阿里云OSS,花钱的更稳定,正式环境首选,网址如下:

https://www.aliyun.com/activity/new?userCode=c7q2ooln

(建议构建不勾选调试)

3.搭建本地服务器

如果你百度到的是是让你下载node,用于http-server搭建本机服务器,我劝你不不用看了,因为微信做调整,不能用本地服务器了。
会报错:

Cannot send network request to localhost.

虽然我也摸索出来了,如下:

3.1.搭建本地服务器

管理员模式进入cmd

3.1.1 安装node
node -v
3.1.2 查看node_global 和 node_cache是否安装(已安装忽略)

百度好多都没有这项说明,容易下面的报错:
这一步就是,解决下面的报错

 “无法将“http-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。”
3.1.2.1 设置node_global 和 node_cache

以下路径根据各自的node的安装位置进行调整,此处node安装 位置是:E:\AZ\python\nodejs
前提:node_global 和 node_cache 已新建,如没有新建,请新建后再执行命令

npm config set prefix "E:\AZ\python\nodejs\node_global"   

npm config set cache "E:\AZ\python\nodejs\node_cache"
3.1.2.2 配置环境变量

电脑右键,属性,找到“高级系统设置”

E:\AZ\python\nodejs\node_global
3.1.3 安装http-server

windows

npm install http-server -g

(for Linux & Mac)

sudo npm install http-server -g
3.1.4 创建本地服务器文件夹(自定义文件夹位置)

在E盘手动添加了文件夹

LocalServer
3.1.5.命令进入新文件夹

切换E盘

e:

进入文件夹

cd LocalServer

启动

http-server

http-server 或者 http-server src(路径)
更改端口为8888
http-server -p 8888

3.1.6 测试本地服务器搭建成功

方法一:出现了ip和端口列表
方法一:在浏览器中输入localhost:8080,出现空文件列表表示已经成功

关闭本地服务器

ctrl + c

3.2. 构建

3.2.1 填入:游戏名称
3.2.2 选中以下项:
  • 发布平台:微信小游戏
  • MD cache
  • 配置主包为远程包
3.2.3 填入:AppId
3.2.4 填入:资源服务器地址

(注:调成中文:在 Cocos Creator下的偏好设置,通用设置里)

3.3.拷贝文件

构建完毕后,将项目中的res文件夹剪切至本地服务器文件夹中,使用,即可自动加载本地服务器资源,不会因包内体积过大报错

(注:版本3.5.2是remote文件夹了,不是res文件夹,OSS一般要下载对应的Browser客户端,才能连文件夹一并上传)

3.4. 运行

微信web开发者工具打开项目,运行
或Cocos Creator配置好开发者工具,直接点运行

(注:配置好开发者工具:在 Cocos Creator下的偏好设置,外部程序的Wechat开发者工具里,对应版本3.5.2,有些在原生开发环境里,调成中文很容易找到的)

Cocos Creator提供了两种解决方案:
一:通过cc.loader.load来从服务器远程加载资源 ,成本过高,麻烦
二:通过引擎自动打包依赖,并把资源一股脑放在资源服务器,然后打开小游戏的时候,将自动使用内置的wx API自动下载所有资源,并缓存到本地,供下次进入游戏调用。免去重复下载资源,造成流量的浪费。

【Cocos Creator】图片资源压缩解决方案 在游戏开发过程中,通常需要解决以下问题: 原生平台减小包体、减小热更新时的资源大小; Web 平台加载远程资源,需要压缩资源的大小; 图片作为最主要的资源之一,我们需要一个压缩图片的解决方案。 为了总结这个解决方案,我们的基本思路是研究主流的几个压缩软件,对比它们压缩不同图片资源的效果。 1. 常见的压缩方案 pngquant 压缩软件 pngquant-官方网站 pngquant-github 仓库 imagemin npm 包 https://github.com/imagemin/imag 阅读详情

相关推荐

CocosCreator 面试题(七)优化cocos creator 包体体积

通过综合应用上述优化策略,可以有效地减小 Cocos Creator 包体体积,提升游戏的加载速度和用户体验。

w风雨无阻w的专栏 2275

Cocos Creator开发微信小游戏提示:source size ....KB exceed max limit 4MB

Cocos Creator开发微信小游戏提示:source size …KB exceed max limit 4MB 最近学习Cocos Creator开发微信小游戏,使用Cocos Creator构建、运行项目,想使用真机预览此项目时,提示上述问题。 微信小游戏主包的大小为4M,我这个初始化的项目大小超出了这个限制,所以就看了下项目中的文件,发现时cocos2d-js.js这个文件太大了,这个文件就4M多了。此项目我用cocos creator初始化的,就添加了下一个背景图,所以应该时哪里配置问题,网上

qq_37604998的博客 2548

揭秘微信小游戏开发:从Cocos Creator编译到微信平台源码实战

本文详细解析了使用Cocos Creator开发微信小游戏的全流程,从项目配置、构建发布到源码解析。重点介绍了如何将Cocos项目编译为微信平台可运行的源码,并深入探讨了子域配置、性能优化及常见问题解决方案,帮助开发者高效打通从开发到上线的关键环节。

moss5的博客 914

解决使用Cocos Creator发布微信小游戏包内体积过大问题

搭建本地服务器:          基于Node.js搭建本地web服务器,步骤如下:          1、安装Node.js                       按住”视窗...

weixin_40362806的博客 3224

微信小游戏提供服务器,发布到微信小游戏平台

发布到微信小游戏平台早在微信官方正式发布小游戏平台之前,Cocos Creator 团队就和微信开发团队合作完成了 Cocos Creator 对微信小游戏平台的支持。在小游戏正式公布之后,我们也在第一时间发布了完美支持小游戏的 Cocos Creator v1.8。这篇文档的初衷也是希望帮助开发者们在第一时间以最顺畅的方式提交游戏到小游戏平台。这篇文档将会覆盖:小游戏的运行环境介绍如何使用 Co...

weixin_31320437的博客 1462

cocos-creator使用记录27_将微信小游戏的res资源放后台

1.前言 http://home.51.com/1995494247/diary/wxitem/98405.html 在小游戏中,会首先下载你提交的完整游戏包,再运行 game.js 来启动游戏。所谓完整游戏包, 也就是开发者在微信开发者工具中所导入的资源,不管你是否需要这些资源,在玩家打开你的小 游戏时,都会被完整下载。所以为了首场景加载的体验,我们应该尽可能减小自己的小游戏包体, 将可以按需...

haibo19981的专栏 5446

使用cocos creator开发微信小游戏

CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤: 1、在微信公众平台下载微信开发者工具; 地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115,根据需要选择相应的版本。 小游戏开发:https://developers.weixin...

L的博客 7602

Cocos Creator微信小游戏开发入门:从环境搭建到发布上线的完整指南

游戏引擎是游戏开发的核心工具,它通过封装底层图形、物理和音频等模块,为开发者提供高效的创作环境。其工作原理在于将游戏逻辑、资源管理和平台适配抽象成可视化的工作流,从而降低开发门槛。在技术价值上,优秀的引擎能实现“一次开发,多端部署”,显著提升开发效率并优化性能。尤其在移动端和微信小游戏等轻量化应用场景中,引擎的跨平台能力和包体控制至关重要。Cocos Creator作为一款成熟的国产跨平台游戏引擎,凭借其与微信小游戏生态的深度集成和全流程解决方案,成为开发者的热门选择。本指南将围绕Cocos Creator

weixin_34396902的博客 402

Cocos Creator 3.8.6 构建项目至 微信小游戏 运行调试

微信开发者工具版本选 稳定版1.06.2412050

qq_40796974的博客 2687

Cocos Creator微信小游戏全链路实战:从构建发布到性能优化

在游戏开发领域,跨平台适配与性能优化是核心技术挑战。其原理在于通过构建工具链将通用游戏代码与资源,针对特定运行时环境进行编译、转换与封装,以实现一次开发多端部署。这项技术的核心价值在于显著提升开发效率,降低维护成本,并确保终端用户体验的一致性。尤其在微信小游戏这类具有独特运行容器(如JS Core与定制化API)的平台,适配工作涉及工程配置、资源管理、平台API封装及性能调优等多个维度。本文聚焦于使用Cocos Creator引擎,系统拆解从项目构建、微信平台特性适配、包体与资源加载优化,到性能调试与最终上

weixin_28025327的博客 368

Cocos Creator微信小游戏构建发布与排行榜子域配置实战指南

游戏开发中,构建发布是将源代码和资源转换为目标平台可执行格式的关键环节,其核心原理涉及代码编译、资源优化和平台适配。对于微信小游戏平台,这一过程尤为重要,因为它运行在封闭的特定环境中,对包体大小、API调用和运行安全有严格限制。构建的技术价值在于确保游戏功能完整、性能达标,并能顺利上线。在社交类小游戏的应用场景中,排行榜是提升用户粘性的核心功能,但其实现依赖于微信特有的开放数据域(子域)机制。本文聚焦于Cocos Creator引擎,详细解析如何通过构建配置将游戏发布至微信小游戏平台,并重点攻克排行榜子域配

weixin_33804582的博客 398

Cocos Creator 21点游戏开发实战:从零到发布微信小游戏

游戏开发中,状态机是管理复杂逻辑的核心设计模式,它通过定义有限状态和状态转换规则,确保游戏流程清晰可控。在Cocos Creator等游戏引擎中,结合模块化项目架构,状态机能有效提升代码可维护性。其技术价值在于分离游戏逻辑与表现,便于调试和扩展,广泛应用于回合制游戏、角色状态管理等场景。本文以21点游戏为例,详细拆解了基于状态机的游戏逻辑实现,并深入探讨了针对微信小游戏的性能优化策略,特别是通过图集制作和分包加载来优化资源管理,有效控制包体大小,为小游戏开发提供完整实践路径。

weixin_33831673的博客 440

千款小游戏源码合集:从Cocos Creator到多平台发布的完整指南

游戏开发的核心在于理解游戏引擎与跨平台发布流程。游戏引擎作为构建交互式应用的框架,通过封装图形渲染、物理模拟和输入处理等底层逻辑,极大提升了开发效率。其技术价值在于实现“一次开发,多端部署”,显著降低开发成本与时间。在应用场景上,无论是休闲益智还是动作射击类游戏,都依赖于成熟的引擎技术栈。本文聚焦于如何利用汇集了上千款小游戏源码的合集包,这些源码主要基于Cocos Creator、LayaAir等主流引擎,覆盖了从源码解析、环境配置到资源修复的全流程。针对微信小游戏、iOS及Android等不同平台,文章深

weixin_30368981的博客 313

[小游戏手动分包]Cocos Creator3.x构建小游戏后包体过大如何解决

摘要:Cocos Creator3.x因增强3D功能导致小游戏主包超限(如微信4M限制)。解决方案包括:1) 引擎裁剪,禁用未用模块;2) Bundle分包,通过编辑器实现分段/按需加载;3)手动分包(核心方案),需在微信平台配置game.js标识与game.json分包路径,并修改启动逻辑为预加载分包(示例代码含加载提示)。该方案通用性强,适用于Cocos各版本及多平台小游戏,建议优先适配微信再扩展至其他平台。

weixin_44592624的博客 1499

微信小游戏独立开发实战:从Canvas到Cocos Creator的完整指南

微信小游戏是基于Canvas和JavaScript的轻量级应用,通过适配层实现原生级渲染性能。其技术原理在于逻辑与渲染同上下文执行,结合微信API实现社交、广告与存储能力。这种架构降低了开发门槛,使前端开发者能快速构建可商业化的游戏产品。在休闲游戏、社交裂变和广告变现等场景中,微信小游戏展现出独特优势。本文围绕Canvas绘图、Cocos Creator引擎、性能调优与微信API集成,系统梳理从零到一的技术实践路径。

weixin_29009501的博客 313

cocosCreator微信小游戏排行榜的实现实例

cocosCreator微信小游戏排行榜的实现实例,包括子域和主域的实现。内含js、TS版本的实现方法。

上一篇: python 代码模拟事件
下一篇: Cocos Creator TypeScript 套牛游戏(可微信小游戏)
wx_h13813744
博客等级 码龄10年 290粉丝 50原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wx_h13813744

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值