Ionic CLI 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.


#12

Wow, I finished building my new computer this weekend and the difference is stunning. On my laptop, I have an i7-3630QM processor, a sata 3 SSD drive and 16G@1600Mhz ram.

My build time for 100 pages is 40s on average.

On my new monster, I have an i7-8700K processor, Samsung 970 Evo PCIe M2 SSD drive and 32G@3600Mhz.

My build time for the exact same code is 3.9s.

Yes, I’m doing the Snoopy dance. So the machine has a huge influence on build time. I can’t say which of the three makes the most difference though. CPU, RAM or HDD.


#13

Wow that’s a crazy improvements :+1: I wasn’t going to buy a new laptop but seems that I should consider buying one with 32 Gb of Ram at least and an i7 :yum:


#14

Does anyone know which part makes the most difference? CPU, Ram or HDD speed?


#15

Another huge difference is to upgrade to Node 11.x. I think that’s what was mostly responsible for my build time. I had a bug that kept me busy most of the day and it turned out that my package-lock.json was using an old version of grpc which was incompatible with Node 11. The simple and essential trick is to delete you package-lock.json when you upgrade to a new version of node.

@reedrichards Let me know how it affects your build time when you upgrade to node 11 if possible, I’m curious.


#16

@loki9182 I wasn’t able yet to upgrade to Node v11 because of some dependencies conflicts, will have a look when I’ll finally be able to upgrade and ping you


#17

@loki9182 I was finally able to upgrade to Nove v11. I’ve to say there isn’t that much difference on build time or build on changes. It does feel a bit faster, but really just a bit. I guess the 8gb ram of my Macbook Pro 2016 are slowly not enough anymore


#18

I’m having a very bad time compiling ionic4 too… The strange thing is that ionic 3 in the same machine updates after less than a second… :thinking::thinking:


#19

Same here, after migrating to V4 my compile time exploded… Which is really a let down since they got away from sass to css4 variables also for that.


#20

This is ridiculously slow build times. Build on changes should be incremental and near instantaneous with the trivial size of web apps. We’re not building million line C++ programs with make.

Throwing monster hardware at the problem is just plain offensive to me.

No disrespect to you @loki9182, it just makes me all the more frustrated that the out-of-the-box experience with Ionic4 is so bad you have to buy expensive hardware - for a web app?!