Search code examples
angularangular-cliangular7angular-cli-v7

What are the possible causes for my application having slow built on ng serve?

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

Solution

  • 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).