How to make Angular run faster in development mode?
Hello, to all readers! Today, as you can understand, we will talk with you about how to speed up the development process of a project in Angular. It is useful to learn this for both beginners who spend a lot of time on development, and for experienced programmers, who maybe learn something new, so let’s get started!
What is Angular?
Angular was created back in 2010 by one of Google’s programmers Misko Hevery. He was given the task of creating a product that would solve corporate problems, but later the authorities realized that what he was working on should be seen by the whole world. So Henry’s team was joined by a few more developers, and one of the best frameworks for building single-page client applications using HTML and TypeScript was born.
A lot of time has passed since 2010 and Angular has also changed with it. At the moment, there are many versions of this framework, each in its own way special and better than the previous one. Angular’s success is that it gives developers such opportunities that they couldn’t even imagine. Angular developers always think ahead, think about how to surprise users of the framework. To do this, they closely monitor all trends and changes in the world of web development and come up with something that no one has ever done. But most importantly, despite being full of Angular features, it is very simple and easy to use. You can easily master a newer version if you have worked with one before, and you will not need months of study.
So indeed, Angular is a wonderful framework with a rich history and customer trust that goes further and conquers more and more developers from around the world.
How to make Angular run faster in development mode?
In newer versions such as Angular 9 and 10, developers have done a lot to optimize the product creation process. They worked with the compiler, templates, text editors and much more. Of course, this cannot help but rejoice, but over time all still want faster work. So how can this be done? I will write below.
One of the first optimization decisions that a developer can make is to create a production assembly. This is done before working with the product itself. The production assembly provides many new features that are privately available in the development assembly, including primary compilation, modification, and tree shaking.
JIT and AOT. These are the two types of compilation that Angular offers to work with. JIT (just-in-time) compiles the product directly at runtime, AOT (early) compilation occurs directly during the construction. By default, Angular is configured to compile a JIT that requires a running Angular compiler.
As I wrote, AOT provides compilation during the build process, so it only creates compiled templates and removes the Angular compiler from deployment, which reduces the load on the project by about 1 MB (which is the plus or minus size of the Angular compiler).
To enable the AOT compiler to write the commands:
ng build – aot;
ng serve – aot.
Another good option to speed up the work of Angular is to create an optimizer. In general, the Angular team has long had Build Optimizer in its database, which further optimizes Angular Webpack collections. Its main purpose is to remove unnecessary code elements without side effects. Alternatively, the optimizer may remove some decorators, such as @Component, from AOT collections.
You can optimize the work of Angular by putting into operation the production mode. As you know, Angular by production settings is started in debug mode, which gives additional checks of the program, and in addition launches ChangeDetection twice each time to make sure that the binding of values was without problems.
Of course, do not forget about the lazy boot modules in Angular. If we talk about it in more detail, the lazy download module works only when the user needs a specific module. In Angular, this feature is built into the router, so lazy loading is easy to implement.
And in order to optimize the work of lazy loading, you need only one – more modules. The developer can then download the modules as needed. Having created a huge code with many characters in one module, unfortunately, it will not be able to do anything and the created project will be developed much longer and slower.
Another way to save time in Angular is to break the code. The larger the developed project, the more time it takes to download it, especially on mobile devices.
Splitting the code significantly makes the program sets smaller and stays with the features that were in the beginning. That is, the programmer breaks the code into smaller parts and gradually loads it with different user actions to different routers or when working with components.
Therefore, there are two options for splitting the code: the first – splitting the code into components, you can configure with the lazy loading of the required components without unnecessary navigation, the second – splitting the code through the route and lazy loading of individual routes.
Additionally, you can enable the OnPush function. Of course, Angular has a built-in automatic check of all components for changes. This certainly happens quickly, but the larger the program you create, the longer this test becomes.
Checking changes through OnPush only responds to changes in @input parameters or when the programmer manually starts the change detection function.
To prevent this from happening, never tie functions in Angular templates if you can work without them. Try to play with clean channels so that Angular efficiently skips channel execution at the same value.
It happens that the changes added by the developer are not updated and when Angular checks for changes in the code they are also not visible. To avoid this, the programmers resorted to an alternative to AngularJS with these asynchronous functions, but they still had to programmatically upgrade the view.
Many people have known about Zone.js for a long time, Angular 2 even offered it as a variant of correcting asynchronous browser functions through automatic detection of changes. Zone.js solves the problem of automatic representation of asynchronous functions. This was expected by many programmers because it meant that each asynchronous execution caused changes to be detected.
So, summarizing all written above, I hope you understand how to optimize the work of Angular. You can use the tips that you like the most, but I would recommend you hire angular developer.