Performance Optimization & Build Tools Flashcards
6 cards from real Angular Web Framework practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 6 Performance Optimization & Build Tools flashcards as text
Which Angular 17+ feature defers loading a component's template until it is visible in the viewport?
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.
What Angular CLI tool analyzes bundle sizes and shows which modules contribute most to the output?
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.
Which technique splits a large Angular app into multiple smaller JavaScript files downloaded in parallel?
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.
What is tree-shaking in the context of Angular builds?
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.
Which Angular feature allows a component to be loaded without belonging to any NgModule, simplifying lazy loading?
Answer: Standalone component
Standalone components (Angular 14+) declare their own imports and can be lazy-loaded directly via the router without a wrapping NgModule.
What is the role of the Angular CLI's esbuild-based builder introduced in Angular 17?
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.