xem / W

A micro WebGL2 framework with a ton of features
https://xem.github.io/W
331 stars 23 forks source link

Include minification and compress process in repo #27

Open Lukenickerson opened 6 months ago

Lukenickerson commented 6 months ago

Continuing the discussion from https://github.com/xem/W/issues/22#issuecomment-1928896989 ... It would be good to have the compression process in the repo, so that any changes could compare the minified/zipped size. As a micro framework we don't want the size to get much bigger. This should be a blocking issue to do before other changes so that we can monitor the size changes.

Suggestions: terser, ect.

Other ideas: https://github.com/morph-games/ring-rescue/blob/main/steamroll.mjs

Lukenickerson commented 6 months ago

I've tried running a slightly modified w.js (manually compressing the shader strings) through terser, google closure compiler, and uglify-js, and the best I can get it down to is 8,844 (from terser), compared with 8,610 bytes in w.min.full.js.

But combining Uglify or Terser + Roadroller it goes down to somewhere in the range of 3,850-3875 bytes. @xem -- Do you consider this good?

Example of roadroller output:

eval(Function("[M='AEP?CvzTZzzZt|P~]|iP|mIVq`E~Dj[OBtU]amtms_WbJ}]khs?zqAbSefvYnFyfMC@r]QH{P{hI?YT]eHrLHnY?|rzsBG}cew]SI`JzNDpbORrFS?_}gFwHZreRjteoUtFY^Fhoq^|WVVXtG{ly_M_}puK[Dh@z||{JVUotNgC]oTQ[ZtsUmvAAs{tsy|rs~I]`uTpbzeOtjmSpyKj{OrGuBDms{PhCHp{s@AAUFNUx}nYt_[}aQG?^AFJx[bdtmFPbE@iCpnBaVRI~GQecGEt_pHx|FfL}^{TWGamdiBjAvMadUvZ?ysWA@sfzZEgLxcGpHpvreUyGHYAGLQhNy|A{^|s[alGoXaD?N{A]y@aO_c}PKJELoEelisqP}Nk@UpYGbmIRvgSvQEAy{buQdC|kFUDMNP[?j@Oued@`}AHWKOYbV_NatbF[WruNWOkw{wx@hLCslUEse~Sk{jLI|AdQyJ}}@}fhHLL`UDg?ossit?QCApeoSLlEdydwjjivD@xYr}pWpMRFdfyuT[jeFCqI]XEAD@{HKpdgL^fL?LB?`S^YxNcV|t`rSfH]MwxhLHT^Vo~X}x|OBli`n^H]I~WA_Z?|NptwIk?HuXHbipatuH{GmckgB@k}MGhNOr?{}ik[sPx`BMQrb[wgTA^HjLfUB`FieqN`JdAvUYM}Wc?BcR{y_eym^va`is|}Qt@BSXWox_ADVIEAK]~xQmbb[nrHsUFbAJGlGyiB}_oxyHpiPs]_OlBe?ezmT^qJHHY~lbzOzv]Ks}ZK~BKsER@r^UtOJt`~~Wfkogo^Bf`BvTFoSnhGPt|qxoTyGSgBh[~|W@Jr_h{IqZt~JyecMfwrl[OPdO`whqFJhvPhRqgbe}hIByuPabfQh~TulmZRfWfTmpSO?|]Im@vEv^Hn`uNXunsC]_jMIan[rOyA][}|tc`zvDYqNCcAMqHDkaJrOSk{[ezJBZyDDUCuONlSdNBnGSxIFfY^ot]mUUSx`@]zlbRdas|GBUDmG{YUR|YesSRpWyQ_?ucBa@H`VOGLJinlnFigBs{cCidwbkEECbCMFa`tVMKq~er^SN^ZUpnEFmimUwlkbROrvDFkjq^xNKudy[hVLlly?Dbqf`Wya}eEdIFuUd[I}fwcrO[ElzuK}bJib{{nV[hudGZsUioJq`Of_mAPhxfPoREz{X@ApA@imM_wmXEio{wkKgDy@UbZMKB`TA~sCmFghtwjokzCGix|SVkB~stPi?@@nQseW`[xVGLCCp[FE`prlSTIkd]uxkXViVvmPVvACWvJe[kE]ULg_hHwBYWUNtXQr~wx}u_T]W_k[wCNBYDEhvVwU_QyPdftp^MmwdDrJ|^?jpfOzXMeIlssaCqvXcdaThZEy?Mqo}?bGWKUl?dwyMqAv?Y]FjuRXJqcdv@ED_oBeNN[ygQ?phPqxgXJ]}NK@VOieTbXocYLgWDbdPVwa`ZJ_ZcA]wKgSndKqVXLesVOO`mcMbcECsgv]TSFT^_WWoNS{^ClNN_?Kad|bxOL_[?hYafdozSwm{etzDV`E]QcuYbMQqKE?HpszpdA@WEeZ}KDJvir?abdGAYFV{rruXzjPisS}E]oZvgU{raSi]F?JsxwLYbWEJLqXEx{`^wZGxoBplfPZPijkGbN}v{lGswcpZfVkAe]DPCtykZ?OyS{hZvGDmpwfm]CAgLEpRloWeN|yDSYh?vi[ti?@KG`imu]ga}weTZX}|O|Wv{GTdnD]a?pNEITGdR{{Mr`rkSle`DDvL~NKHWnEWQTaxjpSkLdH~z@GikqufuP]KWFX[ZK?gNR~wg~ZruLjCItAkTQ^hXzJFGjZCDa~F`DCBpbUqUO`QTwte}XAoTdYkB`SH][ICQrWayJqLyJcw`AgjzvQ_[MYSJ]cYPH^kFgow[][m}{^mrrWOEPDYmahQ]?iyEpzVK_mAptrbEUbcRuyfJTRqUMuvfXjyJBlYCU@EFQ^zLsbtjb|Xsq[`zXEEAGXnEEZDY}w|_vdhJApEl^jpianc~liYEG}QWXpIxxCg~pTpcfAhOCHHOLO`Ddb_ym]mRMV]J@x]asrVkacjn_?BwybhIKqKRR`ekJlDd__sDDCbrMU}gG~cmIk|ASOXkthXX]Cl_vHlMDRMhBZxrAK}uCNpChw[QEEnn_ugzMl}LyUr^ljAgM`n]d~sig[?UIIRe^CauJZmGHVeSlUC~yJqJqByceISFvLCmS]taMM~cMjkHQINzx]AAMgCN}ZLgjNmQ^VyFFGvy^MSTdZlcZrnP|ND{UVr{rEVmSgPYfIoN@BVS}BtJNhCxacEjuMUNLtY^NG^zyjAQjWtwgDAtHAgW~ZsYL@uFGHigc}SGo[JMZRXeS{xPVsWT@ZCQq|hK~rsc`T`EHhpXmKFK|ILquW_VwpPPbopB~tIN@GcWgYGrMdhdlOmupnJihxnDpsFxdbuaSgMB^@lK?LDDp@OVgNaPej^J}|[qTesL]TjLh^acJNrgFLUYn^nUWsEXTYj_v^i?DG?oR{NVC]zWwiHp@d^^n@HQjPyZvWnEeQc@XEIlc|APqJMsIWIixYG]CkhgpMhUEkbIuYgsxJVThbRigBo_mHXs~MUNI^U^cQoY?LECAT@S}dx}WtkZ`XG?~aTaIjU@lNVFTiRQ@HjRCyNaDarpVYzG_uVchXBK?o[{M`olWuIpOzWegStguk}?HnMSSEABNhqrim|t@Xuh{B}Wo[`fPtniKU|SXjIWEJD{X{DV~uPJW^Gvh_fACw_j[D~JdanRsUi]OITuduk[K`BnWDPVB[T[mVSHNNYzki?ILOP{krjtkTHeJF]?vcWiT|ayNsweei}[]qY??yVay{XHK{oOFy[FhMN|il_JNmlRVnxwI{wlVMzPRuRHelOo{tkw?mHwNHyyD`osTahPko|]NYZUvsaSX`l_nMXxCUEjCu[njB@PUzozUyr_LtDUqM@~R[~zm|yil_sFRaIqsnPY~sYJguM__Sa`~hV^^s~sp[Cmr_VTWGfyjsemYFQIb@}fBV_jHbOGobK`v^jOJw`QVQVv{o^qRkn^QDqlgSYgmXDyWyJMrc^Z|o_fB{KUIe[L]MPMGLF`YyA{VSyfDBTO|pIacwD[SM?KZ}[VRunl]BFP`fa|FhxozSdzwoPxAutSoo?s{X]eboP~OT@Aeccuwo`E]P{uzQwjgzbjxY'",...']charCodeAtUinyxp',"for(;e<8844;c[e++]=x-128)for(x=1;x<128;n=p.map((i,y)=>(t=r[i]*2+1,t=Math.log(t/(h-t)),A-=a[y]*t,t/750)),A=~-h/(1+Math.exp(A))|1,U=o%h<A,o=o%h+(U?A:h-A)*(o>>15)-!U*A,p.map((i,y)=>(t=r[i]+=(U*h/2-r[i]<<15)/((C[i]+=C[i]<5)+1/20)>>15,a[y]+=n[y]*(U-A/h))),x=x*2+U)for(p='0102021032032104204310531065410976432098762'.split(A=0).map((i,y)=>(t=0,[...i].map((i,y)=>(t=t*997+(c[e-i]|0)|0)),h*128-1&t*997+x)*12+y);o<h*128;o=o*64|M.charCodeAt(d++)&63);return String.fromCharCode(...c)")([],[],1<<15,[0,0,0,0,0,0,0,0,0,0,0,0],new Uint16Array(51e6).fill(1<<13),new Uint8Array(51e6),0,0,0))

