[Question] How to speed up load time

[luchillo17]

So i've created an app with the ng template, and in my device it takes 10 1/2 seconds, then i install this package and it goes down to 5 1/2 secs.

I've read that snapshots are supposed to help but the package says it's incompatible with this one, however this one has a snapshot folder which makes me think you already tackled this.

However readme doesn't say anything about it, does it work it out by default which means the lower limit of my load time is 5 secs? if it does only work for production builds, how do i activate it for dev builds to test the load time without bundling and signing an apk?

Also AOT is enabled by default? same as above, to test minimum load time, how do you activate it in dev mode?

Basically readme isn't specific enough and generates bunch of doubts.

[sis0k0]

Hey @luchillo17,

First of all, AoT compilation with Angular compiler is enabled by default if you are using the webpack plugin. However, we still haven't managed to make it work in dev mode (tns run android). That's mainly because we encourage users to use the webpack plugin for release build and tns run/build for developing.
Also, you can try building with uglifyjs to improve the bundle size and loading time. You can do that by passing the --uglify option when building (npm run build-android-bundle --uglify).

Now, let's move on to the exciting part - V8 snapshots. Until now, we used the android-snapshot plugin which, as you noticed, was incompatible with the webpack plugin. With the NativeScript 3.1 release we'll introduce a new way of generating snapshots - local snapshot builds, generated with the NativeScriptSnapshot plugin when you are building with webpack. The cool thing is that this feature is already available if you are using the next tag of the nativescript-dev-webpack plugin. If you are applying it to an existing project, you also need to run the ./node_modules/.bin/update-ns-webpack script, which will add some snapshot specific configurations to your webpack configuration.

[luchillo17]

@sis0k0 Interesting, i've made a production build (signed and all that) and it seems i cannot get lower to 5 secs, i'll try next version to test the snapshots later tonight after work.

If this takes down the load time to at least 3 secs, i'll be using NativeScript over React Native (i've found how to enable typescript with it, but i would prefer Angular over React).

[sis0k0]

@luchillo17, we'll provide better documentation for the local snapshots story soon. However, we'll be happy if you test it and give some feedback. I forgot to mention that you also need to pass --snapshot when building with webpack to enable the nativescript snapshot plugin.

[cnsimbe]

I am having issues with load time as well. I have NEVER been able to run any nativescript Angular application that took less than 7 seconds to startup. ( I have tried many of the example applications, even the simplest of all apps )
I have used webpack + uglify, and built in release mode it isnt working whatever I do. My current app I am working is taking 8-9 seconds.
At this point I really desperate, I dont know if I choose the wrong the framework. I have tried with the @next version for web-pack, nativescript-angular, tns-core-modules. But even with the latest of the latest, their is barely any difference.

I really hope this Webpack + Snapshot will bring the startup time to under 5 seconds.
I understand 3.1 is still in development, but I tried with,
npm run start-android-bundle --snapshot
It builds fine, but app crashes immediately on startup: Error: Zone already loaded

I dont know why, but Nativescript seems to be performing much much less than Ionic Apps. Page navigation taking about 2-3 seconds, ( or just freezes like for 10 seconds! ) - rewrote and optimized my XML, but it didnt help much. And many of the showcase apps prove this ( and most of them are seemingly simple apps )

So, what is really native about Nativescript on Android? I really hope it is my dumb self that has configured stuff wrongly.
( IOS just works fine. Loading time is 3-4 seconds )

[luchillo17]

@sis0k0, having issues after installing the next version & updating with ./node_modules/.bin/update-ns-webpack.

Error says this after running npm run start-android-bundle:

Error: Cannot find module 'has-flag'                                                                 
    at Function.Module._resolveFilename (module.js:469:15)                                           
    at Function.Module._load (module.js:417:25)                                                      
    at Module.require (module.js:497:17)                                                             
    at require (internal/module.js:20:19)                                                            
    at Object.<anonymous> (/mnt/LinHDD/Carlos/Programming/BuildTest/node_modules/webpack/node_modules/supports-color/index.js:2:15)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
child process exited with code 1

[ivanbuhov]

@cnsimbe @luchillo17
Do these errors happen only when --snpahsot flag is passed? Can you provide the bundling command log (npm run start-android-bundle --uglify --snapshot)?

[luchillo17]

With no --snapshot nor --uglify:

It happens the same either i use start or build.

[cnsimbe]

I am using npm run start-android-bundle --uglify --snapshot
It now works fine.
I fixed it by updating by app/vendor-platform.android.ts file according to this commit

[ivanbuhov]

@luchillo17 I can't see the error message in the log. Can you paste the whole log of npm run build-android-bundle? Also, where does has-flag module come from? Is it a module that should be included in some of the bundles produced by Webapck?

[luchillo17]

@ivanbuhov You tell me, i don't know such module or package, it started showing as an error when i updated to next version.

[ivanbuhov]

@luchillo17 Ok, can you paste the whole log here? It will help me to see where the error comes from.

PS: make sure you have executed npm install in the project dir after updating the plugin.

[luchillo17]

Let me try from scratch, i'll create a new project with ng template, then add this package and see how it goes, however it'll have to be tonight since i'm at work.

[luchillo17]

Ok so i just created a new project using the --ng template, then when i tried to install the next version, here's the output:

[ivanbuhov]

@luchillo17 This seems to be a separate issue. It looks to be the same as this one so you can try the provided solution or continue the discussion if it doesn't work for you.