應用zip壓縮的javascript以及Egret H5遊戲實戰

時間 2019-12-02

標籤應用 zip 壓縮 javascript 以及 egret h5 遊戲實戰欄目數據壓縮简体版

原文原文鏈接

代碼地址以下：
http://www.demodashi.com/demo/11039.htmljavascript

主要原由是策劃對最快進入登陸界面有硬性要求(3秒)，那麼最開始加載的文件越小越好。對H5的遊戲程序進行壓縮,能夠大大縮小應用程序的加載時間。html

本文主要有兩個主題:

普通的javascript代碼解壓使用
實際Egret遊戲項目的javascript代碼解壓使用

對實戰感興趣的朋友能夠直接看後面的Egret部分，前面只是基礎原理的入門版java

1、js代碼壓縮效果

先看看壓縮和沒壓縮之間的對比git

能夠看到egret引擎的文件沒壓縮以前有400~500k這樣，壓縮以後只有100kb了。github

再看看實際項目的文件：web

原來main.min.js文件有2.3MB，壓縮以後的main.min.js.cf(zip)文件只有441.9KB了。json

使用jszip進行解壓

jszip的下載地址：http://stuk.github.io/jszip/
jszip的基礎教程：如何使用JSZip(How to use JSZip)

字符串變script腳本的方法

一、evalapi

eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。promise

eval("console.log(1000)");

不過實際要執行項目代碼，得改變運行環境，這樣能夠避免一些由於環境變量引發的問題。app

//運行環境指定window這個頂級對象
eval.call(window,text);

二、script元素

動態建立，使用document.createElement("script")方法。實際項目推薦使用這個方法。

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.text = text;
document.body.appendChild(script);

JavaScrip腳本壓縮

這裏是簡單的測試腳本，壓縮後爲ZipScript.zip

//聲明變量
var msg = "test zip script";
//定義main函數
function main()
{
    console.log("start main");
    console.log(msg);
}
main();

jszip3.0加載簡單的javascript的zip文件

這裏採用最新的jszip，因此用法可能會和老的有一點點不同

XMLHttpRequest加載zip文件
主要設置XMLHttpRequest的responseType屬性

var xhrZip = new XMLHttpRequest();
xhrZip.responseType = "arraybuffer";

使用JSZipUtils工具

使用這個工具類更加簡單

JSZipUtils.getBinaryContent('ZipScript.zip', function(err, data) {
    if(err) {
        throw err; // or handle err
    }
    console.log("JSZipUtils加載處理");
});

JavaScript使用Jszip的完整測試代碼

本身能夠去把//xhrZip.send(null);註釋去掉來跑兩種不一樣的狀況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jszip.js"></script>
    <script src="jszip-utils.js"></script>
</head>
    <script>

        var xhrZip = new XMLHttpRequest();
        xhrZip.open('GET', 'ZipScript.zip?v=' + Math.random(), true);
        xhrZip.responseType = "arraybuffer";
        xhrZip.addEventListener("load", function (evt)
        {
            console.log("XMLHttpRequest加載處理");
            jszipParse(xhrZip.response);
        });
        //開啓XMLHttpRequest加載二進制數據的方法
        //xhrZip.send(null);

        //使用jsziputils工具包加載zip
        JSZipUtils.getBinaryContent('ZipScript.zip', function(err, data) {
            if(err) {
                throw err; // or handle err
            }
            console.log("JSZipUtils加載處理");
            jszipParse(data);
        });
        //jszip解析zip文件，並轉換爲javascript腳本運行
        function jszipParse(data)
        {
            JSZip.loadAsync(data).then(function (zip) {
                return zip.file("ZipScript.js").async("string");
            }).then(function (text)
            {
                console.log("使用document.createElement");
                addScript(text);
                //使用eval
                console.log("使用eval方法");
                eval(text);
            });
        }
        //使用document建立javascript腳本
        function addScript(text)
        {
            var script = document.createElement('script');
            script.setAttribute('type', 'text/javascript');
            script.text = text;
            document.body.appendChild(script);
            document.body.removeChild(script);
        }
    </script>
</body>
</html>

