All 5 Angular CLI & Project Structure questions
More in Angular CLI & Project Structure
What is the Angular CLI and how do you create a new project with it? What is the purpose of the angular.json file in an Angular project? How would you generate a new component, service, or module using Angular CLI commands? What is the typical folder structure of a modern Angular project, and what does each main folder contain?
Advertisement
Angular › Angular CLI & Project Structure

How would you use Angular CLI commands to build your project for production and analyze the resulting bundle size?

Advanced

Answer

Running ng build with the production configuration creates an optimized version of your app with smaller file sizes, and tools like the source-map-explorer package let you visualize exactly which parts of your code are taking up the most space in the final bundle, helping you find opportunities to reduce it.
ng build --configuration production

npx source-map-explorer dist/my-app/*.js
// opens a visual chart showing which packages take up the most space
Real-world example A team discovers a large unused charting library was accidentally being included in their main bundle, using source-map-explorer to visualize the bundle after a production build, and removes it to significantly reduce load time.

Common follow-ups: What specific optimizations does the production build configuration apply automatically?;How would you set a bundle size budget that fails the build if exceeded?

Performance & Lazy Loading;Build Environments & Deployment
All 5 Angular CLI & Project Structure questions