Egret之JSZip高级应用：压缩JS

本片讲解Egret使用JSZip解析加压的js代码，然后将其还原成可执行的js代码。

一，先将egret库打包：

①：在网站根目录建一个egret文件夹，在其中放入类库

②：将egret文件夹打包成egret.zip

二，将main.min.js打包成main.min.js.zip

三， 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/modules/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.zip",function(zip){//压缩进的egret引擎的各个代码文件var files = ["egret.min.js", "egret.web.min.js", "res.min.js", "tween.min.js", "dragonBones.min.js","eui.min.js","game.min.js","jszip.min.js","particle.min.js"];for (var i = 0; i < files.length; i++){createScript(zip,"egret/"+files[i]);}//加载游戏代码loadZip("main.min.js.zip" + "?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.responseTextif (!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>

网站结构：

使用浏览器查看加载结果：

如果不使用压缩，则结果是：

可以看出加载的代价比不压缩要高很多。尤其是当项目很大时。这就是压缩js的意义。。。。。

转载于:https://blog.51cto.com/aonaufly/1970528

Egret之JSZip高级应用：压缩JS相关推荐

java 压缩js css,java YUI压缩JS跟CSS
项目需要压缩JS和CSS,文件和文件夹太多,一一处理又比较麻烦,写个程序吧: import java.io.File; import java.io.FileInputStream; import j ...
css compressor java_利用YUI Compressor压缩JS/CSS之终极秘籍
JS/CSS的压缩已经不是什么新鲜话题了,自打YSlow推出后,这方面的优化话题是铺天盖地啊:不过当时作为后知后觉的我,甚至都没法完整地写出一份漂亮的JS/CSS的代码,何尝会去注意呢?! 时至今日, ...
webpack（一）压缩js,加载css,压缩html,压缩图片
1.webpack是前端资源构建工具(将一系列小工具用一个大工具处理),静态模块打包器(js资源,css资源,图片字体等资源). 首先告诉webpack一个入口文件,webpack就会以这个入口文 ...
Visual Studio 编译任务压缩js和css文件
如今网站都在说优化,压缩js和css文件就成了最基本的一种方法,js和css压缩有很多方法,很多网站也提供了这样的功能,也可以用YUI提供的包手动压缩,但是这都不效率啊,能不能在vs生成部署包的时候把 ...
gulp压缩js转义es6的常见错误及解决方案
gulp压缩js转义es6的常见错误及解决方案参考文章: (1)gulp压缩js转义es6的常见错误及解决方案 (2)https://www.cnblogs.com/uimeigui/p/11797 ...
uglifyjs压缩js文件
UglifyJS 是一个服务端node.js的压缩程序,用来压缩js文件 (需要用到 node+npm node集成了npm) 下载安装uglify.js npm install uglify-js ...
uglifyjs压缩JS
首先,去http://nodejs.org 下载安装.我下的版本是0.8.14.安装很简单,下一步需要先安装node,进入命令行,查看node,npm是否正确安装. 接下来安装UglifyJS,命令 ...
压缩js和css， IIS开启Etags， IIS开启Gzip
我们在前端页面性能调优时,经常会压缩js和css,下面列出几个比较好用的在线工具. http://www.jb51.net/tools/jsmin/index.htm http://javascrip ...
php 压缩js css文件,PHP实现动态压缩js与css文件的方法
本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用只需要 ...

Egret之JSZip高级应用：压缩JS

Egret之JSZip高级应用：压缩JS相关推荐

最新文章

热门文章