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

jekeyhui99 发表于 2018-3-28 20:07:49

<p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">随着H5游戏项目越做越大，那么随之而来的javascript也越来越来大。下面是来自实际项目使用的技术分享，从最开始的简单压缩应用到最后的Egret H5项目实战。<p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">主要起因是策划对最快进入登录界面有硬性要求(3秒)，那么最开始加载的文件越少越小越好。对H5的游戏程序进行压缩,可以大大缩小应用程序的加载时间。<h2 id="本文分两个主题" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t0" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>本文分两个主题，</h2><ol style="margin-bottom: 24px; box-sizing: border-box; list-style: none; color: rgb(69, 69, 69); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 24px;"><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">普通的javascript代码解压使用</li><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">实际Egret游戏项目的javascript代码解压使用  对实战感兴趣的朋友可以直接看后面的Egret部分，前面只是基础原理的入门版</li></ol><p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">文章例子下载，分两个两个例子文件夹，可运行  <a href="http://download.csdn.net/detail/sujun10/9916309" target="_blank" style="color: rgb(103, 149, 181); outline: 0px; box-sizing: border-box; text-decoration-line: none;">http://download.csdn.net/detail/sujun10/9916309</a><h2 id="js代码压缩效果" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t1" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>js代码压缩效果</h2><p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">先看看压缩和没压缩之间的对比  <img src="https://img-blog.csdn.net/20170731131350220?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VqdW4xMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="" style="border: 0px; outline: 0px; box-sizing: border-box; max-width: 100%; margin-top: 24px; margin-bottom: 24px;">  可以看到egret引擎的文件没压缩之前有400~500k这样，压缩之后只有100kb了。  再看看实际项目的文件：  <img src="https://img-blog.csdn.net/20170731131437498?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VqdW4xMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="" style="border: 0px; outline: 0px; box-sizing: border-box; max-width: 100%; margin-top: 24px; margin-bottom: 24px;">  原来main.min.js文件有2.3MB，压缩之后的main.min.js.cf(zip)文件只有441.9KB了。<h2 id="使用jszip进行解压" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t2" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>使用jszip进行解压</h2><ol style="margin-bottom: 24px; box-sizing: border-box; list-style: none; color: rgb(69, 69, 69); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 24px;"><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">jszip的下载地址：<a href="http://stuk.github.io/jszip/" target="_blank" style="color: rgb(103, 149, 181); outline: 0px; box-sizing: border-box; text-decoration-line: none;">http://stuk.github.io/jszip/</a></li><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">jszip的基础教程：<a href="http://blog.csdn.net/sujun10/article/details/76038886" target="_blank" style="color: rgb(103, 149, 181); outline: 0px; box-sizing: border-box; text-decoration-line: none;">如何使用JSZip(How to use JSZip)</a></li><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">J<a href="https://github.com/stuk/jszip-utils" target="_blank" style="color: rgb(103, 149, 181); outline: 0px; box-sizing: border-box; text-decoration-line: none;">SZipUtils工具</a>，包含了加载二进制文件的处理，很方便</li></ol><h2 id="字符串变script脚本的方法" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t3" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>字符串变script脚本的方法</h2><ol style="margin-bottom: 24px; box-sizing: border-box; list-style: none; color: rgb(69, 69, 69); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 24px;"><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">eval  <blockquote style="box-sizing: border-box; padding: 16px; margin-bottom: 24px; border-left: 8px solid rgb(221, 223, 228); background-color: rgb(238, 240, 244); overflow: auto; word-wrap: normal; word-break: normal;">eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。</blockquote></li></ol><pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250); font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="hljs bash has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">eval("console.log(1000)");</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li></ul></pre><span style="color: rgb(69, 69, 69); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 24px;">不过实际要执行项目代码，得改变运行环境，这样可以避免一些因为环境变量引起的问题。<pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250); font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="hljs mel has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">//运行环境指定window这个顶级对象
eval.call(window,text);</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li></ul></pre><ol style="margin-bottom: 24px; box-sizing: border-box; list-style: none; color: rgb(69, 69, 69); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 24px;"><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;"></li></ol><pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250); font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="hljs applescript has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.text = text;
document.body.appendChild(script);</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">3</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">4</li></ul></pre><h2 id="javascrip脚本压缩" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t4" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>JavaScrip脚本压缩</h2><p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">这里是简单的测试脚本，压缩后为ZipScript.zip<pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250); font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="hljs javascript has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">//声明变量
var msg = "test zip script";
//定义main函数
function main()
{
console.log("start main");
console.log(msg);
}
main();</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">3</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">4</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">5</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">6</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">7</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">8</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">9</li></ul></pre><h2 id="jszip30加载简单的javascript的zip文件" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t5" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>jszip3.0加载简单的javascript的zip文件</h2><p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">这里采用最新的jszip，所以用法可能会和老的有一点点不一样  1. XMLHttpRequest加载zip文件  主要设置XMLHttpRequest的responseType属性<pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250); font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="hljs cs has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">var xhrZip = new XMLHttpRequest();
xhrZip.responseType = "arraybuffer";</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li></ul></pre><h2 id="使用jsziputils工具" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t6" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>使用JSZipUtils工具</h2><p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">使用这个工具类更加简单<pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250); font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="hljs javascript has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">JSZipUtils.getBinaryContent('ZipScript.zip', function(err, data) {
if(err) {
 throw err; // or handle err
}
console.log("JSZipUtils加载处理");
});</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">3</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">4</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">5</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">6</li></ul></pre><h2 id="javascript使用jszip的完整测试代码" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t7" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>JavaScript使用Jszip的完整测试代码</h2><p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">自己可以去把//xhrZip.send(null);注释去掉来跑两种不同的情况<pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250); font-variant-numeric: normal; font-variant-east-asian: normal;"><code class="hljs xml has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;"><!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></code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">3</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">4</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">5</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">6</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">7</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">8</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">9</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">10</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">11</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">12</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">13</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">14</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">15</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">16</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">17</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">18</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">19</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">20</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">21</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">22</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">23</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">24</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">25</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">26</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">27</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">28</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">29</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">30</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">31</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">32</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">33</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">34</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">35</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">36</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">37</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">38</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">39</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">40</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">41</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">42</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">43</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">44</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">45</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">46</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">47</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">48</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">49</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">50</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">51</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">52</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">53</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">54</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">55</li></ul></pre><h2 id="实战egret项目压缩javascript脚本" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 24px; line-height: 32px; font-variant-numeric: normal; font-variant-east-asian: normal;"><a name="t8" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>实战Egret项目压缩JavaScript脚本</h2><p style="margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal;">有人可能会觉得简单脚本没问题，那么这里就从实际的Egret项目做演示成果了。

