Issue: initial-es5 bundle size exceeds budget limit. The total size is 6.13 MB, which exceeds the 6.00 MB budget by 133.51 kB

I recently upgraded my Angular application to version 11.

After running > ng build --prod

I received the following output:

√ Browser application bundle generation complete.
√ ES5 bundle generation complete.

Initial Chunk Files                      | Names                |      Size
scripts.3cf268d47c462590e7d9.js          | scripts              |   3.27 MB
main-es5.9973d9ddec6de2b044ba.js         | main                 |   2.49 MB
main-es2015.9973d9ddec6de2b044ba.js      | main                 |   2.36 MB
styles.d540d930321db4c962dc.css          | styles               | 245.64 kB
polyfills-es5.259ae27e17f48bc03647.js    | polyfills-es5        | 131.80 kB
polyfills-es2015.732b81c0b5a3e3dbb1bc.js | polyfills            |  36.16 kB
runtime-es2015.a4dadbc03350107420a4.js   | runtime              |   1.45 kB
runtime-es5.a4dadbc03350107420a4.js      | runtime              |   1.45 kB

                                         | Initial ES5 Total    |   6.13 MB
                                         | Initial ES2015 Total |   5.91 MB

Build at: 2021-02-18T14:49:39.581Z - Hash: 0e159b0e28a5a4f69881 - Time: 144004ms

However, I encountered an error:

Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB.

Although I have previously adjusted the budget size:

 "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]

Increasing the budget again is possible, but not ideal.

Here is my package.json file for reference:

