Angular 4 is experiencing slow loading times due to the excessively large size of the main.bundle.js

Upon using Angular 5.2.2 version, I noticed that when a new user accesses my live application for the first time, it experiences significant delays in loading. This delay is mainly caused by the large size of main.bundle.js file, resulting in longer loading times than usual.

Despite trying optimizations such as "ng build --prod" and implementing lazy loading on certain components, the issue persists. Additionally, removing redundant components and assets from the application has not yielded any improvements.

If anyone has suggestions or solutions to help improve the loading time of my application, I would greatly appreciate it.

javascriptangulartypescriptnpm

Answer №1

I encountered a similar issue due to my lack of use of lazy loading. Lazy loading is a method that allows the application to divide into different modules that are only loaded when needed. You can find more information about lazy loading in Angular's official documentation here.

In order to improve my load time, I decided to create a module for each parent URL route (e.g. /car -> create a module, /car/:id -> include it in your car module). This approach has reduced my loading time to around 3 seconds from the previous 12 seconds.

Answer №2

Could the sluggishness possibly be attributed to the main.bundle.js file? Have you checked its size?

Utilizing lazy loaded modules may help alleviate the issue, as previously mentioned.

Regardless of Angular, ensure that compression is enabled on your web server (whether it's nginx, Node.js, or another platform).

For Node.js:

https://github.com/expressjs/compression

For Nginx:

Answer №3

One way to reduce your bundle size is by utilizing Ahead of Time Compilation, which can optimize the code further.

ng build --prod --aot

By using this approach, unnecessary compiler code and unused features like ngSwitch or ngIf in templates can be eliminated from the final bundle.

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

What method is most effective for duplicating objects in Angular 2?

Is it just me, or does Angular 1.x have methods on the global angular object like angular.copy and angular.shallowCopy that are missing in Angular 2? It seems like there is no equivalent version in Angular 2 documentation. If Angular 2 doesn't plan on ...

javascriptangularjsangular

Performing a modulo operation within a v-for loop

I'm showcasing divs in a loop and I need to assign classes based on the loop index. My goal is to have index 0 and 1 with the class col-6, then indexes 2,3,4 with the class col-4, followed by index 5 and 6 having the class col-6, and so forth. This w ...

javascriptvue.jsvuejs2v-for

Dynamically uploading an HTML file using AJAX

My webpage has a feature that dynamically creates HTML with drop down elements. Additionally, there is a "create File" button on the page. The goal is for this button to trigger an AJAX POST request and upload the dynamic page created with drag and drops a ...

javascriptjqueryajax

Can the navigation arrows be placed adjacent to the swiper container instead?

Has anyone successfully implemented swiper navigation arrows similar to the ones shown in this image? If so, could you please share how it was achieved? Here is an example for reference: I attempted to create stylized blocks and assign them as the origina ...

javascripthtmlcsssliderswiper.js

Ways to conceal buttons in the upper toolbar post login click with Angular 8

I am diving into Angular for the first time and working on building an application. On the home page, I have a toolbar with two buttons - 'Admin' and 'Student'. Selecting admin should take the user to the admin login screen, while selec ...

angularangular8data-sharing

How to incorporate paginating in MongoDB operations

It's a well-known fact that using skip for pagination can lead to performance issues, especially as the data set grows larger. One workaround is to leverage natural ordering using the _id field: //Page 1 db.users.find().limit(pageSize); //Get the id ...

javascriptmongodbpaginationmongodb-query

"Encountering an error when trying to access undefined property in templates

The content displayed in my component template is not what I expected when using @Output to pass an object from a parent container. While attempting to bind {{selectedMovDetail|json}} in the template, the output shows as { "name": "The Walking Dead","rati ...

javascriptjsonobjectangular

How can you manipulate and refine JSON data with Typescript Angular?

Here is a string I'm working with: configValues="{listValues:[{name:chennai,attrs:[{id:1,name:kumar},{id:2,name:john}]},{name:bengalur,attrs:[{id:1,name:raj},{id:2,name:nick}]}]}" This string contains a list of values based on city. I am tr ...

arraysjsonangulartypescriptfilter

Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS

Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code: HTML Code <div ng-app="myApp" ng-controller="MyCtrl"> <select ng-model="opt" ng-options="font.title for font in font ...

javascriptangularjsangularjs-directive

"Instead of opening the page in a popup window, use window.open to open it in a new tab

I am attempting to open a new popup window using this JavaScript code: window.open(myUrl, ""); However, some users are experiencing the page opening in a new tab instead of a popup window. Does anyone know why this may be happening? ...

javascript

Encountered an issue while trying to update a ServiceWorker for scope - Received a HTTP error

I encountered a puzzling issue with my Vue PWA app, as our error logs are flooded with instances of a particular user experiencing an error that myself and another person cannot reproduce. Failed to update a ServiceWorker for scope ('https://myapp.com ...

javascriptvue.jsservice-worker

A guide on extracting keys and values from a JSON object and saving them in an array with the useState hook in a React application

function Graph() { const [tcases, setCases] = useState([]); const [recovered, setRecovered] = useState([]); const [deaths, setDeaths] = useState([]); useEffect(() => { axios .get("https://disease.sh/v3/covid-19/historical/all?last ...

javascriptjsonaxios

Having Trouble with Imported JavaScript File in Astro

Why isn't the js file working in Astro when I try to import or add a source in the Astro file? For example: <script src="../scripts/local.js"></script> or <script>import '../scripts/local.js'</script> I am ...

javascriptreactjsnode.jstypescriptastrojs

Having difficulty retrieving AJAX POST data

I'm attempting to generate a calendar using php but I'm having trouble figuring out how to update the displayed month using ajax Within my code, I have two buttons inside a 'button' tag with values of "+1" and "-1" respectively, both w ...

javascriptphpjqueryajaxpost

Tips on how to automatically rearrange a jQuery UI sortable list

Currently, I am working with 2 jQuery UI sortable lists which can be found at http://jqueryui.com/demos/sortable/#connect-lists. The process involves dragging items from list A (catalog) to list B (basket). I have a specific requirement where I need the ...

javascriptjqueryjquery-uijquery-ui-sortablejquery-ui-draggable

Selecting a chained dropdown option using jQuery in CodeIgniter

I'm struggling with jquery and ajax, particularly in implementing a select box functionality. I am using CI and below is my code. I want the data in another select box "category" to change dynamically based on the selection in the "brand" select box. ...

javascriptphpjqueryajaxcodeigniter

Generate a customizable form by utilizing a JSON file as a template. The JSON file can be easily modified by clicking a button, allowing for real-time

My goal is to develop a dynamic form using the guide provided at https://angular.io/guide/dynamic-form. I am utilizing two JSON files, namely sbb.json and gx.json. The initial creation of the form from the JSON file works flawlessly. However, I encountered ...

jsonangulardynamicform

Put an end to the endless game of defining TypeScript between Aurelia CLI and Visual Studio 2017 builds

I am encountering TypeScript errors in my Visual Studio build for an Aurelia project within a .NET Core project. The errors include 'Build:Cannot find name 'RequestInit'', 'Build:Cannot find name 'Request'', and &apo ...

typescriptvisual-studio-2017aurelia

Integrate document file uploads into your Stripe payment workflow using React

Upon reviewing the Stripe API documentation for creating a verification document in front, it appears that there is no built-in functionality for creating a file using JavaScript. I am looking to implement a client-side solution using React/Javascript to g ...

javascriptstripe-payments

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...

javascriptjqueryhtmlcsshtml-table