jekeyhui99 发表于 2018-3-28 20:08:55

<article style="box-shadow: rgba(0, 0, 0, 0.047) 0px 2px 4px 0px; padding-top: 20px; padding-bottom: 20px; color: rgb(0, 0, 0); font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 24px;"><div id="article_content" class="article_content csdn-tracking-statistics tracking-click" data-mod="popu_519" data-dsm="post" style="margin-bottom: 30px; padding-top: 20px; padding-right: 30px; padding-left: 30px; box-sizing: border-box; word-break: break-all; color: rgb(69, 69, 69); overflow: hidden;"><div class="markdown_views" style="box-sizing: border-box; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;"><h3 id="创建基础的egret-项目" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 22px; line-height: 30px;">创建基础的Egret 项目</h3>创建一个具备Egret UI的效果可以看到效果（比如game）  egretProperties.json配置：<pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250);"><code class="hljs bash has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">"modules": [
{
 "name": "egret"
},
{
 "name": "res"
},
{
 "name": "tween"
},
{
 "name": "promise",
 "path": "./promise"
}</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">3</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">4</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">5</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">6</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">7</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">8</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">9</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">10</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">11</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">12</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">13</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">14</li></ul></pre><h3 id="egret代码变成zip后缀该为cfg步骤" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 22px; line-height: 30px;"><a name="t10" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>egret代码变成zip(后缀该为cfg)步骤</h3><ol style="margin-bottom: 24px; box-sizing: border-box; list-style: none;"><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">发布egret项目代码生成,main.min.js文件</li><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">压缩egret引擎代码和main.min.js</li></ol><pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250);"><code class="hljs avrasm has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;">egret.min.js、egret.web.min.js、res.min.js、tween.min.js、main.min.js</code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li></ul></pre>压缩egret.zip文件。main.min.js压缩为main.min.js.zip注意，实际项目中，egret引擎和项目的main的js文件应该分开压成zip，因为引擎代码几乎步变，项目代码经常变动，以后可以只热更项目代码，不动引擎代码zip。<ol style="margin-bottom: 24px; box-sizing: border-box; list-style: none;"><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">使用的是老版的jszip，因为比较小(70多KB，api会稍微有点不同)</li><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">例子是分别使用IntelliJ IDEA和Egret Wing这两个IDE跑的(Egret5.01)</li><li style="margin-top: 8px; margin-left: 40px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">压缩文件zip的后缀修改为cfg，主要是zip可能会被下载软件给拦截了。</li></ol><h3 id="部署加载zip文件的indexziphtml" style="font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; margin-top: 8px; margin-bottom: 16px; box-sizing: border-box; color: rgb(79, 79, 79); font-size: 22px; line-height: 30px;"><a name="t11" style="color: rgb(78, 161, 219); outline: 0px; font-weight: 400; box-sizing: border-box;"></a>部署加载zip文件的indexZip.html</h3><ul style="margin-bottom: 24px; box-sizing: border-box; list-style: none;"><li style="margin-top: 8px; margin-left: 32px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">修改项目的index.html为的indexZip.html文件(也可以直接用index.html修改)，这里做了简化，直接加载egret.zip和main.min.js.zip。</li><li style="margin-top: 8px; margin-left: 32px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">实际项目中尽量少加载文件，则采用XMLHttpRequest，加载zip文件这里和前面的解压js的代码一样。这里重点介绍解压egret的代码，后面会给出完整的代码以及代码工程。</li><li style="margin-top: 8px; margin-left: 32px; box-sizing: border-box; list-style-position: initial; list-style-image: initial;">加载和解压egret以及main压缩文件的代码</li></ul><pre class="prettyprint" style="margin-bottom: 24px; padding: 8px 16px 4px 56px; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; border: none; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); background-color: rgb(246, 248, 250);"><code class="hljs xml has-numbering" style="box-sizing: border-box; display: block; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 22px; border-radius: 4px; overflow-x: auto; word-wrap: normal;"><!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);
 }
 //加载游戏代码
 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></code><ul class="pre-numbering" style="padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; list-style: none; position: absolute; width: 48px; background-color: rgb(238, 240, 244); top: 0px; left: 0px; text-align: right;"><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">1</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">2</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">3</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">4</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">5</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">6</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">7</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">8</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">9</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">10</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">11</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">12</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">13</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">14</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">15</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">16</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">17</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">18</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">19</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">20</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">21</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">22</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">23</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">24</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">25</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">26</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">27</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">28</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">29</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">30</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">31</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">32</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">33</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">34</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">35</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">36</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">37</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">38</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">39</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">40</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">41</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">42</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">43</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">44</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">45</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">46</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">47</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">48</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">49</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">50</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">51</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">52</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">53</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">54</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">55</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">56</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">57</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">58</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">59</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">60</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">61</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">62</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">63</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">64</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">65</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">66</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">67</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">68</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">69</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">70</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">71</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">72</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">73</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">74</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">75</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">76</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">77</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">78</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">79</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">80</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">81</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">82</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">83</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">84</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">85</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">86</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">87</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">88</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">89</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">90</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">91</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">92</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">93</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">94</li><li style="margin-left: 0px; padding-right: 8px; padding-left: 8px; box-sizing: border-box; list-style: none; color: rgb(153, 153, 153);">95</li></ul></pre>最终的运行效果，和没有压缩egret代码的效果是一样的。  <img src="https://img-blog.csdn.net/20170731131938218?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VqdW4xMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="" style="border: 0px; outline: 0px; box-sizing: border-box; max-width: 100%; margin-top: 24px; margin-bottom: 24px;"></div></div></article><div class="article_copyright" style="margin-top: -10px; padding: 10px 20px 30px 30px; box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.047) 0px 2px 4px 0px; font-size: 14px; color: rgb(120, 128, 135); clear: both; overflow: hidden; font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 24px;">版权声明：本文为博主原创文章，转载必须声明出处和作者。地址：http://blog.csdn.net/sujun10 作者：弃天笑 https://blog.csdn.net/sujun10/article/details/76427703</div>

页: [1]

吾知网's Archiver

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