Angular Web Framework Performance Optimization & Build Tools 2

Question 1

Which Angular 17+ feature defers loading a component's template until it is visible in the viewport?

Accepted Answer

@defer with on viewport

Answer

@defer (on viewport) delays rendering a block until the browser reports it visible, reducing initial bundle size and Time-to-Interactive.

Question 2

What Angular CLI tool analyzes bundle sizes and shows which modules contribute most to the output?

Accepted Answer

ng serve --stats-json + webpack-bundle-analyzer

Answer

Running ng build --stats-json and then webpack-bundle-analyzer dist/stats.json visualizes the bundle composition to identify large dependencies.

Question 3

Which technique splits a large Angular app into multiple smaller JavaScript files downloaded in parallel?

Accepted Answer

Code splitting

Answer

Code splitting divides the application into chunks—typically per lazy-loaded route—so only the code needed for the current view is downloaded.

Question 4

What is tree-shaking in the context of Angular builds?

Accepted Answer

Eliminating unused JavaScript code from the final bundle

Answer

Tree-shaking statically analyzes import/export chains and removes code that is never referenced, shrinking the final bundle.

Question 5

Which Angular feature allows a component to be loaded without belonging to any NgModule, simplifying lazy loading?

Accepted Answer

Standalone component

Answer

Standalone components (Angular 14+) declare their own imports and can be lazy-loaded directly via the router without a wrapping NgModule.

Angular Web Framework Practice Test