{
  "name": "dashboard-frontend",
  "version": "0.0.0",
  "sideEffects": false,
  // Remaining content of the package.json file

Any suggestions on how to reduce the size of the dist folder?

Thank you

javascriptangulartypescriptbundlenode-modules

Answer №1

As your application expands, at times the only option is to adjust the bulk size constraints in angular.json for compilation.

Prior to doing so, it is advisable to eliminate unnecessary code, dependencies, assets, styles, and other elements in order to minimize the overall size.

Additionally, check out these helpful tips:

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

Is it a common occurrence for AJAX applications utilizing POST requests to encounter issues in Internet Explorer?

After some investigation, I have come across a bug in Internet Explorer that is causing intermittent failures for users running my application. This bug exists within the HTTP stack of IE and impacts all applications utilizing POST requests from this brows ...

javascriptajaxinternet-explorerpost

Conceal the Navigation Bar Upon the Pop Up's Appearance

I Designed a Landing Page with a Fixed Mobile Nav Bar at the Bottom. There is also a Pop-Up Form that appears when clicked. How can I make sure the Nav Bar is closed when the form pops up? This issue is blocking the Send Button. Is it possible to achiev ...

javascripthtmlcss

The addition of the new headers is not facilitated by the interceptor

I am in need of assistance with adding headers to all HTTPClients in my Angular 8 application. Below is the code for my interceptor: import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpH ...

angularhttpclientangular-http-interceptors

Hide preloader in AngularJS once repeater has completed execution

Is there a way to hide a preloader div only after all data has finished loading in an ng-repeat loop? Check out this interactive example on Plunker: http://plnkr.co/edit/ilgOZzIy2axSi5Iy85C7?p=preview Here is the HTML code: <div ng-co ...

javascriptangularjs

"Transforming an array using the map method to generate an object containing arrays optimized for

I'm looking to extract an array of objects from a nested array within JS/React. I attempted the following approach, but it resulted in an error regarding react children - indicating that objects cannot be rendered as children and suggesting the use of ...

javascriptarraysreactjs

Issues with implementing Rails 4 with jQuery, javascript, and coffee scripts causing functionality to malfunction

Although I have nearly two decades of experience in C/C++ for control systems and firmware, as well as proficiency in shell and perl scripting, I am new to rails and web development. Despite including jquery in the application.js manifest, I am unable to ...

javascriptjqueryruby-on-railsrubycoffeescript

Different approach to generating a promise using q

When it comes to creating a promise in Kris Kowal's q library, most developers are familiar with using var defer = Q.defer();, along with calling defer.resolve(); and/or defer.reject() to return defer.promise. However, upon further examination of the ...

javascriptnode.jspromiseq

The nodes.attr() function is invalid within the D3 Force Layout Tick Fn

I'm currently experimenting with the D3 Force Layout, and I've hit a roadblock when it comes to adding elements and restarting the calculation. Every time I try, I keep encountering this error: Uncaught TypeError: network.nodes.attr is not a fun ...

javascriptd3.jsforce-layout

Customize the appearance of the Material UI expansion panel when it is in its expanded

Is there a way to customize the height of an expanded expansion panel summary? Specifically, I am looking to remove the min-height property and set the summary panel's height to 40px instead of the default 64px. I have attempted to make this change in ...

javascriptreactjstypescriptmaterial-uifrontend

Prevent Right-Click Functionality in React.JS

Is there a way to prevent right-click in ReactJS canvas? I've tried the following code, but it's not working as expected: let Canvas = <canvas onContextMenu={(e)=> {e.preventDefault(); return false;}} height={500} width={500} ref="canvas" ...

javascriptreactjscanvashtml5-canvasdom-events

Guidelines for creating a dynamic Bootstrap 4 accordion with Jquery

I need help adding a new Bootstrap 4 accordion when a button is clicked. Can someone assist me with implementing this feature in jQuery? I'm not sure if it's possible to add accordions dynamically using jQuery. <script> $(document).re ...

javascripthtmljquerycssbootstrap-4

Confirming the legitimacy of ISO-8061 dates using the Decoder method

When it comes to simplicity, using the Decoder approach with io-ts has proven to be effective: import { isRight } from 'fp-ts/Either'; import * as D from 'io-ts/Decoder'; const thing = D.struct({ id: D.number, createdAt: D.string, ...

typescriptfp-ts

Typescript check for type with Jest

Assume there is an interface defined as follows: export interface CMSData { id: number; url: string; htmlTag: string; importJSComponent: string; componentData: ComponentAttribute[]; } There is a method that returns an array of this obj ...

javascripttypescriptunit-testingjestjs

Regular expressions are effective tools, but they may not be as functional within an

Trying to validate URLs using a regex has been tricky. The regex I have works perfectly fine on regex101.com, but for some reason it keeps failing validation when implemented in my Angular field. I'm at a loss as to how to tweak it so that Angular wil ...

javascriptangularregexangular-reactive-forms

display in a modal-body and jdata

Within my MySQL database, there are several columns stored, including: headline, description, place, resume Currently, I am able to display the headline and description in a modalbox using the following code. However, I now wish to also showcase the pl ...

javascriptjqueryjsonajaxtwitter-bootstrap

Limit the jQuery dialogue button to just one click

My goal is to create a jQuery dialogue box that sends data when the 'OK' button is clicked. The challenge I'm facing is making sure it only sends the data once, regardless of how many times the button is clicked. $.dialogue({ ...

javascriptjqueryjquery-uijquery-pluginsjquery-ajaxq

Can you explain the significance of "javascript:void(0)"?

<a href="javascript:void(0)" id="loginlink">login</a> The usage of the href attribute with a value of "javascript:void(0)" is quite common, however, its exact meaning still eludes me. ...

javascriptvoid

Endless redirect loop generated by JavaScript Facebook OAuth integration

To ensure users have the necessary permissions for my app, I plan to redirect them to the oauth page if any required permissions are missing. However, when attempting to redirect from the FB.api callback function with the code below, I seem to encounter a ...

javascriptfacebookfacebook-graph-apifacebook-javascript-sdkfacebook-authentication

Are the DataTables rows functioning properly, or have they not been initialized?

After setting up my website with DataTables and retrieving data through its ajax service from a Java servlet backend, everything seemed to be working fine with the DOM. However, despite having all the data in place, I encountered issues with some of the fe ...

javascriptjqueryajaxjsondatatables

Exploring ways to personalize the parsing of url query parameters in express.js

When using req.query, the hash of query parameters is returned. Additionally, if a parameter consists of a JSON object, it is automatically parsed into JSON format, which is quite impressive. However, I am curious about customizing this parsing process. I ...

javascriptnode.jsexpress