Tree shaking and dead code removal in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is tree shaking in Angular?

Tree shaking is a process that removes unused code from the final bundle during build time. It helps make the app smaller and faster by only including the code that is actually used.

beginner

How does dead code removal improve Angular app performance?

Dead code removal deletes parts of the code that are never called or used. This reduces the app size, leading to faster loading and better user experience.

intermediate

Which Angular build tool feature helps with tree shaking?

Angular uses the Angular CLI with Webpack under the hood. Webpack performs tree shaking by analyzing ES modules and removing unused exports.

intermediate

Why should you use ES modules for effective tree shaking?

ES modules use static imports and exports, which lets build tools know exactly what code is used. This static structure allows tree shaking to safely remove unused code.

advanced

What is a common mistake that can prevent tree shaking in Angular?

Using dynamic imports or requiring modules in ways that are not statically analyzable can stop tree shaking. Also, side effects in code can prevent removal of unused parts.

What does tree shaking do in Angular builds?

A Increases the app size

B Adds extra debugging information

C Removes unused code from the final bundle

D Changes the app's runtime behavior

Tree shaking removes unused code to reduce bundle size and improve performance.

Which module system helps Angular perform tree shaking effectively?

A CommonJS

B UMD

C AMD

D ES modules

ES modules use static imports/exports, enabling build tools to remove unused code safely.

What tool does Angular CLI use to perform tree shaking?

A Webpack

B Grunt

C Gulp

D Rollup

Angular CLI uses Webpack, which supports tree shaking by analyzing ES modules.

Which of these can prevent tree shaking from removing unused code?

A Side effects in code

B Using Angular components

C Static imports

D Using TypeScript

Side effects in code can stop tree shaking because the build tool must keep code that might affect app behavior.

Dead code removal helps Angular apps by:

A Adding more features

B Removing unused code to reduce bundle size

C Making the app slower

D Changing the app's UI

Dead code removal deletes unused code, making the app smaller and faster.

Explain in your own words what tree shaking is and why it matters in Angular apps.

Think about how removing unused parts helps your app load faster.

Describe how Angular CLI and ES modules work together to enable dead code removal.

Focus on the build process and module system.