Decrease the construction duration within a sprawling Angular 8 project

It takes nearly 10-15 minutes to compile the project in production mode, resulting in a dist folder size of 32MB

Here are the production options I am currently using:-

"production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        }

I am executing the following command to compile the project:-

node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod --source-map=false --named-chunks=false --statsJson=false

PS: I have already experimented with Ivy, but it does not support legacy code, resulting in build failures.

Any assistance would be greatly appreciated. Thank you.

Answer №1

Here are some essential steps to optimize your app performance:

  • Minimize the number of imported libraries in your app
  • Ensure that crucial libraries are in FESM/ESM format, not UMD/CommonJS
  • Reduce the usage of Sass/Less in your app
  • Check for duplicate styles in your imports/generation (1)
  • Divide your app into smaller modules and analyze the largest/slowest modules
  • Separate parts of your app into libraries and adjust path mappings to the dist/ version of your libs
  • Optimize the size and quantity of assets utilized by your app
  • Upgrade to the latest recommended versions of Angular or the CLI (e.g., 8.3.x or 11.2.x)
  • Reduce circular module and library dependencies within your app

If after implementing these steps your production builds still exceed 10 minutes, consider utilizing Nx incremental builds.

If your builds remain slow even after setting up incremental builds and your app involves multiple teams, explore the benefits of Module Federation.

Answer №2

For a solution on speeding up the Angular build process, you can refer to the insightful advice given in the previous question.

ng build --aot

Implementing this change could greatly benefit your project's build time. Good luck!

Answer №4

If you want a quicker build time, consider turning off "optimization", "aot", and "buildOptimizer". However, keep in mind that this could result in a larger dist folder size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verifying in PHP if the request is intended for a JavaScript worker

After doing my research on MDN for the referrer-policy, as well as searching through Google, DuckDuckGo and Stack Overflow, I still find myself stuck on a seemingly simple yet elusive issue. Journey of Data the browser sends a request to the server the ...

How can you incorporate a value into a variable in PHP?

Hey there! I'm pretty new to PHP and I've been working on building a program that resembles a spreadsheet. My form consists of columns and cells, allowing users to add or delete rows using Javascript. The challenge I'm facing is automating t ...

Implementing a 'Load More' button for a list in Vue.js

I am currently working on adding a load more button to my code. While I could achieve this using JavaScript, I am facing difficulties implementing it in Vue.js. Here is the Vue code I have been working with. I attempted to target the element with the compa ...

The removal of an object becomes unsuccessful when objects with lower indices have been deleted beforehand

Attempting to construct a multi-layer object representing a program; check out my progress here http://codepen.io/Irish1/pen/lbjdw Imagine adding 3 weeks, each with 3 days, and each day having 3 sessions. Removing these objects is feasible as long as caut ...

Passing dynamic scope from Angular to a directive is a seamless process

I am working with a directive that retrieves an attribute value from an http call in the following manner: Controller app.controller("HomeController", function($scope){ $http.get("/api/source").then(function(res){ $scope.info = res.data }); }); ...

What is the process for updating the dropdown list value based on the radio button that has been selected?

Is there a way to retrieve the value of a radio button and utilize it in the where clause? <input type="radio" name="radiobtn" value = "Yes" onclick="GetLockIn();" >Yes <input type="radio" name="radiobtn" value = "No" onclick="Ge ...

Retrieving text that has been HTML-escaped from a textarea using jQuery

Within my HTML file, I have a <textarea id="mytextarea"></textarea>. Suppose a user inputs the following text: <hello>, world! How can I retrieve res = "&lt;hello&gt;, world!"; based on the user's input? The current code s ...

Having trouble sending the code through post message

I was trying to send some code to a node application using Postman with a POST message. In the body, I included the following code: module.exports = function() { var express = require('express'), app = express(); app.set('po ...

Steps to combine NativeScript and Angular CLI

Exploring the potential of integrating NativeScript with Angular CLI to develop applications for both web and native mobile platforms. I attempted to use Nathan Walker's NativeScript Magic, but encountered difficulties creating a fresh application wit ...

Is it possible for javascript to show the user's current location on a google map without using a KML layer?

I need help with loading a KML file using JavaScript and adding a marker to the map at the user's current location. The code I have been working on works fine, but it seems to be missing the geolocation check for the current position. How can I proper ...

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

At the instructions available in the read.me of https://github.com/react-community/create-react-native-app Upon selecting my template using the expo init command, I encountered the following error: Cannot find module 'minizlib' Error: Cannot fi ...

The type 'void | Observable<User>' does not include the property 'subscribe'. Error code: ts(2339)

authenticate() { this.auth.authenticate(this.username, this.password).subscribe((_: any) => { this.router.navigateByUrl('dashboard', {replaceUrl: true}); }); } I'm puzzled by this error message, I've tried a few solu ...

What could be causing my date variable to reset unexpectedly within my map function?

Currently, I'm utilizing a tutorial to create a custom JavaScript calendar and integrating it into a React project You can find the functional JavaScript version in this jsfiddle import { useState, useRef, useMemo } from 'react' import type ...

How can you disable an 'option' HTML5 element using the AngularJS methodology?

How can I disable an 'option' element in HTML5 using AngularJS? Currently, I am working with AngularJS v1.2.25. Here is the Plunk Link for reference: https://plnkr.co/edit/fS1uKZ <!-- CODE BEGIN --> <!DOCTYPE html> <html> ...

Material-UI Autocomplete can only save and display one specific property of an object at a time

Can someone help me with implementing Autocomplete from Material-UI? I want to store only a specific property value and not the entire object. For example, let's say I want to store the property Value, but it could be any other property as well. con ...

A guide on dynamically checking the checkbox values in each row of a table using JavaScript or jQuery

My table is dynamically populated with values from a database using the following code: var row = table.insertRow(i); i = i+1; // Insert new cells (<td> elements) at the 1st and 2nd position of the new <tr> element: var cell1 = row.insertCell ...

Issues arise with controlling access due to cache-control and canvas properties

I am attempting to utilize the browser canvas feature to manipulate images that are hosted on cloudfront. My goal is to configure cloudfront in a way that allows the browser to cache images with cache control set to max-age, while still enabling canvas edi ...

Calculating the sum of all elements in an array

Hi, I am currently attempting to retrieve the total value from an array (such as Arr[1] + Arr[2], and so forth). Unfortunately, I am struggling to find a solution. Below is my existing function: this.hourlyTotals = function() { var custsperhour = Math ...

Functionality Issue: Submit Button Not Working on Designed Form Select

Through dedication and hard work, I managed to create a customized form with images that display correctly in Firefox, Chrome, and Internet Explorer's compatibility mode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

Retrieving values with Jquery on a function's onClick event

Here is a small script that retrieves values from a select element <script> jQuery(document).ready(function() { var selectedValue = jQuery("#tr_val").val(); }); </script> When you click on this div and execute the open_win function, I need t ...