Package size optimization

Publish Time:2024-12-01

1. Remove Unnecessary Modules

The code consists of engine and business logic code, with the engine taking up more space. Engine optimization is simple - remove unused modules, and avoid using modules that take up large space if possible.

usiness logic code generally can't be modified, but 95% of developers overlook an important point: setting.js. The size of setting.js is determined by the number of files in the resources folder. Resources not loaded by code should definitely be placed outside the resources module.

elow are the engine modules and their descriptions for reference:

Module

Description

Size

Core

Required

-

Canvas

Required, canvas

-

Sprite

Required, sprite

-

Label

Required, text control

-

Audio cc.audioengine

Singleton object, mainly used for playing audio

11k

AudioSource

Audio source component, can clip audio

2k

Action

Behavior animations

55k

Animation

Animations

26k

Button

Buttons

11k

Collider

Collision

8k

Dynamic Atlas

Dynamic texture atlas/batching

5k

DragonBones

DragonBones animation

234k

EditBox

Input box

21k

Graphics

Drawing interface

21k

Geom Utils

API for 3D collision detection (ray)

31k

Intersection

Collision system detection helper class

2k

Layout

Layout component

12k

LabelEffect

Text effects (outline, shadow...)

2k

Mask

Mask component

8k

Mesh

Mesh

13k

MotionStreak

Trail effect

4k

NodePool

Object pool

0.7k

Native Socket

Network module (XMLHttpRequest), adding this module actually reduces package size by 8 bytes

-8byte

Physics

Physics module

384.7k

PageView

Page view container

6.72k

PageViewIndicator

Page view indicator component

1.73k

ProgressBar

Progress bar

2.57k

ParticleSystem

Particle system

59.6k

RichText

Rich text

15.9k

RendererTexture

Resource type, can be used for screenshots, has reference relationship with cc.Label, recommended to enable

5k

Slider

Slider

3byte

ScrollBar

Scrollbar

3.85k

ScrollView

Scroll container

19.94k

SpineSkeleton

Spine animation

183k

StudioComponent CocosStudio

Editor project file support

555byte

Toggle CheckBox

Checkbox component

4.9k

TiledMap

Display TMX format maps

49.3k

VideoPlayer

Video component

12.99k

Widget

UI layout component (commonly used)

6.84k

WebView

Internal page interaction view

6.9k

3D

3D core module

35.144k

3DPrimitive

Utility class for creating basic 3D model vertex data

19k

cannon.js

Open-source physics engine developed in JavaScript with comprehensive physics simulation

192k

Builtin

Physics engine for collision detection system. Compared to other physics engines, Builtin has no physics simulation but advantages in smaller package size and computation

38k

3DParticle

3D particle effects

193k

SafeArea

Component that adapts node layout to safe areas on phones like iPhone X, compatible with Android and iOS, typically used for top-level UI interaction nodes

906byte

2. Reduce Resource Size

2.1 Image Resources

2.2 Audio Resources

2.3 Font Libraries