Watching is slow

[Manduro]

Watching has slowed down a lot using the new npm scripts. Below are samples of the time watching takes. 29 seconds is a very long wait for livereloading. The gulp task took about 3 seconds. I'm hoping there's still a lot to improve here!

Are there some config settings we can override to improve speed, until the default situation improves?

Start watch: 46 seconds

[11:18:01]  ionic-app-scripts 0.0.23
[11:18:01]  watch started ...
[11:18:01]  build dev started ...
[11:18:01]  clean started ...
[11:18:01]  clean finished in 76 ms
[11:18:01]  copy started ...
[11:18:01]  typescript compiler started ...
[11:18:02]  lint started ...
[11:18:02]  copy finished in 459 ms
[11:18:19]  typescript compiler ready in 17.15 s
[11:18:19]  bundle dev started ...
[11:18:20]  lint finished in 18.64 s
[11:18:45]  bundle dev finished in 26.51 s
[11:18:45]  sass started ...
[11:18:48]  sass finished in 2.35 s
[11:18:48]  build dev finished in 46.11 s
[11:18:48]  watch ready in 46.33 s

Livereload: 29 seconds

[11:38:25]  typescript compilation started ...
[11:38:29]  typescript compilation finished in 4.58 s
[11:38:30]  bundle dev update started ...
JS changed:   www/build/main.js
JS changed:   www/build/main.js.map
[11:38:54]  bundle dev update finished in 23.23 s
[11:38:54]  sass started ...
[11:38:54]  sass finished in 211 ms

[mhartington]

Please see #44

This should ease up the watches memory usage and speed it up a bit.

[Manduro]

I'm not sure about that as it seems to fix the issue where multiple instances are running concurrently, but my watch is this slow even when I save a single change (thus only creating a single instance).

I'll be sure to report back when #44 is merged!

[mhartington]

Closed via #44

This should be fixed in the next release of app scripts.

[Kobzol]

Even with the above fix and ionic-app-scripts 0.0.27, it takes ~4 seconds for TS to compile in watch and ~8 seconds to bundle my project, in general it takes about ~15 seconds to reload. With the previous browserify + gulp build chain it took only 2 seconds. Is there any way to speed this up?

[Manduro]

@mhartington Speed has definitely not changed with the new version. I'm still at 25-30 seconds for a watch reload and ~50 seconds for the initial build. Gulp did it in about 3 seconds for the same project.

[jaufgang]

@mhartington, I agree with @Manduro and @Kobzol that this issue is not related to #44 and should be re-opened. The slowness does not seem to be related to a bug, but rather the bundling, AoT compilation and tree shaking performed by the introduction of Rollup. These steps slow down livereloading substantially. You are adding 15-30 seconds to the build time to shave less than a second off browser load time, and it doesn't make sense to do that for a build that is going to be loaded only once before being overwritten by the next small change.

I think the ideal solution would be to provide a "fast build" config option that skips these optimizations (AoT Compilation, tree shaking) and is tuned to provide the shortest wait between the start of the build and completion of the browser reload, and ionic serve should use that configuration. Hopefully that will bring us back to the super-fast reloads we were enjoying with previous beta releases.

[MarkChrisLevy]

Hi, unfortunately I must confirm that this is a huge problem. In beta11, with no AoT and rollup live reload was working great, just few seconds and changes were compiled to the script. Now, with the application that contains lots of .ts files and dependencies it takes almost 40-50 seconds to build .js output file (about 10-15sec for typescript compilation and 30-40 sec for bundle).

@mhartington, @manucorporat please reopen.

[MarkChrisLevy]

@mhartington Thanks for reopen. Below some logs from npm run watch:

-- initial build --
[15:31:10] ionic-app-scripts 0.0.27
[15:31:10] watch started ...
[15:31:10] build dev started ...
[15:31:10] clean started ...
[15:31:11] clean finished in 473 ms
[15:31:11] copy started ...
[15:31:11] typescript compiler started ...
[15:31:11] lint started ...
[15:31:12] copy finished in 1.50 s
[15:31:14] lint finished in 2.87 s
[15:31:33] typescript compiler ready in 21.70 s
[15:31:33] bundle dev started ...
[15:31:58] bundle dev finished in 25.76 s
[15:31:58] sass started ...
[15:32:02] sass finished in 3.97 s
[15:32:02] build dev finished in 51.91 s
[15:32:02] watch ready in 52.11 s

-- after one letter change in .ts file --
[15:34:40] typescript compilation started ...
[15:34:55] typescript compilation finished in 14.31 s
[15:34:56] bundle dev update started ...
[15:35:12] bundle dev update finished in 16.06 s
[15:35:12] sass started ...
[15:35:12] sass finished in 28 ms

As you can see it takes about 30 seconds to build new main.js. It seems, that there is an issue with typescript 2.0, cause it shouldn't take 14 seconds to compile one changed file - I've reported that as well microsoft/TypeScript#10018 (comment). The other issue is rollup, which takes 16 seconds.

[maxkunitsa]

I have same issues as described early by other colleagues. For example:

[20:13:47] typescript compilation started ...
[20:13:50] typescript compilation finished in 3.05 s
[20:13:50] bundle dev update started ...
JS changed: www/build/main.js
[20:14:03] bundle dev update finished in 12.72 s
[20:14:03] sass started ...
[20:14:03] sass finished in 53 ms

With beta.11 i had watch timing between 1-2.5 s.

[jaufgang]

I would like to point out that tslint also slows down the build by a few seconds. TSLint is a handy tool and its a great idea to use it when doing a full build, but it is a processing step that I would want to exclude when doing livereload/ionic serve. It's not contributing as much to the slowness as the AoT compilation and tree-shaking, but if a speed-optimized build configuration is being worked on, tslint should be excluded as well.