Bundle size analysis in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is bundle size in Angular applications?

Bundle size is the total size of all the files (JavaScript, CSS, assets) that the browser downloads to run your Angular app. Smaller bundles load faster and improve user experience.

beginner

How can you analyze the bundle size of an Angular app?

You can analyze bundle size using Angular CLI's built-in command ng build --stats-json and then visualize it with tools like Webpack Bundle Analyzer or Source Map Explorer.

intermediate

What is the purpose of lazy loading in reducing bundle size?

Lazy loading splits your app into smaller chunks and loads them only when needed. This reduces the initial bundle size and speeds up the app start time.

intermediate

Name two Angular CLI build options that help reduce bundle size.

1. --prod or --configuration production enables optimizations like minification and tree shaking.<br>2. --aot (Ahead-of-Time compilation) compiles templates during build to reduce runtime size.

intermediate

What is tree shaking and how does it affect bundle size?

Tree shaking is a process that removes unused code from your final bundle. It helps make the bundle smaller by including only the code your app actually uses.

Which Angular CLI command generates a stats file for bundle analysis?

A ng lint --stats

B ng serve --stats

C ng build --stats-json

D ng test --bundle

The command ng build --stats-json creates a JSON file with bundle info for analysis.

What does lazy loading do in Angular?

A Loads modules only when needed

B Loads all modules at app start

C Removes unused code automatically

D Compresses CSS files

Lazy loading delays loading modules until the user navigates to them, reducing initial bundle size.

Which build option enables Ahead-of-Time compilation?

A --jit

B --watch

C --prod

D --aot

The --aot option compiles templates during build time, reducing runtime size.

What is tree shaking in Angular build process?

A Adding extra code for features

B Removing unused code

C Compressing images

D Loading modules lazily

Tree shaking removes code that is not used in the app to reduce bundle size.

Which tool can visualize Angular bundle size from stats file?

A Webpack Bundle Analyzer

B Angular CLI Serve

C Node Package Manager

D TypeScript Compiler

Webpack Bundle Analyzer helps visualize the contents and size of bundles using the stats JSON.

Explain how you would analyze and reduce the bundle size of an Angular application.

Think about build commands, tools, and Angular features that help optimize size.

Describe the benefits of lazy loading and tree shaking in Angular bundle size optimization.

Focus on how these techniques affect loading and code inclusion.