Hey developers! Is your Angular application taking too long to build? If you have around 1000 components, then it may take as long as 2 hours to finish the build time. In this article, I will show you how to reduce Angular application build time. Let’s begin.
Prerequisite
- Angular Project should be up and running (Learn How)
STEP 1: Download Custom Webpack From NPM
First, you need to install an NPM library called custom webpack. But you need to make sure it is compatible with your Angular CLI version. Get the install command from here.
You need to go to the versions tab and get the one that is close to the version of angular CLI of your project. For instance, my Angular CLI version is 11. Hence, I used the command:
npm i @angular-builders/custom-webpack@11.1.1
Execute the command in your project’s terminal.
STEP 2: Make Changes in angular.json File
Next, open ‘angular.json’ file and make the following changes inside it.
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
Simply add the ‘builder’ and ‘options’ snippets inside ‘build’ object. Leave the rest as it is.
STEP 3: Create Config File to Reduce Application Build Time
Next, you need to create a file named “extra-webpack.config.js” and keep it in the same folder as “angular.json”.
Add the following code snippet inside the “extra-webpack.config.js” file:
module.exports = {
optimization: {
concatenateModules: false
}
};
This would already be making a good impact on reducing the build time of your angular application.
STEP 4: Further Reducing Angular Application Build Time
Furthermore, you need to install another NPM library called Terser. Execute the following command to install terser (if you don’t have it already).
npm i terser
Lastly, add the following snippet in your “package.json” file.
"resolutions": {
"uglify-es": "npm:terser"
}
And we are done!
I hope this tutorial helped you learn how to reduce Angular application build time. You may also want to learn Lazy Loading in Angular 9 or how to deploy Angular website to S3 bucket.
Have a great one!
