Bundle size analysis in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does Angular's bundle size primarily affect?

In Angular applications, why is it important to keep the bundle size small?

A Because larger bundles increase the number of components in the app automatically.

B Because smaller bundles load faster, improving user experience especially on slow networks.

C Because bundle size controls the number of Angular modules you can create.

D Because smaller bundles reduce the number of HTTP requests the server can handle.

💡 Hint

Think about what happens when a user opens your app on a slow internet connection.

Smaller bundles mean less data to download, so the app loads faster and feels smoother to users.

❓ component_behavior

intermediate

How does lazy loading affect Angular bundle size?

Consider an Angular app with many feature modules. What happens to the initial bundle size when lazy loading is used?

A The initial bundle size becomes zero because lazy loading removes all code from the main bundle.

B The initial bundle size increases because lazy loading duplicates code.

C The initial bundle size stays the same because all modules are bundled together anyway.

D The initial bundle size decreases because feature modules are loaded only when needed.

💡 Hint

Think about when the code for a feature module is downloaded in lazy loading.

Lazy loading splits the app so that feature modules load only when the user navigates to them, reducing the initial bundle size.

📝 Syntax

advanced

Identify the correct Angular CLI command to analyze bundle size

Which Angular CLI command correctly generates a detailed bundle size report?

A ng build --stats-json

B ng serve --stats-report

C ng test --bundle-analyze

D ng lint --bundle-size

💡 Hint

The command should create a JSON file with build stats.

The ng build --stats-json command creates a stats.json file used for bundle analysis.

🔧 Debug

advanced

Why does the Angular bundle include unused code?

You notice your Angular bundle is large and includes code from a library you no longer use. What is the most likely cause?

A The library is imported somewhere but never removed, so tree shaking cannot remove it.

B Angular automatically bundles all installed libraries regardless of usage.

C The Angular CLI disables tree shaking by default.

D The library code is included because it is referenced only in comments.

💡 Hint

Think about how unused imports affect the final bundle.

If a library is imported in code, even if unused, it can be included in the bundle unless tree shaking removes it.

❓ state_output

expert

What is the size of the main bundle after enabling differential loading?

An Angular app is built with differential loading enabled. The ES2015 bundle is 1.2MB and the ES5 bundle is 1.8MB. What is the size of the main bundle served to modern browsers?

A 1.8MB, because ES5 bundle is always loaded first.

B 3.0MB, because both bundles are loaded together.

C 1.2MB, because modern browsers load the ES2015 bundle only.

D 0MB, because differential loading disables main bundles.

💡 Hint

Modern browsers load only the ES2015 bundle, not the ES5 one.

Differential loading serves smaller ES2015 bundles to modern browsers, reducing bundle size and improving performance.