2、實戰Egret項目壓縮JavaScript腳本

有人可能會以爲簡單腳本沒問題，那麼這裏就從實際的Egret項目作演示成果了。

建立基礎的Egret 項目

建立一個具有Egret UI的效果能夠看到效果（好比game）
egretProperties.json配置：

"modules": [
    {
      "name": "egret"
    },
    {
      "name": "res"
    },
    {
      "name": "tween"
    },
    {
      "name": "promise",
      "path": "./promise"
    }

egret代碼變成zip(後綴該爲cfg)步驟

發佈egret項目代碼生成,main.min.js文件
壓縮egret引擎代碼和main.min.js

egret.min.js、egret.web.min.js、res.min.js、tween.min.js、main.min.js

壓縮egret.zip文件。main.min.js壓縮爲main.min.js.zip

注意，實際項目中，egret引擎和項目的main的js文件應該分開壓成zip，由於引擎代碼幾乎步變，項目代碼常常變更，之後能夠只熱更項目代碼，不動引擎代碼zip。

使用的是老版的jszip，由於比較小(70多KB，api會稍微有點不一樣)
例子是分別使用IntelliJ IDEA和Egret Wing這兩個IDE跑的(Egret5.01)
壓縮文件zip的後綴修改成cfg，主要是zip可能會被下載軟件給攔截了。

部署加載zip文件的indexZip.html

修改項目的index.html爲的indexZip.html文件(也能夠直接用index.html修改)，這裏作了簡化，直接加載egret.zip和main.min.js.zip。
實際項目中儘可能少加載文件，則採用XMLHttpRequest，加載zip文件這裏和前面的解壓js的代碼同樣。這裏重點介紹解壓egret的代碼，後面會給出完整的代碼以及代碼工程。
加載和解壓egret以及main壓縮文件的代碼

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Egret</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <style>
        html, body {
            -ms-touch-action: none;
            background: #888888;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }
    </style>
    <script egret="libs" src="libs/jszip/jszip.min.js"></script>
</head>

<body>
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
     data-entry-class="Main"
     data-orientation="auto"
     data-scale-mode="showAll"
     data-frame-rate="30"
     data-content-width="640"
     data-content-height="1136"
     data-show-paint-rect="false"
     data-multi-fingered="2"
     data-show-fps="false" data-show-log="false"
     data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div>
<script>
    //加載egret的引擎庫
    try
    {
        loadZip("egret.cfg",function(zip)
        {
            //壓縮進的egret引擎的各個代碼文件
            var files = ["egret.min.js", "egret.web.min.js", "res.min.js", "tween.min.js", "promise.min.js"];
            for (var i = 0; i < files.length; i++)
            {
                createScript(zip,files[i]);
            }
            //加載遊戲代碼
            loadZip("main.min.js.cfg" + "?v=" + Math.random(),function(zip)
            {
                createScript(zip,"main.min.js");
                //所有加載完成，啓動egret遊戲
                egret.runEgret({ renderMode: "webgl", audioType: 0,retina:true});
            });
        });
    }
    catch (e)
    {
        //壓縮失敗，實際項目這裏須要改成加載沒壓縮的js文件。
        console.error("jszip解壓文件報錯，進行普通文件加載");
    }
    //加載單個zip文件，成功後進行回調
    function loadZip(url,callBack)
    {
        var xhrZip = new XMLHttpRequest();
        xhrZip.open("GET", url, true);
        xhrZip.responseType = "arraybuffer";
        xhrZip.addEventListener("load", function (oEvent)
        {
            var arrayBuffer = xhrZip.response; // 注意:不是oReq.responseText
            if (!arrayBuffer)
            {
                console.log(url + "解析異常:" + xhrZip);
                throw new Error("zip異常");
            }
            callBack(new JSZip(arrayBuffer));
        });
        xhrZip.send(null);
    }
    function createScript(zip,file)
    {
        //解壓出來變成script腳本
        var text = zip.file(file).asText();
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.text = text;
        document.body.appendChild(script);
        document.body.removeChild(script);
    }
</script>
</body>

</html>

最終的運行效果，和沒有壓縮egret代碼的效果是同樣的。