Edit: Of course, once I zip the road-rolled code, it is still not as small as your w.min.full.zip. I don't know what magic you used to compress everything!

xem commented 6 months ago

Hi! did you release a game for gamedevjs? can't wait to try it! (here's mine: https://maximeeuziere.itch.io/the-power-of-two)

As for compression, I confirm that W.js has always been compressed manually with Terser, through https://try.terser.org/ ... or my tool that has a few optimiztions built-in: https://xem.github.io/terser-online/

RoadRoller's footprint is quite big, and for small files like W.js, it's generally less efficient to do (Minify + RoadRoller + Zip) than (Minify + Zip) alone. But it's worth double-checking!

However, when W.js is used in a js13k entry, in that case, roadroller is very good at compressing the entire JS codebase of the game. Roadrolling W.js alone is a bit less meaningful as you can imagine.

Anyway, feel free to push a PR with your edited W.js and I'll see how well I can minify it on my side!

xem commented 6 months ago

Oh, your entry is Puck it up? Wow! I have no idea how to even start making a game that looks this good.

Lukenickerson commented 6 months ago

Yeah, I did Gamedev.js too -- mine is https://deathray.itch.io/ring-rescue -- made with W. I'll check your game out.

I found that uglify + zip turned out to be smaller than roadroller or any other combination. I'll have to check out the manual compression with Terser to see what can be done, and in the meantime send over the other code changes.