source-map-explorer looks cool. Never tried it. I’m not sure how useful that tool is for Royale other than seeing which classes were included. The issue here is cumulative size of the js files.
The saving for removing class names is a linear savings directly related to the number of classes you use. I happen to know that the class names are only used by CSSSimpleStylesImpl in my app. That means the minified code which contains the class names is totally unnecessary if we can resolve the CSSSimpleStylesImpl lookup. To test how much of a difference it made, I deleted all the names from the minified code and gzipped the file. Just removing the class names resulted in about a 10KB reduction *after* gzipping for a 600KB+ gzipped js file. That’s about a 6% reduction for just the names. Not staggering, but significant. Besides the size, it results in “cleaner” code, and the app structure is not obvious in the minified code. That’s a plus in my mind. > On Dec 29, 2021, at 11:44 AM, Edward Stangler <estang...@bradmark.com> wrote: > > [I wrote this several weeks ago but didn't send it out. The gist of it is > that I don't think it's worth removing class names.] > > > Which tools are you using to direct your investigation into reducing sizes? > > > For your test case below: > > 87,824 regular release mode > 65,727 optimized (with your optimization switches) > ------ > 22,097 bytes smaller (25% savings) > (and SWF went up a few bytes) > > < 3,600 bytes (5.5% of optimized size) is in full names at top > > > For a basic Spark skin app (from issue #995): > > 811,560 - regular release mode > 631,789 - optimized (with your optimization switches) > ------- > 179,771 bytes smaller (22% savings) > > < 20,000 bytes (3% of optimized size) is in full names at top > > For comparison, just the mentions of "declaredBy" (part of Reflection) take > > 20,000 bytes (and that doesn't even include the other parts of the Reflection > metadata, which are not used in that skin app). > > > The source-map-explorer output for the Spark skin app looks like this: > > > > (The one for your test case below--not shown--overemphasizes Language.js > (~10KB), since the file sizes are so small (~60KB); the one above is more > representative of inefficiencies.) > > > How will class names reduce the size significantly? > > > > On 12/1/2021 12:15 PM, Harbs wrote: >> I suspect that the following is happening: >> >> 1. Language.as uses ROYALE_CLASS_INFO to find interfaces. >> 2. That makes Closure Compiler assume ROYALE_CLASS_INFO is needed. >> 3. All the info from ROYALE_CLASS_INFO including the class name and qname is >> preserved. >> >> Perhaps we should have two variables: >> 1. ROYALE_CLASS_INFO for the name and qname >> 2. ROYALE_INTERFACE_INFO for the interface dependency >> >> That should free up ROYALE_CLASS_INFO to be removed unless Reflection is >> used. >> >> Thoughts? >> >>> On Dec 1, 2021, at 7:50 PM, Harbs <harbs.li...@gmail.com> >>> <mailto:harbs.li...@gmail.com> wrote: >>> >>> It looks to me like that’s it. >>> >>> We have this included in the minified code which should not be there: >>> >>> ke.prototype.g={names:[{name:'IStyleObject',h:fb,kind:k}]}; >>> >>>> On Dec 1, 2021, at 7:46 PM, Harbs <harbs.li...@gmail.com> >>>> <mailto:harbs.li...@gmail.com> wrote: >>>> >>>> Hmm. Maybe. >>>> >>>> Greg, I think that’s your area of expertise. >>>> >>>>> On Dec 1, 2021, at 7:45 PM, Josh Tynjala <joshtynj...@bowlerhat.dev> >>>>> <mailto:joshtynj...@bowlerhat.dev> wrote: >>>>> >>>>> Could those be the qname strings added to the ROYALE_CLASS_INFO object? >>>>> >>>>> For example, I assume that this one: >>>>> >>>>> fb='org.apache.royale.core.IStyleObject' >>>>> >>>>> Comes from here: >>>>> >>>>> /** >>>>> * Metadata >>>>> * >>>>> * @type {Object.<string, Array.<Object>>} >>>>> */ >>>>> org.apache.royale.core.IStyleObject.prototype.ROYALE_CLASS_INFO = { names: >>>>> [{ name: 'IStyleObject', qName: 'org.apache.royale.core.IStyleObject', >>>>> kind: 'interface' }] }; >>>>> >>>>> I'm not super familiar with the reflection system, so that's just a guess. >>>>> >>>>> -- >>>>> Josh Tynjala >>>>> Bowler Hat LLC <https://bowlerhat.dev> <https://bowlerhat.dev/> >>>>> >>>>> >>>>> On Wed, Dec 1, 2021 at 9:25 AM Harbs <harbs.li...@gmail.com> >>>>> <mailto:harbs.li...@gmail.com> wrote: >>>>> >>>>>> Maybe I’m missing a compiler option, but I compiled this: >>>>>> >>>>>> <?xml version="1.0" encoding="utf-8"?> >>>>>> <js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; >>>>>> <http://ns.adobe.com/mxml/2009> >>>>>> xmlns:js="library://ns.apache.org/royale/basic" >>>>>> applicationComplete="onComplete()"> >>>>>> <fx:Script> >>>>>> <![CDATA[ >>>>>> private function onComplete():void{ >>>>>> trace("foo"); >>>>>> } >>>>>> ]]> >>>>>> </fx:Script> >>>>>> <js:valuesImpl> >>>>>> <js:SimpleCSSValuesImpl /> >>>>>> </js:valuesImpl> >>>>>> <js:initialView> >>>>>> <js:View> >>>>>> <js:Label text="ID" id="id1" localId="id1" /> >>>>>> </js:View> >>>>>> </js:initialView> >>>>>> </js:Application> >>>>>> >>>>>> with this: >>>>>> >>>>>> { >>>>>> "config": "royale", >>>>>> "compilerOptions": { >>>>>> "debug": true, >>>>>> "targets": ["JSRoyale"], >>>>>> "source-map": true, >>>>>> "remove-circulars": true >>>>>> }, >>>>>> "additionalOptions": "-js-output-optimization=skipAsCoercions >>>>>> -allow-abstract-classes=true -js-vector-emulation-class=Array >>>>>> -js-vector-index-checks=false -js-complex-implicit-coercions=false >>>>>> -export-public-symbols=false -prevent-rename-protected-symbols=false >>>>>> -prevent-rename-public-static-methods=false >>>>>> -prevent-rename-public-instance-methods=false >>>>>> -prevent-rename-public-static-variables=false >>>>>> -prevent-rename-public-instance-variables=false >>>>>> -prevent-rename-public-instance-accessors=false", >>>>>> "files": >>>>>> [ >>>>>> "src/test_project.mxml" >>>>>> ] >>>>>> } >>>>>> >>>>>> And got this at the top of the minified code: >>>>>> >>>>>> >>>>>> var aa='Error #1034: Type Coercion failed: cannot convert >>>>>> ',ba='applicationComplete',ca='array',da='backgroundImage',ea='border-box',fa='childrenAdded',f='class',ha='deferredSizeHandler',ia='explicitHeightChanged',ja='explicitWidthChanged',h='function',ka='handleInitComplete',la='handleSizeChange',ma='heightChanged',na='inherit',oa='initComplete',k='interface',pa='number',qa='object',ra='org.apache.royale.core.Application',sa='org.apache.royale.core.ApplicationBase',ta='org.apache.royale.core.Bead', >>>>>> >>>>>> ua='org.apache.royale.core.BeadViewBase',va='org.apache.royale.core.DispatcherBead',wa='org.apache.royale.core.ElementWrapper',xa='org.apache.royale.core.GroupBase',ya='org.apache.royale.core.HTMLElementWrapper',za='org.apache.royale.core.IApplicationView',Aa='org.apache.royale.core.IBead',Ba='org.apache.royale.core.IBeadController',Ca='org.apache.royale.core.IBeadLayout',Da='org.apache.royale.core.IBeadModel',Ea='org.apache.royale.core.IBeadView',Fa='org.apache.royale.core.IBorderPaddingMarginValuesImpl', >>>>>> >>>>>> Ga='org.apache.royale.core.ICSSImpl',Ha='org.apache.royale.core.IChild',Ia='org.apache.royale.core.IContainer',Ja='org.apache.royale.core.IContentViewHost',Ka='org.apache.royale.core.IDocument',La='org.apache.royale.core.IFlexInfo',Ma='org.apache.royale.core.IId',Na='org.apache.royale.core.IInitialViewApplication',Oa='org.apache.royale.core.ILayoutChild',Pa='org.apache.royale.core.ILayoutHost',Qa='org.apache.royale.core.ILayoutParent',Ra='org.apache.royale.core.ILayoutView',Sa='org.apache.royale.core.IMXMLDocument', >>>>>> >>>>>> Ta='org.apache.royale.core.IMeasurementBead',Ua='org.apache.royale.core.IParent',Va='org.apache.royale.core.IParentIUIBase',Wa='org.apache.royale.core.IPopUpHost',Xa='org.apache.royale.core.IPopUpHostParent',Ya='org.apache.royale.core.IRenderedObject',Za='org.apache.royale.core.IRoyaleElement',$a='org.apache.royale.core.IState',ab='org.apache.royale.core.IStatesImpl',bb='org.apache.royale.core.IStatesObject',cb='org.apache.royale.core.IStrand',db='org.apache.royale.core.IStrandWithModel',eb='org.apache.royale.core.IStrandWithModelView', >>>>>> >>>>>> fb='org.apache.royale.core.IStyleObject',gb='org.apache.royale.core.IStyleableObject',hb='org.apache.royale.core.IUIBase',ib='org.apache.royale.core.IValuesImpl',jb='org.apache.royale.core.LayoutBase',kb='org.apache.royale.core.SimpleCSSValuesImpl',lb='org.apache.royale.core.UIBase',mb='org.apache.royale.core.ValuesManager',nb='org.apache.royale.core.View',ob='org.apache.royale.core.ViewBase',pb='org.apache.royale.core.WrappedHTMLElement',qb='org.apache.royale.core.layout.EdgeData',rb='org.apache.royale.core.layout.LayoutData', >>>>>> >>>>>> sb='org.apache.royale.core.layout.MarginData',tb='org.apache.royale.core.styles.BorderStyles',ub='org.apache.royale.events.BrowserEvent',vb='org.apache.royale.events.ElementEvents',wb='org.apache.royale.events.Event',xb='org.apache.royale.events.EventDispatcher',yb='org.apache.royale.events.IBrowserEvent',zb='org.apache.royale.events.IEventDispatcher',Ab='org.apache.royale.events.IRoyaleEvent',Bb='org.apache.royale.events.ValueChangeEvent',Cb='org.apache.royale.events.ValueEvent',Db='org.apache.royale.events.utils.EventUtils', >>>>>> Eb='org.apache.royale.html.Label',Fb='org.apache.royale.html.beads.GroupView',Gb='org.apache.royale.html.beads.layouts.BasicLayout',Hb='org.apache.royale.utils.CSSUtils',Ib='org.apache.royale.utils.MXMLDataInterpreter',Jb='org.apache.royale.utils.StringPadder',Kb='org.apache.royale.utils.Timer',Lb='percentHeightChanged',Mb='percentWidthChanged',Nb='resizeHandler',Ob='sizeChanged',Pb='string',Qb='test_project',Rb='viewChanged',Sb='widthChanged';function >>>>>> l(){return function(){}} >>>>>> >>>>>>> On Dec 1, 2021, at 7:14 PM, Josh Tynjala <joshtynj...@bowlerhat.dev> >>>>>>> <mailto:joshtynj...@bowlerhat.dev> >>>>>> wrote: >>>>>>>> I also noticed that none of these options seem to allow class names to >>>>>> be >>>>>>> dropped. That’s a lot of baggage being carried around for no apparent >>>>>>> reason. >>>>>>> >>>>>>> It's certainly possible that I accidentally overlooked class renaming, >>>>>> but >>>>>>> that doesn't sound right to me. I'll double-check. >
