How to optimize Angular build size
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Optimizing Angular build size is crucial for improving load times and performance, especially for users on slower connections. As the creator of CoreUI with over 11 years of Angular development experience since 2014, I’ve optimized builds for countless enterprise applications. The most effective solution is to use production builds with lazy loading, tree-shaking, and proper bundle optimization. This approach can reduce build size by 50-80% compared to development builds.
Use production build mode with optimization flags to minimize bundle size.
# Production build with all optimizations
ng build --configuration production
# Analyze bundle size
ng build --configuration production --stats-json
npx webpack-bundle-analyzer dist/stats.json
// Enable lazy loading in routing
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
},
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
]
// angular.json - optimization configuration
{
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"buildOptimizer": true
}
}
}
Production builds enable ahead-of-time compilation, minification, and dead code elimination. Lazy loading splits your application into smaller chunks loaded on demand. The buildOptimizer flag removes Angular decorators and unnecessary code. Source maps are disabled in production to reduce file size. Bundle analysis identifies large dependencies that can be replaced or removed.
Best Practice Note
This is the same optimization strategy we use for CoreUI Angular production builds. Always import only what you need from libraries like RxJS and Lodash to enable tree-shaking. Consider using the Angular CDK instead of full Material UI if you only need a few components, reducing bundle size significantly.
