How to implement tree shaking in angular 7 application

Question

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

Answer 1

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

Answer 2

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.