CODEWITHSUNDEEP
angular
suman goud
suman goud

Reputation: 157

How to implement tree shaking in angular 7 application

I want to improve my angular application performance by applying tree shaking concept , can you suggest any references how to implement.

For now am trying to implement tree shaking by using below reference link 

https://blog.rangle.io/optimize-your-angular2-application-with-tree-shaking/

above reference includes some modifications in webpack.config.js but am not seeing that file in application 

npm install --save-dev webpack

installed webpack using above but still am not able to find webpack.config.js file

Upvotes: 4

Views: 7798

Answers (3)

Nadhir Falta
Nadhir Falta

Reputation: 5257

You don't need to do anything since you are using angular 7, that is done by default in that version along with default aot. all you need to do is just run your build in prod

ng build --prod

There some other things you can do to enhance your app performance such as:

1- Use lazy loaded routes.
2- use gzip compressing (done at the server level)
3- Caching
4- Service worker
5- Use Server Side Rendering
6- Minimize Change Detections by using OnPush change detection
7- Use trackBy in your ngFor

Upvotes: 11

Jun
Jun

Reputation: 3044

You can use ng build --prod to enable tree-shaking.

However, the way you inject Angular services may affect tree-shaking. Read more about Angular service and tree shaking.

Read more about Angular CLI build options Angular CLI documentation.

enter image description here

Upvotes: 1

Amir Arbabian
Amir Arbabian

Reputation: 3699

There is substitution for tree shaking when you use angular-cli, you just need to set 

"buildOptimizer": true

for project and it will drop unused parts. Also option

"optimization": true

performs minification that dramatically decreases bundle size. Hope that helps.

Upvotes: 2

Related Questions