嘛，因為原來的4M太小了，滿足不了小游戲內容的需求，現在提升到了8M。這8M可以分包加載，而不需要一次性加載8M。
如果是老版本，則分包加載不起作用，會一次加載8M內容，用戶等待會比較久。
二、Egret的解決方案
三、官方Demo分析
根據官網demo，在小游戲主項目和resource同級目錄下新建stage1文件夾，並放了3個js文件，分別是tween.js，main.js和game.js。
game.js是入口文件，在這個入口文件里require了tween.js和main.js。
修改小游戲項目的game.json，增加了subpackages屬性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{
"deviceOrientation"
:
"portrait"
,
"networkTimeout"
: {
"request"
: 5000,
"connectSocket"
: 5000,
"uploadFile"
: 5000,
"downloadFile"
: 5000
},
"subpackages"
: [
{
"name"
:
"stage1"
,
"root"
:
"stage1"
}
]
}
|
在代碼中加載分包stage1。更具體用法查看微信官網教程
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const
loadTask = wx.loadSubpackage({
name:
'stage1'
,
// name 可以填 name 或者 root
success: function(res) {
// 分包加載成功后通過 success 回調
},
fail: function(res) {
// 分包加載失敗通過 fail 回調
}
})
loadTask.onProgressUpdate(res => {
console.log(
'下載進度'
, res.progress)
console.log(
'已經下載的數據長度'
, res.totalBytesWritten)
console.log(
'預期需要下載的數據總長度'
, res.totalBytesExpectedToWrite)
})
|
到此，官方Demo的分包加載示例做了幾件事
1. 增加stage1文件夾，並將分包資源放在這個文件夾下
2. 修改game.json,配置分包stage1參數
3. 代碼中使用wx.loadSubpackage加載分包資源
注意：
意思是老版本會整包加載，需要開發者判斷是否支持wx.loadSubpackage屬性判斷是否老版本，如果是老版本然后主動調用require代碼。具體看官方Demo
|
1
2
3
4
5
6
|
if
(wx.loadSubpackage){
//支持分包，加載分包
}
else
{
//不支持分包，開發者主動調用
require(
'stage1/game.js'
)
}
|
Egret官方代碼，在主項目入口game.js中啟動runEgret之前，需要主動調用一次require("./stage1/game.js")分包的入口
四、那么在Egret中怎么利用 分包+RES 加載圖片資源呢？
假如我們有兩個場景，一個是預加載場景，一個是游戲界面。
我們先加載小部分資源，進入預加載場景，然后再加載分包資源，分包資源加載完成再進入游戲場景。
加載小游戲主包資源----->預加載場景(含進度條)----->加載分包------>游戲場景
1.將stage放在resource下
2. 資源組為stage1。
配置game.json，root的路徑如下修改
加載完主包資源后，顯示預加載場景。在該場景中先加載分包並顯示加載進度，再加載資源組到緩存，之后就正常使用和web下一樣了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const
loadTask = wx.loadSubpackage({
name:
'stage1'
,
// name 可以填 name 或者 root
success: function(res) {
console.log(
"加載分包成功"
);
},
fail: function(res) {
console.log(
"加載分包失敗"
);
},
complete:function(res){
console.log(
"加載分包完成"
);
RES.loadGroup(
"stage1"
);
}
})
loadTask.onProgressUpdate(res => {
console.log(
'下載進度'
, res.progress)
console.log(
'已經下載的數據長度'
, res.totalBytesWritten)
console.log(
'預期需要下載的數據總長度'
, res.totalBytesExpectedToWrite)
})
|
補充：
這樣有一個問題，每次發布，微信開發者工具都會提示缺少game.js。 （因為過了一段時間更新。我這里分包路徑是resource/assets/game。不是上面教程的stage1）
需要復制一個game.js（內容是空的）到微信開發者工具路徑下，每次發布都需要復制一次，因為每次發布這個文件就沒了。十分麻煩。
另一種方法：
1.Egret中將需要分包資源分成另外一個資源文件
2. 將分包的資源復制到微信小游戲項目中
這樣就可以避免每次發布，resource文件夾刷新，將game.js刷新掉，導致需要每次發布都復制一次。
Egret需要分包的資源是test資源目錄。test的資源文件是game.res.json。
修改wingProperties.json文件，加上test的資源文件路徑
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{
"resourcePlugin"
: {
"configs"
: [
{
"configPath"
:
"resource/default.res.json"
,
"relativePath"
:
"resource/"
},
{
"configPath"
:
"test/game.res.json"
,
"relativePath"
:
"test/"
}
]
},
"theme"
:
"resource/default.thm.json"
}
|
在Main中加載game.res.json
|
1
2
|
await RES.loadConfig(
"resource/default.res.json"
,
"resource/"
);
await RES.loadConfig(
"test/game.res.json"
,
"test"
);
|
這樣，在編輯時，就有了兩個資源文件
在test下添加資源文件，EgretIDE是沒有提示的。
復制test到微信小游戲項目下
這樣就可以每次發布不去復制game.js了。