应用zip压缩的javascript以及Egret H5游戏实战
主要起因是策划对最快进入登录界面有硬性要求(3秒),那么最开始加载的文件越小越好。对H5的游戏程序进行压缩,可以大大缩小应用程序的加载时间。
本文主要有两个主题:
- 普通的javascript代码解压使用
- 实际Egret游戏项目的javascript代码解压使用
对实战感兴趣的朋友可以直接看后面的Egret部分,前面只是基础原理的入门版
一、js代码压缩效果
先看看压缩和没压缩之间的对比
可以看到egret引擎的文件没压缩之前有400~500k这样,压缩之后只有100kb了。
再看看实际项目的文件:
原来main.min.js文件有2.3MB,压缩之后的main.min.js.cf(zip)文件只有441.9KB了。
使用jszip进行解压
- jszip的下载地址:http://stuk.github.io/jszip/
- jszip的基础教程:如何使用JSZip(How to use JSZip)
字符串变script脚本的方法
1、eval
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
eval("console.log(1000)");
不过实际要执行项目代码,得改变运行环境,这样可以避免一些因为环境变量引起的问题。
//运行环境指定window这个顶级对象
eval.call(window,text);
2、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>
二、实战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代码的效果是一样的。
源码包文件夹截图
1、第一层文件夹截图:
2、JSZipExample文件夹截图:
3、ZipEgretGame文件夹截图:
应用zip压缩的javascript以及Egret H5游戏实战
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
应用zip压缩的javascript以及Egret H5游戏实战的更多相关文章
- Zip 压缩和解压技术在 HTML5 中的应用
JSZip 是一款可以创建.读取.修改 .zip 文件的 javaScript 工具.在 web 应用中,免不了需要从 web 服务器中获取资源,如果可以将所有的资源都合并到一个 .zip 文件中,这 ...
- Zip 压缩、解压技术在 HTML5 浏览器中的应用
JSZip 是一款可以创建.读取.修改 .zip 文件的 javaScript 工具.在 web 应用中,免不了需要从 web 服务器中获取资源,如果可以将所有的资源都合并到一个 .zip 文件中,这 ...
- 开发H5游戏引擎的选择:Egret或Laya?
开发H5游戏引擎的选择:Egret或Laya? 一.总结 一句话总结:选laya吧 二.开发H5游戏引擎的选择:Egret或Laya? 一.H5游戏开发的引擎介绍 开发H5游戏的引擎有很多,比如egr ...
- .net 批量导出文件,以ZIP压缩方式导出
1. 首先Nuget ICSharpCode.SharpZipLib <script type="text/javascript"> $(funct ...
- 最新Zip压缩文件漏洞,黑客可以触发目录遍历攻击
近日,国内某安全公司研究人员透露了一个关键漏洞的详细信息,该漏洞影响了许多生态系统中的数千个项目,黑客可以利用这些漏洞在目标系统上实现代码执行. 黑客是如何通过Zip压缩文件入侵攻击?被称为“ZipS ...
- Android总结之Gzip/Zip压缩
前言: 做过Android网络开发的都知道,在网络传输中我们一般都会开启GZIP压缩,但是出于刨根问底的天性仅仅知道如何开启就不能满足俺的好奇心的,所以想着写个demo测试一下比较常用的两个数据压缩方 ...
- C# 对多个文件进行zip压缩
本文使用的ICSharpCode.SharpZipLib.dll类库来实现文件压缩,你可以通过Nuget来安装此类库,或者到搜索引擎去搜索一下遍地都是.类库下载下来之后,添加到项目引用就可以了.下面这 ...
- 【VC++技术杂谈008】使用zlib解压zip压缩文件
最近因为项目的需要,要对zip压缩文件进行批量解压.在网上查阅了相关的资料后,最终使用zlib开源库实现了该功能.本文将对zlib开源库进行简单介绍,并给出一个使用zlib开源库对zip压缩文件进行解 ...
- zip压缩命令的使用
file命令可以查看文件的类型 tar类型 .tar gzip类型 .gz bzip2类型 .bz2 zip类型 .zip 如果一个压缩文件由tar命令解压的前提,2个条件 1.这个文件 ...
随机推荐
- 【BZOJ 2744】 2744: [HEOI2012]朋友圈 (最大团,二分图匹配,构图)
2744: [HEOI2012]朋友圈 Description 在很久很久以前,曾经有两个国家和睦相处,无忧无虑的生活着.一年一度的评比大会开始了,作为和平的两国,一个朋友圈数量最多的永远都是最值得他 ...
- [BZOJ1913][APIO2010]信号覆盖(计算几何+计数)
1913: [Apio2010]signaling 信号覆盖 Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 1658 Solved: 672[Subm ...
- BZOJ 4247 挂饰(背包问题)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4247 [题目大意] JOI君有N个装在手机上的挂饰,编号为1...N. JOI君可以将 ...
- [TCO2013]TrickyInequality
$\newcommand{stirf}[2]{{{#1}\brack{#2}}}$$\newcommand{stirs}[2]{{{#1}\brace{#2}}}$题意:$\sum\limits_{i ...
- 【强联通分量缩点】【Tarjan】bzoj1051 [HAOI2006]受欢迎的牛
就是看是否有一些点,从其他任何点出发都可到达 定理:有向无环图中唯一出度为0的点,一定可以由任何点出发均可达. 所以缩点,若出度为零的点(强联通分量)唯一,则答案为该强联通分量中点的度数. 若不唯一, ...
- Eclipse错误导致无法启动The workspace exited with unsaved changes in the previous session
MyOpenSUSE:/home/jin/workspace # tail -f .metadata/.log !SESSION 2014-05-04 11:35:58.869 ----------- ...
- 如何释放 DB_RECOVERY_FILE_DEST_SIZE
转自原文 如何釋放 DB_RECOVERY_FILE_DEST_SIZE,有删减 oracle默認安裝之後,如何沒有手動設置歸檔路徑(alter system set log_archive_dest ...
- how to solve "[WARNING] File encoding has not been set, using platform encoding Cp1252, i.e. build is platform dependent!"
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- win7注册表损坏的修复方法
win7注册表损坏的修复方法 发布时间:2013-07-19 09:31发布者:系统城-小薇浏览数:3129 注册表是window系统中的一个非常重要的数据库,用于存储电脑系统和应用程序的设置信息,我 ...
- 【转载】【Todo】电商架构相关技术分析
看了一篇文章: http://kb.cnblogs.com/page/193670/ 淘宝应对"双11"的技术架构分析 没怎么看懂,有时间再看.