Menu
We are developing an application using Angular 5. After running the ng build --prod --aot and deployed the dist folder to the dev server the main bundle produced 2.2MB on initial load. It's already small compared to 8MB vendor bundle size (when running ng build --prod) but still, we need to lower the size of the main bundle. Is there any way to lower the size of the main bundle?
731
Bundle reduction tip #1: Use tree shaking Depending on the size of the library you're utilizing, you can drastically cut down on your bundle size. As a bonus, you don't need to do anything to do tree shaking in your Angular application – it's been a part of Angular Ivy since Angular 8.
js under 500 KB, on average 250KB. If your bundle size largely exceed those numbers, you may need to be aware. If your bundle size is under this number, you may still want to optimize it further.
Angular is a very opinionated and robust framework. As a result, Angular apps generally have bigger bundle sizes when compared to apps written using other JavaScript frameworks like React. The Angular framework comes with a lot of useful libraries already included within it, such as RxJs and Zone.
Firstly, vendor bundles are huge simply because Angular 2 relies on a lot of libraries. Minimum size for Angular 2 app is around 500KB (250KB in some cases, see bottom post). Tree shaking is properly used by angular-cli .
You can reduce the bundle size by adding build-optimizer flag to your build:
ng build --prod --build-optimizer
Try running the above command. For more info visit: https://angular.io/guide/deployment
AFAIK you need not have to include --aot flag when building using --prod. Production build is aot by default.
Updating to the latest version of angular is also a solution for this. Since latest version often comes with more optimized build procedures.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
