當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Egret之JSZip高级应用：压缩JS
生活随笔
收集整理的這篇文章主要介紹了
Egret之JSZip高级应用：压缩JS
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本片講解Egret使用JSZip解析加壓的js代碼，然后將其還原成可執(zhí)行的js代碼。
一 ， 先將egret庫打包 ：
①：在網(wǎng)站根目錄建一個(gè)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){//壓縮進(jìn)的egret引擎的各個(gè)代碼文件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");//全部加載完成，啟動(dòng)egret游戲egret.runEgret({?renderMode:?"webgl",?audioType:?0,retina:true});});});}catch?(e){//壓縮失敗，實(shí)際項(xiàng)目這里需要改為加載沒壓縮的js文件。console.error("jszip解壓文件報(bào)錯(cuò)，進(jìn)行普通文件加載");}//加載單個(gè)zip文件，成功后進(jìn)行回調(diào)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>網(wǎng)站結(jié)構(gòu)：
使用瀏覽器查看加載結(jié)果：
如果不使用壓縮 ， 則結(jié)果是：
可以看出加載的代價(jià)比不壓縮要高很多。尤其是當(dāng)項(xiàng)目很大時(shí)。這就是壓縮js的意義。。。。。
轉(zhuǎn)載于:https://blog.51cto.com/aonaufly/1970528
總結(jié)
以上是生活随笔為你收集整理的Egret之JSZip高级应用：压缩JS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 16线激光雷达配置教程
- 下一篇： 阿里云中间件技术 促进互联网高速发展