CODEWITHSUNDEEP
javascriptangulartypescriptnpm
Yasir Shabbir Choudhary
Yasir Shabbir Choudhary

Reputation: 2578

main.bundle.js size taking much too load in Angular 4

I'm using Angular 5.2.2 version and when a new user hit my live application first time it take too much time; the reason behind this main.bundle.js size is too much big therefore it take more time than usual.

I applied "ng build --prod" as well as some lazy loading on few component but it didn't work. as well as I also removed redundant components , assets etc in application but it also not work.

Can anyone suggest me what I can do Thanks in advance Yasir

Upvotes: 1

Views: 3306

Answers (3)

Shrey Kejriwal
Shrey Kejriwal

Reputation: 736

You can try Ahead of Time Compilation which will make your bundle size even smaller.

ng build --prod --aot

This will remove compiler code from the bundle and also any unused features like ngSwitch or ngIf is removed if not used in templates.

Upvotes: 0

David
David

Reputation: 34475

First, are sure you that slowness is caused by the main.bundle.js file? What's its size?

Lazy loaded modules should normally help, as pointed out

Independently from angular, make sure that you enable compression on your webserver (nginx or nodejs or whatever you use)

For nodejs

https://github.com/expressjs/compression

For nginx

https://www.nginx.com/resources/admin-guide/compression-and-decompression/

Upvotes: 0

axl-code
axl-code

Reputation: 2274

I had the same problem because I was not using lazy loading. Lazy loading is a technique to separate the application in different modules those which are required only when the application needs them. Lazy loading Angular's official documentation.

In my case I created a module per every parent url route (e. g. /car -> create a module, /car/:id -> include it in your car module). With this strategy my loading time now is about 3s. but previously it was around 12s.

Upvotes: 2

Related Questions