Reducing Component build sizes

[Charlotte Gore]

Hi all,

I've been using Component for the last 9 months - I love the community around it and the basic idea is fantastic.

In that time I've only really had one issue: the current project I'm working on is a very large application that's using about 50 components (a combination of installed dependencies and local modules) and I realised that this was adding nearly 200kb of 'require.alias' calls to the build file. Because these are large strings I found that this was stubbornly refusing to minify well, too.

Our build size was 950k which minified to 455k (I know, it's crazy, don't ask). 

I did do a search on this mailing list and on the Google+ community for anyone else with a problem with the all the require.alias data and didn't find anything. I couldn't find any options for Component build to avoid the aliases either. Perhaps it's pretty rare that people use Component as a package manager for such large applications? 

It'd be nice if Component supported a simpler, smaller build output for projects not using the namespacing, but I'm not sure enough people are concerned with the file sizes to justify the effort.

To work around this myself I've made a quick tool to 'flatten' Component builds which uses the require.alias data to resolve modules as a post-build, pre-minification step instead of leaving it for the browser to do. This means it can discard the require.alias calls and truncate the names of modules to their canonical names, i.e., 'component-dom/index.js' just becomes 'dom'.

It can't be used for all Component builds - if you're using namespacing in any way at all - say 'component/underscore' and 'components/underscore' then it's not for you.

The result for our app was that the new minified size is 250k which is looking a little less embarrassing (considering it's got jQuery, Backbone and Underscore in it).

The tool is https://github.com/CharlotteGore/Flatinator if anyone else might find this useful for now.

C

--

[Damian Krzeminski]

On Mon, Nov 11, 2013 at 5:57 AM, Charlotte Gore
<conspir...@gmail.com> wrote:
> Hi all,
>
> I've been using Component for the last 9 months - I love the community
> around it and the basic idea is fantastic.
>

[...]

>
> Our build size was 950k which minified to 455k (I know, it's crazy, don't
> ask).

Out of curiosity: What tools are you using to minify the the resulting
file - it seems that uglify with `--compress` and `mangle` should do a
better job than just 1/2 ratio.

>
> I did do a search on this mailing list and on the Google+ community for
> anyone else with a problem with the all the require.alias data and didn't
> find anything. I couldn't find any options for Component build to avoid the
> aliases either. Perhaps it's pretty rare that people use Component as a
> package manager for such large applications?
>

[...]

> The result for our app was that the new minified size is 250k which is
> looking a little less embarrassing (considering it's got jQuery, Backbone
> and Underscore in it).
>
> The tool is https://github.com/CharlotteGore/Flatinator if anyone else might
> find this useful for now.
>

Nice. I am going to try it and see how it works. I use component for
pretty large apps but I avoid the legacy libs that you mentioned (I
realize it's often not an option).
BTW: You could use component-xyz naming scheme - like the tools listed
here: https://github.com/component/component/wiki/Commands
D.

[Charlotte Gore]

On Monday, 11 November 2013 12:40:45 UTC, pirxpilot wrote:

Out of curiosity: What tools are you using to minify the the resulting
file - it seems that uglify with `--compress` and `mangle` should do a
better job than just 1/2 ratio.

This is with Uglify with -c and -m. I guess it's because it can't do much with lots of long string literals.  

Nice. I am going to try it and see how it works. I use component for
pretty large apps but I avoid the legacy libs that you mentioned (I
realize it's often not an option).

Good luck!

Yeah, Backbone wanting jQuery and Underscore on the global scope = pain. I've done a bit of work to pull out the useful bits of Backbone into discrete components to avoid this but haven't been able to integrate this into this particular behemoth application.

"I'll just put jQuery in for now..." is always a bad move.

BTW: You could use component-xyz naming scheme - like the tools listed
here: https://github.com/component/component/wiki/Commands
D.

Oh, that's a good idea. :) Thanks!

C

[ericgj]

Not that familiar with builder internals, but I thought `component build --dev` gives you the uncompressable Function strings, but `component build` (without --dev) does not ?  Compression should be much better on the latter, no ?

[Tj]

the aliasing will be going away soon, but gzip makes short work of repetitive strings like that. later we will just be replacing require calls with references like require.modules['foo-bar']

Sent from my iPhone

--
You received this message because you are subscribed to the Google Groups "component" group.
To unsubscribe from this group and stop receiving emails from it, send an email to componentjs...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Wil Moore III]

Yeah, Backbone wanting jQuery and Underscore on the global scope = pain. I've done a bit of work to pull out the useful bits of Backbone into discrete components to avoid this but haven't been able to integrate this into this particular behemoth application.

Have you by any chance tried Exoskeleton as a replacement (assuming the only option for this app is to be API compatible w/ Backbone)?

http://exosjs.com

[Sankar Gorthi]

Also backbone does try to load underscore using a require() statement if it exists. It's in the source code for backbone.

Or maybe it's only on the latest version...

[Charlotte Gore]

Awesome! :D

[Charlotte Gore]

On Monday, 11 November 2013 16:28:53 UTC, Wil Moore wrote:

Have you by any chance tried Exoskeleton as a replacement (assuming the only option for this app is to be API compatible w/ Backbone)?

http://exosjs.com

I haven't, but that looks very cool. Thanks for that!

C 

[Sankar Gorthi]

https://github.com/jashkenas/backbone/blob/master/backbone.js#L21

jQuery and underscore do get pulled in as required modules, but could mean baking them into your application multiple times.

On Monday, November 11, 2013 8:36:01 AM UTC-8, Sankar Gorthi wrote:

Also backbone does try to load underscore using a require() statement if it exists. It's in the source code for backbone.

Or maybe it's only on the latest version...