[FlexJS] CSS Pruning

[Alex Harui <ah...@adobe.com.INVALID>]

Hi,

While waiting for more folks to examine the release branch packages, I try
find time to find easy ways to make HelloWorld smaller.  Currently, it is
62K of minified JS.  IMO, that's too big!

I think I can get some classes to drop away via more
@flexjsignorecoercions.  The list of interfaces in the output is pretty
large and I'll bet most are not needed at runtime.

But another sore spot for me is the CSS output.  This is true even for
regular Flex:  the CSS output contains EVERY class selector.  The compiler
knows how to prune out unused type selectors, but it always keeps every
class selector.  IOW, if you look at the CSS and see ".DataGridListArea",
that's a class selector.  But if you see "DataGrid" (no starting '.')
that’s a type selector and for HelloWorld, which has just a Label, the
DataGrid type selector is not in the output and any dependencies it brings
it are not in the output either.

But in HelloWorld today, ".DataGridListArea" is in the output for
HelloWorld.  In looking at the compiler code, we could somehow mark our
class selectors in a way that they will be removed if the type related to
the name isn't in the output.  IOW, we need to know to keep class
selectors like ".myClassSelector", but know to get rid of
.DataGridListArea if DataGrid is not in the output.

I've worked around this in the past by creating new classes.  In this
case, if .DataGridListArea is applied to a Group, then make a subclass of
Group called DataGridListArea and change the class selector to a type
selector.  The problem is that the definition of the DataGridListArea
class takes up room in the output, so it would be slightly better to find
a way to prune class selectors.

Maybe class selectors we want to prune should start with the type name
surrounded by '$", so .$DataGrid$ListArea.  Then the compiler could easily
check for two '$' and see if the class in-between is being kept in the
output or not.

Thoughts?
-Alex

Re: [FlexJS] CSS Pruning

[Alex Harui <ah...@adobe.com.INVALID>]

On 5/15/17, 8:46 AM, "Alex Harui" <ah...@adobe.com.INVALID> wrote:

>Maybe class selectors we want to prune should start with the type name
>surrounded by '$", so .$DataGrid$ListArea.  Then the compiler could easily
>check for two '$' and see if the class in-between is being kept in the
>output or not.

Hmm, looks like '$' isn't allowed in CSS selector names.  Maybe I'll try
"opt_DataGrid_ListArea" instead.

Other ideas?
-Alex

Re: [FlexJS] CSS Pruning

[Alex Harui <ah...@adobe.com.INVALID>]

On 5/15/17, 9:37 AM, "Peter Ent" <pe...@adobe.com.INVALID> wrote:

>The reason for .DataGridListArea is that the SWF side does not recognize
>a selector of:
>
>DataGrid Container { ... }

Right, SimpleCSS doesn't handle complex selectors.

>
>So I gave the Container used for the list area a class name. Perhaps I
>can try to change it to a type name and see if that's more helpful and if
>so look at replacing as many specialty class names with type selectors.

Again, creating new types for these internal pieces does help, but there
is a cost to creating these new internal types.  It is even smaller to use
special names for removable class selectors.

Of course, I could be wrong...
-Alex

Re: [FlexJS] CSS Pruning

[Peter Ent <pe...@adobe.com.INVALID>]

The reason for .DataGridListArea is that the SWF side does not recognize a selector of:

DataGrid Container { ... }

So I gave the Container used for the list area a class name. Perhaps I can try to change it to a type name and see if that's more helpful and if so look at replacing as many specialty class names with type selectors. 

Peter 


> On May 15, 2017, at 11:46 AM, Alex Harui <ah...@adobe.com.INVALID> wrote:
> 
> Hi,
> 
> While waiting for more folks to examine the release branch packages, I try
> find time to find easy ways to make HelloWorld smaller.  Currently, it is
> 62K of minified JS.  IMO, that's too big!
> 
> I think I can get some classes to drop away via more
> @flexjsignorecoercions.  The list of interfaces in the output is pretty
> large and I'll bet most are not needed at runtime.
> 
> But another sore spot for me is the CSS output.  This is true even for
> regular Flex:  the CSS output contains EVERY class selector.  The compiler
> knows how to prune out unused type selectors, but it always keeps every
> class selector.  IOW, if you look at the CSS and see ".DataGridListArea",
> that's a class selector.  But if you see "DataGrid" (no starting '.')
> that’s a type selector and for HelloWorld, which has just a Label, the
> DataGrid type selector is not in the output and any dependencies it brings
> it are not in the output either.
> 
> But in HelloWorld today, ".DataGridListArea" is in the output for
> HelloWorld.  In looking at the compiler code, we could somehow mark our
> class selectors in a way that they will be removed if the type related to
> the name isn't in the output.  IOW, we need to know to keep class
> selectors like ".myClassSelector", but know to get rid of
> .DataGridListArea if DataGrid is not in the output.
> 
> I've worked around this in the past by creating new classes.  In this
> case, if .DataGridListArea is applied to a Group, then make a subclass of
> Group called DataGridListArea and change the class selector to a type
> selector.  The problem is that the definition of the DataGridListArea
> class takes up room in the output, so it would be slightly better to find
> a way to prune class selectors.
> 
> Maybe class selectors we want to prune should start with the type name
> surrounded by '$", so .$DataGrid$ListArea.  Then the compiler could easily
> check for two '$' and see if the class in-between is being kept in the
> output or not.
> 
> Thoughts?
> -Alex
>