通过Zip实现Egret微端文件快速传输

最新推荐文章于 2021-08-03 21:02:25 发布

Meaning2016

最新推荐文章于 2021-08-03 21:02:25 发布

阅读量1.4k

点赞数

分类专栏： egret 文章标签： egret 微端 zip html js

本文链接：https://blog.youkuaiyun.com/u011378744/article/details/80464799

版权

egret 专栏收录该内容

6 篇文章

订阅专栏

当白鹭egret项目过大时，使用微端加载发布出来的应用项目时会比较慢，为了缩短加载时间，提高用户体验，我们选择使用zip先将发布生成的main.min.js和libs下的文件分别打包成zip,再做加载。

我们发现压缩后，文件会小很多，原来5M左右的main.min.js，只做正常压缩就能变成800多K了。

那么，如果能实现在index.html中加载压缩文件，并成功现实解压，问题便可解决了！

具体步骤如下：
1.获取解压依赖文件jszip。
2.将libs／modules中所有文件放到egret文件夹下，压缩成egret.zip，改名为egret.cfg。不使用.zip,是因为zip可能会被下载软件拦截。
3.将main.min.js压缩，命名为main.min.js.cfg。
4.将jszip放在libs下。
5.修改index.html。直接上代码

<!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)
        {
            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.runEgret({ renderMode: "webgl", audioType: 0,retina:true});
            });
        });
    }
    catch (e)
    {
        //一个个加载文件
        console.error("jszip解压文件报错，进行普通文件加载");
    }

    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>