Angular Web Framework Performance Optimization & Build Tools 2 — Questions and Answers
Question 1: Which Angular 17+ feature defers loading a component's template until it is visible in the viewport?
- @defer with on viewport (Correct answer)
- lazy routing
- @placeholder
- Intersection service
Correct answer: @defer with on viewport
@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?
- ng lint
- ng serve --stats-json + webpack-bundle-analyzer (Correct answer)
- ng test
- ng e2e
Correct answer: ng serve --stats-json + webpack-bundle-analyzer
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?
- Minification
- Code splitting (Correct answer)
- Tree-shaking
- Gzip compression
Correct answer: Code splitting
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?
- Removing CSS from the bundle
- Eliminating unused JavaScript code from the final bundle (Correct answer)
- Splitting routes into chunks
- Compressing images at build time
Correct answer: Eliminating unused JavaScript code from the final bundle
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?
- Dynamic component loader
- Standalone component (Correct answer)
- Feature module
- Entry component
Correct answer: Standalone component
Standalone components (Angular 14+) declare their own imports and can be lazy-loaded directly via the router without a wrapping NgModule.
Question 6: What is the role of the Angular CLI's esbuild-based builder introduced in Angular 17?
- Runs Karma tests faster
- Provides significantly faster build and rebuild times replacing Webpack (Correct answer)
- Generates API documentation
- Lints TypeScript files
Correct answer: Provides significantly faster build and rebuild times replacing Webpack
Angular 17's application builder uses esbuild for up to 72% faster production builds and near-instant incremental rebuilds during development.
Angular Web Framework Performance Optimization & Build Tools 2
Which Angular 17+ feature defers loading a component's template until it is visible in the viewport?