吾知网

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1355|回复: 1

加载zip压缩的javascript代码以及在Egret H5实际应用

[复制链接]
发表于 2018-3-28 20:07:49 | 显示全部楼层 |阅读模式

随着H5游戏项目越做越大,那么随之而来的javascript也越来越来大。下面是来自实际项目使用的技术分享,从最开始的简单压缩应用到最后的Egret H5项目实战。

主要起因是策划对最快进入登录界面有硬性要求(3秒),那么最开始加载的文件越少越小越好。对H5的游戏程序进行压缩,可以大大缩小应用程序的加载时间。

本文分两个主题,

  1. 普通的javascript代码解压使用
  2. 实际Egret游戏项目的javascript代码解压使用 
    对实战感兴趣的朋友可以直接看后面的Egret部分,前面只是基础原理的入门版

文章例子下载,分两个两个例子文件夹,可运行 
http://download.csdn.net/detail/sujun10/9916309

js代码压缩效果

先看看压缩和没压缩之间的对比 
这里写图片描述 
可以看到egret引擎的文件没压缩之前有400~500k这样,压缩之后只有100kb了。 
再看看实际项目的文件: 
这里写图片描述 
原来main.min.js文件有2.3MB,压缩之后的main.min.js.cf(zip)文件只有441.9KB了。

使用jszip进行解压

  1. jszip的下载地址:http://stuk.github.io/jszip/
  2. jszip的基础教程:如何使用JSZip(How to use JSZip)
  3. JSZipUtils工具,包含了加载二进制文件的处理,很方便

字符串变script脚本的方法

  1. eval 
    eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
eval("console.log(1000)");
  • 1
不过实际要执行项目代码,得改变运行环境,这样可以避免一些因为环境变量引起的问题。
//运行环境指定window这个顶级对象
eval.call(window,text);
  • 1
  • 2
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.text = text;
document.body.appendChild(script);
  • 1
  • 2
  • 3
  • 4

JavaScrip脚本压缩

这里是简单的测试脚本,压缩后为ZipScript.zip

//声明变量
var msg = "test zip script";
//定义main函数
function main()
{
    console.log("start main");
    console.log(msg);
}
main();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

jszip3.0加载简单的javascript的zip文件

这里采用最新的jszip,所以用法可能会和老的有一点点不一样 
1. XMLHttpRequest加载zip文件 
主要设置XMLHttpRequest的responseType属性