在白鷺引擎釋出了5.2.7版本中新增加了命令列，增加自動合圖外掛TextureMergerPlugin功能。今天，我們以一個EUI案例來展示自動合圖外掛的具體使用方法和注意事項。
此外，我們在本文還融入了UglifyPlugin、ResSplitPlugin、ZipPlugin等外掛使用方法。開發者利用上述4款外掛，將實現程式碼包體積更小、更好管理的目標。
目錄：
使用UglifyPlugin將程式碼混淆壓縮
使用ResSplitPlugin把部分資源分離出去
使用ZipPlugin把檔案壓縮成zip格式
使用TextureMergerPlugin將紋理合並，且用ConvertResConfigFilePlugin修改res.json配置檔案
專案初始化
- 把index.html中的
data-scale-mode改成fixedWidth - 開啟EgretLauncher，將本專案釋出成微信小遊戲
- 開啟微信開發者工具
使用UglifyPlugin壓縮程式碼
在微信開發者工具可以看到，js資料夾中5個庫檔案和一個main.js。
現在需求是是要把庫檔案壓縮到一個檔案lib.min.js中。
回到EgretWing，編輯sctipts下的config.wxgame.ts：
//***其他程式碼***
//
if (command == `build`) {
return {
outputDir,
commands: [
// 清理js，resource資料夾
new CleanPlugin({ matchers: ["js", "resource"] }),
new CompilePlugin({ libraryType: "debug", defines: { DEBUG: true, RELEASE: false } }),
new ExmlPlugin(`commonjs`), // 非 EUI 專案關閉此設定
new WxgamePlugin(),
// 壓縮外掛
new UglifyPlugin([
{
// 需要被壓縮的檔案
sources: [
"libs/modules/egret/egret.js",
"libs/modules/eui/eui.js",
"libs/modules/assetsmanager/assetsmanager.js",
"libs/modules/tween/tween.js",
],
// 壓縮後的檔案
target: "lib.min.js"
}
]),
new ManifestPlugin({ output: `manifest.js` })
]
}
}
//
// ***其他程式碼***儲存後在終端執行：
egret build可以在微信開發者工具看到釋出後的程式碼，js資料夾內的庫檔案已經被壓縮到lib.min.js。
但是報錯，找不到eui，這是因為自動生成的manifest.js裡面對js的引用順序出錯，需要優先引用lib.min.js
開啟根目錄下的manifest.js， 修改一下引用順序。
require("js/lib.min.js")
require("js/main.js")
require("js/default.thm.js")每次編譯的時候manifest.js都會被重新生成，所以我們使用一個自定義指令碼來修改他們的順序
開啟 scripts下的myPlugin.ts :
/**
* 示例自定義外掛，您可以查閱 http://developer.egret.com/cn/2d/projectConfig/cmdExtensionPluginin/
* 瞭解如何開發一個自定義外掛
*/
export class CustomPlugin implements plugins.Command {
private buffer
constructor() {
}
async onFile(file: plugins.File) {
// 儲存manifest.js檔案的內容
if(file.basename.indexOf(`manifest.js`) > -1) {
this.buffer = file.contents
}
return file;
}
async onFinish(commandContext: plugins.CommandContext) {
// 把`lib.min.js`移到第一位
if (this.buffer) {
let contents: string = this.buffer.toString()
let arr = contents.split(`
`)
let lib = null
arr.forEach((item, index) => {
if (item.indexOf(`lib.min.js`) > -1) {
lib = item
arr.splice(index, 1)
}
})
if (lib != null) {
arr.unshift(lib)
}
let newCont = arr.join(`
`)
commandContext.createFile(`manifest.js`, new Buffer(newCont))
}
}
}這個檔案就是用來自定義外掛的，在config.wxgame.ts中已經預設引用，所以只需要呼叫即可，注意呼叫順序
new ManifestPlugin({ output: `manifest.js` }),
// 在manifest.js生成之後呼叫
new CustomPlugin()使用ResSplitPlugin分離資原始檔
因為微信對程式碼包的大小是有限制的，總大小不能超過4M（使用分包功能可以提升到8M），所以我們需要通過ResSplitPlugin把某些遊戲資原始檔分離出去，將遊戲資源放置在一個外部CDN伺服器上，需要的時候動態載入即可。
編輯config.wxgame.ts：
// ***其他程式碼***
//
new ResSplitPlugin({
verbose: false, matchers:
[
// from 使用glob表示式來匹配檔案， projectName就是專案的名字
{ from: "resource/art/about/**.**", to: `${projectName}_wxgame_remote` },
{ from: "resource/art/heros_goods/**.**", to: `${projectName}_wxgame_remote` }
]
})
// ***其他程式碼***儲存後在終端執行：
egret build微信開發者工具中resource > art 下的about和heros_goods已經不在了。
被分離出去的在專案根目錄中 egret-eui-demo_wxgame_remote 資料夾內。
使用ZipPlugin把檔案壓縮成zip格式
為了減少載入次數和傳輸量，我們可以把檔案壓縮成zip格式，使用的時候可以使用第三方庫JSZip來讀取使用zip檔案。
使用ZipPlugin外掛之前，需要安裝cross-zip 和 cross-zip-cli ， 在終端中輸入：
//全域性安裝
npm install cross-zip -g
npm install cross-zip-cli -g安裝完成之後，在config.wxgame.ts新增程式碼：
new ZipPlugin({
mergeSelector: p => {
// 如果檔案是assets/路徑下的， 壓縮到assets.zip
if (p.indexOf("assets/") >= 0) {
return "assets.zip"
}
}
})專案中其實assets裡面的資源都是沒有用到的，這裡我們用它來演示壓縮外掛的使用。
儲存後在終端執行
egret build執行之後可以在微信開發者工具看到，resource目錄下原來的assets資料夾已經被壓縮成了assets.zip。
使用TextureMergerPlugin，ConvertResConfigFilePlugin合併紋理集
專案中使用的圖片資源都是單獨的png檔案，在載入的時候每張圖片都會單獨請求。我們可以通過合併紋理集的方式把這些圖片合成一張圖，以減少請求數量。
使用外掛之前，我們需要有紋理集的配置檔案tmpropject， 可以用兩種方式生成：
- 使用TextureMerger工具
- 執行指令碼生成
這裡使用第二種方法，使用指令碼autoMerger.js：
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var fs = require("fs");
var path = require("path");
var resjsons = ["resource/default.res.json"]; //要掃描的res.json檔案
var targetDir = "resource/TextureMerger"; //輸出目錄
var pathNor = path.relative(targetDir, "resource"); //返回一個相對路徑
var tempindex = 0;
//建立輸出資料夾
if (resjsons.length > 0) {
if (!fs.existsSync(targetDir)) {
// var paths = path.normalize(targetDir).split("\"); //windows 下使用
var paths = path.normalize(targetDir).split("/"); //mac linux 下使用
var target = ".";
for (var _i = 0, paths_1 = paths; _i < paths_1.length; _i++) {
var p = paths_1[_i];
// target += ("\" + p); // windows 下使用
target += ("/" + p); // mac linux 下使用
if (!fs.existsSync(target))
// 根據路徑建立資料夾
fs.mkdirSync(target);
}
}
}
var _loop_1 = function (resJson) {
// 判斷是否是res.json檔案
if (fs.existsSync(resJson) && resJson.indexOf("res.json") > -1) {
var defaultJson = fs.readFileSync(resJson, "utf-8");
// 解析res.json檔案內容
var defaultObject = JSON.parse(defaultJson);
var groups = defaultObject.groups; //組
var resources = defaultObject.resources; //資源
var resourcesHash_1 = {}; // 用來存放resources的資源資訊
// 遍歷resources
for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
var resource = resources_1[_i];
resourcesHash_1[resource.name] = resource.url;
}
// 遍歷groups
for (var _a = 0, groups_1 = groups; _a < groups_1.length; _a++) {
var group = groups_1[_a];
var tmproject = {}; //用來存放tmproject檔案的資訊
// tmproject檔案配置
tmproject["options"] = {
"layoutMath": "2",
"sizeMode": "2n",
"useExtension": 1,
"layoutGap": 1,
"extend": 0
};
// projectName
tmproject["projectName"] = group.name + "_" + tempindex;
// 版本
tmproject["version"] = 5;
tempindex++;
// 獲取res.json分組的keys, 並分割成陣列
var oldkeys = group.keys.split(",");
var oldkeysHash = {};
// 遍歷oldkeys
for (var _b = 0, oldkeys_1 = oldkeys; _b < oldkeys_1.length; _b++) {
var key = oldkeys_1[_b];
// 儲存到oldkeysHash物件中
oldkeysHash[key] = true;
}
var newKeys = [];
// 遍歷oldkeys
for (var _c = 0, oldkeys_2 = oldkeys; _c < oldkeys_2.length; _c++) {
var key = oldkeys_2[_c];
if (key.indexOf("json") == -1) {
if (!oldkeysHash[key.replace("png", "json")]) { //粒子和龍骨對應的圖集不合圖
if (!oldkeysHash[key.replace("png", "fnt")]) //點陣圖字型
newKeys.push(key);
}
else if (key.indexOf("jpg") > -1) {
newKeys.push(key);
}
}
}
oldkeysHash = {};
oldkeys = [];
// files路徑
var urls = newKeys.map(function (key) {
return path.join(pathNor, resourcesHash_1[key]);
});
tmproject["files"] = urls;
// 根據tmproject寫入檔案
if (urls.length > 0) {
fs.writeFileSync(path.join(targetDir, tmproject["projectName"] + ".tmproject"), JSON.stringify(tmproject));
}
tmproject = {};
}
}
};
//根據陣列開始掃描
for (var _a = 0, resjsons_1 = resjsons; _a < resjsons_1.length; _a++) {
var resJson = resjsons_1[_a];
_loop_1(resJson);
}把這個指令碼放在scripts資料夾內，這個指令碼是根據專案的default.res.json檔案的內容來生成tmpropject檔案
在終端中執行：
node scripts/autoMerger.js執行成功之後可以在resource資料夾中看到多出了一個TextureMerger資料夾，裡面就是根據default.res.json分組生成的tmpropject檔案。
現在只需要執行TextureMergerPlugin外掛就可以自動合併，這裡需要注意TextureMergerPlugin依賴 TextureMerger 1.7 以上的版本，如果不符合請自行安裝，並且在執行時TextureMerger需要處於關閉狀態。
new TextureMergerPlugin({textureMergerRoot:[ `resource`]})儲存後在終端執行：
egret build執行完成後，在微信開發者工具可以看到，resource > TextureMerger 內新增了三個png檔案，就是合併之後的紋理集。遊戲執行的時候只需要載入這三個紋理集就可以，無需載入那些單獨的png檔案但是需要去res.json裡面配置，把單獨的資源引用都刪除，加上紋理集的引用。
這些操作當然不需要手動去完成，現在只需要使用ConvertResConfigFilePlugin外掛就可以實現這個功能。
編輯config.wxgame.ts：
new TextureMergerPlugin(),
new ConvertResConfigFilePlugin({
resourceConfigFiles: [{ filename: "resource/default.res.json", root: "resource/" }],
nameSelector: (p) => {
return path.basename(p).split(".").join("_")
},
TM_Verbose: true
})儲存後在終端執行：
egret build在微信開發者工具中，開啟偵錯程式，在network皮膚可以看到載入的紋理集。
這裡有個注意事項，在遊戲中點選英雄按鈕，切換到英雄場景時，會發現列表裡面的圖片載入不出來。
在network皮膚可以看到載入請求是單獨的png檔案，而不是紋理集。
這是因為列表中的圖片地址是直接使用url。
// 原始陣列
let dataArr:any[] = [
{image: `resource/art/heros_goods/heros01.png`, name: `亞特伍德`, value: `評價: 很特麼厲害, 為所欲為`, isSelected: false},
{image: `resource/art/heros_goods/heros02.png`, name: `亞特伍德`, value: `評價: 很特麼厲害, 為所欲為`, isSelected: false},
{image: `resource/art/heros_goods/heros03.png`, name: `亞特伍德`, value: `評價: 很特麼厲害, 為所欲為`, isSelected: true},
{image: `resource/art/heros_goods/heros04.png`, name: `亞特伍德`, value: `評價: 很特麼厲害, 為所欲為`, isSelected: false},
{image: `resource/art/heros_goods/heros05.png`, name: `亞特伍德`, value: `評價: 很特麼厲害, 為所欲為`, isSelected: false},
{image: `resource/art/heros_goods/heros06.png`, name: `亞特伍德`, value: `評價: 很特麼厲害, 為所欲為`, isSelected: false},
{image: `resource/art/heros_goods/heros07.png`, name: `亞特伍德`, value: `評價: 很特麼厲害, 為所欲為`, isSelected: false}
]
// 轉成eui資料
let euiArr:eui.ArrayCollection = new eui.ArrayCollection(dataArr)
// 把list_hero資料來源設定成euiArr
this.list_hero.dataProvider = euiArr
// 設定list_hero的項呈視器 (這裡直接寫類名,而不是寫例項)
this.list_hero.itemRenderer = heroList_item這種引用方式的圖片，需要開發者手動在程式碼中修改，將圖片地址修改成紋理集中的圖片。
結語
本文通過使用UglifyPlugin，ResSplitPlugin，ZipPlugin，TextureMergerPlugin，ConvertResConfigFilePlugin外掛，使專案釋出到微信小程式之後的程式碼包體積減小，使用者發起的請求數變少，且將程式碼混淆壓縮。
使用Egret自帶的外掛，已經可以滿足開發者的基本需求，如果有針對專案的特殊需求，可以選擇自定義外掛。