search

krisselden / ember-cli-optimize

MIT License
10 stars 3 forks source link

Working example? #1

Open briangonzalez opened 7 years ago

briangonzalez commented 7 years ago

Would you be willing to include or point to a working example?

krisselden commented 7 years ago

@briangonzalez this is still a bit of a WIP at this point, it does work but requires configuration to get the full benefit.

briangonzalez commented 7 years ago

How so? Can you expand or point me in the right direction?

krisselden commented 7 years ago

https://github.com/krisselden/ember-cli-optimize/blob/master/ember-cli-build.js#L22 is a working example with the dummy app

krisselden commented 7 years ago

Basically it wraps function literals with parenthesis if they are passed as an arg, to hint to the browser to eagerly parse the function literal, instead of skipping the function body, unless this is a call to define(), then it checks the first arg with the config if it is a string literal. This improves performance if the function is actually invoked, in the case of define, actually required. It hurts a little if not required, depending on how large the module is. If you were to eagerly hint all of your app and have a significant amount of code that is present and not required, you will make your app go slower. In general, I would eagerly hint every module used across multiple top entry points into your app. Or if a lazy engine, configure a module that is used across entry points in that lazy engine. Though, I'd be careful of excessive code splitting if you have offline app, the lazy function body skip is actually extremely fast.

krisselden commented 7 years ago

I could use help documenting and explaining these trade offs.

rondale-sc commented 7 years ago

@krisselden I ran some profiles (definitely not rigorous) but thought I'd share those here. I'm not seeing a performance win on my codebase, and wasn't sure if Chrome v59 changed some of its heuristics. These measure the compile script part of the performance flamechart for both vendor.js and app.js.

1 2 3
  vendor app
Minified with optimize (10x CPU throttle): 1.5x 479ms
Minified without optimize (10x CPU throttle): 945ms 367ms
Minified without optimize (no CPU throttle): 85ms 33ms
Minified with optimize (no CPU throttle): 111ms 39ms

I marked ~127 modules as eager. I overrode the requirejs.require func to mark modules that were required on the specific page I'm trying to optimize for use in the optimize config.

I'm going to put this off on a branch and return at some point, but I'm not entirely certain how to balance eager v lazy to see some performance improvements.

This is super interesting work! Thanks for working on it! 🍻