Ionic 4.4.0 slow build on changes


#1

I have read the other posts where they have fixed their problem by upgrading to node 10 but that does not seem to help my problem.

I started a new project with Ionic 4.0/Angular 6 and later on upgraded to the latest and greatest Ionic 4.4.0/Angular 7. Now every simple change I make takes 20 seconds to refresh in my browser.

If I start a new project with:

ionic start BuildSpeedTest --type angular

Every change in this new project takes 7 seconds.

I started a new Angular project with

ng new ng-speedtest

and every change takes 1 second to refresh.

Is there anything I can do to speed up my Ionic 4 project?

ionic info:
Ionic:

 ionic (Ionic CLI)             : 4.4.0 (C:\Users\Luc\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (2 plugins total)

System:

   Android SDK Tools : 26.1.1 (D:\dev\android-sdk)
   NodeJS            : v10.12.0 (D:\dev\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

EDIT: I used my fresh new project and started importing my code one piece at a time to see at what point the build time would increase. I have 55 pages in my app (currently all empty, boilerplate pages) and my build time stayed at 7s until I added the paths in app-routing.module.ts (I guess the pages’ weights only kick in the first time you refer to their module), then my build time spiked up to 20s.

So is this just a question of machine power? (CPU, HDD access speed & RAM) or is there something else I can do to speed things up?


#2

I think that’s an Angular v7 issue

Start there -> https://github.com/ionic-team/ionic/issues/16423


#3

Hmmm… I’ll try rolling back to Angular 6 tomorrow. Don’t need more than Angular 6 during dev phase. Thanks for the suggestion, I’ll get back to you.


#4

No good. I cloned a version of my project that still used Angular 6.1.1 and then imported all 55 pages and routing. Back to 20s rebuild time on each change so it’s not an Angular 7 issue.


#5

So it’s really Angular v7? Unfortunately seems the issue has been close there, don’t know if there is another one? https://github.com/angular/angular-cli/issues/12646


#6

It is NOT an Angular7 issue as I am getting the same compile times with Angular 6. It’s really due to the number of pages that you have in your application. Currently doing some tests to get a better picture.


#7

Oki doki, good to know, thx for the feedback. Keep me posted it’s interesting


#8

Here is the result of my tests. These are the compile times (in ms) as I add pages to a blank project. The pages are empty boilerplates of course. (ionic g page page2)

Pages Compile(ms)
1 7000
2 7300
5 8000
10 8400
15 9300
20 10200
30 12400
40 15000
50 18000
70 23200
100 40500

What’s strange is that the increase in time is not linear or even a predictable curve but what matters is that we see a direct correlation between the number of pages and the compile time. Nothing to do with angular versions.

*** The interesting trick here is that if I go in my app-routing.module.ts and I comment out 99 of the 100 pages, I go back down to a 7s compile time. :slight_smile: This means that if you’ve got a large app with 50-100 pages but you’re going to be spending the next few hours working on a single page and not navigating to most of the other pages, you can comment them out and greatly reduce you rebuilt time and get quicker refresh in the browser. So until someone comes up with a better trick (a change in config file or something like that) I think this is the method I’ll use during dev time.


#9

Cool thx for the feedback :slight_smile:

Funny tricks

To be honest I’m still not 100% convinced on the increase of time when switching to Angular v7. Might be not Angular but the CLI behind or whatever but I kind of feel that my build time is slower. But in the meantime I also upgraded my machine to Mojave, that could be a reason too


#10

I’m currently in the process of building a monstrous PC: https://ca.pcpartpicker.com/list/DKBG6s
Good CPU, 32G ram, very fast HDD. Very curious to see how my test will run on this machine. I’d be very curious to hear from anyone who knows what affects our type of compiling the most. CPU? Ram? HDD access speed?


#11

As a side note, build times with Ionic 4 and Angular are going to be squarely Angular-questions, because we no longer have custom build steps. It’s all Angular tooling and Angular build processes.

I know that doesn’t help but maybe helps you find someone who can help better than we can.