Documentation of code cache in app startup optimization

[edusperoni]

Please, tell us what's the problem?

[ ] A typo [ ] Wrong documentation [x] Improvement of existing article [x] Missing documentation [ ] New article needed

Please, tell us more details

https://docs.nativescript.org/performance-optimizations/startup-times

The current documentation for startup speed improvements is lacking a section about code cache. In fact, the whole snapshot part may be rewritten as a result. I've being playing with code cache since it was fixed (I wasn't even aware it was an option until I saw the PR that went live on 5.2). According to my tests, code cache is vastly superior to snapshot.

I'm using a slower device as reference, all load times are from 2nd load of the app. Our app was taking 5.5s to load with snapshot. Code cache + snapshot reduced it to 4.9s (second load). Code cache without snapshot takes it to 3.5s. That's a huge decrease of startup time. I can do further testing to evaluate the correct load times using a sample app.

I can take a sample app and run on a real device, but I believe all examples would have to be redone, as it's a different device from videos, so the overall load times would be different.

Thoughts?

[darind]

That's an interesting observation about code cache. Could you please provide some more context about your app?

• Is it plain JS or Angular?
• Are you bundling the app (--bundle flag)?
• Besides the core modules, are you using some plugins?

We will also perform some tests on our side on a sample app and compare it with the snapshot.

[edusperoni]

Yes, I'm using angular. All tests were done with --bundle --env.aot --env.uglify --release

We have a lot of plugins already and our app is pretty big at this point. We're using angular lazy loading (WITHOUT preloading, as that actually loads everything when the app boots up...).

I'll create a fork of the groceries app and make it ready for testing, just in case

[edusperoni]

The test repo is done. Unfortunately I can't test on linux right now to enable snapshots.

All dependencies are updated (webpack, core modules and angular). See the codecache branch:

https://github.com/edusperoni/sample-Groceries/tree/codecache

• npm run apply-cc enables code cache
• npm run remove-cc disables code cache
• npm run run-android-snapshot runs a release build WITHOUT code cache and WITH snapshot
• npm run run-android-cc runs a release build WITH code cache and WITHOUT snapshot
• npm run run-android-cc-snapshot runs a release build WITH code cache and WITH snapshot

Load times should be, for second load:

CC > CC+Snapshot > Snapshot

Edit:

If anyone wants access to it, just ask. It might be clever to use timeline view (beware that timeline view slows the app down overall), or maybe a kind of counter to show when the app starts with the total time it took to load.