How to reduce initialization page loading time in webpack angular 2 ?

Question

In my angular 2 application . i wanted to reduce the time of page loading . When i load the page for the first-time it takes 13 sec to load . Please help me with suggestions.

Do you use the -prod or -aot flags when running/building the application? — Eduardo Vargas
– Eduardo Vargas, Commented Jun 19, 2017 at 9:34

user8112829 · Accepted Answer · 2017-06-19 09:45:28Z

1

Also apply AOT on top of the Webpack it will make drastic change in performance.

Follow below instructions it may be help to you.

Build the application in production mode
Bundle the Js and CSS file
Load images with SubDomain
Implement lazy loading where possible

answered Jun 19, 2017 at 9:45

user8112829

Sign up to request clarification or add additional context in comments.

1 Comment

Santosh Over a year ago

lazy loading need to be implemented

KrystianC · Accepted Answer · 2017-06-19 09:38:49Z

0

Upgrade to Angular 4. It is much faster

answered Jun 19, 2017 at 9:38

KrystianC

4423 silver badges13 bronze badges

2 Comments

Santosh Over a year ago

how to convert web-pack to angular 4?

KrystianC Over a year ago

angular 4 is based on webpack. So just do normal upgrade to latest version npm update --save --save-dev. Yuo can install npm-check and it will upgrade all dependencies in more user friendly way if you wish Just remember that you need to have versions specified in package.json files check if you have ^ or * in front of the versions. Or simply overwrite it manually like "@angular/core": "^4.2.2"

Eduardo Vargas · Accepted Answer · 2017-06-19 09:41:52Z

0

What is recommended is that when developing you don`t need to use the prod and aot flags because the compile time is way longer but when building the application for production try using

ng build -aot -prod

it should make it a lot faster. Be aware that some errors may occur in this mode so make to sure to test your workflows before deploying.

answered Jun 19, 2017 at 9:41

Eduardo Vargas

9,5022 gold badges22 silver badges30 bronze badges

4 Comments

Santosh Over a year ago

ng doesn't recognized as a command as i am using web pack .(Not using CLI)

Joe Clay Over a year ago

Should be --prod, not -prod. Also, you don't need --aot if you're passing --prod - the latter will turn on AOT as well.

Santosh Over a year ago

No i am doing it in development mode

Eduardo Vargas Over a year ago

Try following this guide then angular.io/guide/deployment#webpack-and-aot

Collectives™ on Stack Overflow

How to reduce initialization page loading time in webpack angular 2 ?

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related