How do I speed up Angular 6 builds?

I have a fairly large Angular 6 project with around 100 top-level (full-page) components, and a bunch of smaller control components (for buttons, forms, etc). With ahead-of-time compilation, page reloads are very quick (< 2 seconds). However, the initial ng serve --aot takes 30+ seconds, and each subsequent recompilation cause by file change takes ~15 seconds, even for the most minor change.

ng serve --aot

Is there a way to make compilations, or at least the recompilations faster? It seems angular is recompiling the entire project when only a minor part changes.

Would modularizing the project so that the components are lazy-loaded make a difference in build time, or is that purely for page-load time (once it's compiled)?

2 Answers
2

for development， just use ng serve is recommend. if you add --aot parameter, it need more time to translate the html templates and styles to javasctipt at build time, but this translation can be done on the fly at browser side with jit compile, so just remove the --aot parameter will save lots of build time.

ng serve

--aot

--aot

if your project is very large, it is recommend to split it into several NgModules , and load them on demand with lazy load. when you change any thing in your project, angular cli will just compile the NgModule which contains the changes, so split project will save build time too.

NgModules

NgModule

at now angular will do a full page reload when you change your code, if you want a partial reload, you can try hmr, but hmr maybe have capability issues with the libraries you use in your project.

It generally depends on which builds you're talking about here. There are builds that you deploy to production. For those, I guess it's pretty much a standard to use --prod flag with ng build that does all the optimizations like Tree Shaking for dead-code elimination. That's how your bundle size is highly optimized and smaller as compared to normal bundle. Now you can't really do much about it as it needs to take all that time to perform the optimizations on your bundle.

--prod

ng build

If you're concerned about serving your App after small changes while developing, consider implementing Hot Module Replacement. It can save you a lot of time building your App.

Also, since it's only applicable to the development environment and not production, I don't really think you have anything to lose.

Also, it's not non-official. It's quite a standard these days. Even StackBlitz uses it. Don't believe me? See for yourself:

I think you should give it a try. You'll thank me later.

Here's an easy to understand article on how to implement it an Angular App that can help you implement HMR in a matter of minutes.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.