0

I am having a very slow compiling and outputting result on changes.

My current ng serve runs an update after a simple text change in a file in around 20 seconds. (Actually compilation time is short, within 3 - 5 seconds), the other 15 seconds is the process of browser reloading. I realized in network tab, the process that takes the longest time is websocket, whereas it consumes 13 seconds.

For this case, what might be the root cause? Is it because i am using external libraries like rxjs and lodash? Is it because i imported bootstrap css in every scss files? Or is it because of my component structures? (I have multiple modules)

I would like to know, how do i cut it to 3 - 5 seconds, as it will greatly affect my productivity.

Thank you

Here is the bundle size : enter image description here

Here is my admin module route :

enter image description here

Brian Ruchiadi
  • 331
  • 1
  • 13
  • 29
  • Can you provide more information, like your build output (bundle sizes)? External libs are installed via npm, they likely aren't the issue. Importing bootstrap in every css file may cause issues.. https://stackoverflow.com/a/47054257/10747134 should be the only place you need to import bootstrap css –  Feb 05 '19 at 18:25
  • Its quite difficult to predict until we see your `angular.json` settings, modules you have imported, package.json. – Sandy Feb 05 '19 at 18:53
  • @OneLunchMan: Here i attached my bundle output. I will try to move bootstrap to one place. See if it will solve the issue – Brian Ruchiadi Feb 05 '19 at 18:56
  • i didn't modify any of angular.json and package.json. It is the same as latest angular 7.2 @Sandy – Brian Ruchiadi Feb 05 '19 at 18:57
  • Are you lazy loading? I feel like > 2MB of feature module code (admin module) is on the bulky side. What do your routes look like? –  Feb 05 '19 at 18:58
  • I have attached my admin route, there will be around 40 - 50 routes inside. And no, i do not use any lazy loading. @OneLunchMan – Brian Ruchiadi Feb 05 '19 at 19:02
  • Well, that's a huge performance hit not to. That forces you to load all the source code up front, even if a user can't use that feature. –  Feb 05 '19 at 19:03
  • hm, right. I will be applying that. And it should reduce a lot of compilation time. And about the bootstrap, the reason i am including the bootstrap for every scss is that i need to use @ extend. And compilation fails when i do not include bootstrap @OneLunchMan – Brian Ruchiadi Feb 05 '19 at 19:06
  • I believe you can extend specific part of it correct? https://github.com/angular/angular-cli/issues/1261#issuecomment-279079797 suggests so. I don't know how off the top of my head, but Googling seems to bring up enough to get a good start on it. Also if your admin module has 40-50 routes, I think it should be possible to split it up into smaller admin modules (with shared feature modules as needed) to help loading that first admin page as well. Secondly, that is a huge vendor file. What are your extra libs imported..? –  Feb 05 '19 at 19:09
  • i am using lodash and rxjs for extra libs @OneLunchMan i see. would it make any difference, if i have many different modules, but the size of each modules are small compared to having little different modules, but size of each modules are big in term of performance? – Brian Ruchiadi Feb 05 '19 at 19:14
  • So, there's a balance there. The smaller your modules are, the less the app has to "rebuild" modules when it recompiles. Ex: if you are changing a file in a 2mb module, it'll take significantly longer to rebuild than a 100kb module. Check out the angular material2 repository, they do a ton of small "features" that include what they need to run and can me used basically anywhere. The more you can generify code, the less time rebuilds will take. –  Feb 05 '19 at 19:20
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187952/discussion-between-brian-ruchiadi-and-onelunch-man). – Brian Ruchiadi Feb 05 '19 at 19:24

2 Answers2

1

There are a few parts to this answer that we derived from comments and chat, adding a summary answer here.

A quick thanks for the link from @ISanchez, it's a good place for people to start and get familiar with performance in Angular.

First we'll address the live reload (build update) slowness. Try to make smaller modules. This will allow the rebuild to work with less code at once. Once you change a module, it needs rebuilt which can take longer the larger the module is. While it is not a fact or standard, I set up budgets whenever I can on a project to try and keep my modules under 200kb (with the exception of vendor and initial). With that, I typically have extremely acceptable rebuild times :)

The long load time seems to be partly related to all of bootstrap being imported in multiple places. Slimming this down to the proper imports/mixins should alleviate some of this. Another refactor that will help is splitting out modules to be lazy loaded. The Admin module is fairly large, and even could be split into multiple admin modules (with shared admin features imported into each). The "shared features" suggestion is modeled well in the Angular material2 repository which has each module import basically what it needs to operate. If you're still having issues with lazy loaded modules being too large, you can specify non child route modules to be lazy loaded as well (like a large "shared feature" module).

0

The best article I read to improve my Angular apps performance for dev and prod development.

Angular Performance Tips Article

Personal tips:

RxJS v6 and Webpack v4

Ivan Sanchez
  • 546
  • 5
  • 17
  • "i didn't modify any of angular.json and package.json. It is the same as latest angular 7.2" rxjs 6+ and webpack 4+ are in by default. –  Feb 05 '19 at 19:21
  • That was some of my tips, you should take a look there and find a proper solution for both of you guys. With this information I could not tell you what is wrong with it. Sorry. – Ivan Sanchez Feb 05 '19 at 19:26