AZ-400 Practice Question: Design and implement build and release pipelines
Your team uses Azure Pipelines to build a React application. The build process runs npm install, npm test, and npm run build. The build succeeds, but the application loads slowly in the browser due to large bundle sizes. What should you add to the pipeline to optimize the build?
⚠ Common exam trap
A common mix-up: candidates confuse build optimization (caching, minification) with bundle size optimization, overlooking that code splitting directly addresses the symptom of slow loading due to large bundles.
Answer choices
Why each option matters
Answer the question above first, then reveal the full breakdown to understand why each option is right or wrong.
Correct answer & explanation
✓
Add a step to run Webpack bundle analyzer and implement code splitting.
The issue is large bundle sizes causing slow load times. Running Webpack bundle analyzer identifies which modules contribute most to the bundle, and implementing code splitting (e.g., dynamic imports or React.lazy) allows splitting the bundle into smaller chunks loaded on demand, reducing initial payload size.
Answer analysis
Option-by-option breakdown
For each option: why learners choose it and why it is or isn't the right answer here.
- ✗
Add a step to cache the node_modules folder.
Why it's wrong here
Caching the node_modules folder improves pipeline performance by restoring dependencies from a cache instead of running npm install, but it does not alter the JavaScript that webpack bundles. Bundle size is determined by the source code and build configuration, not by dependency restore speed, so this step cannot reduce the initial bundle size.
- ✗
Add a step to minify JavaScript using Terser.
Why it's wrong here
Terser minification removes whitespace, renames locals, and drops dead code, but webpack's production mode already applies TerserPlugin by default during the build. Adding an explicit Terser step therefore provides little or no additional size reduction, and it does not address large dependency graphs or duplicate modules that inflate the bundle.
- ✓
Add a step to run Webpack bundle analyzer and implement code splitting.
Why this is correct
Running Webpack Bundle Analyzer generates a visual treemap of module and dependency sizes, which helps identify large libraries or accidental duplicates that inflate the bundle. Implementing code splitting via dynamic imports or SplitChunksPlugin then breaks the single bundle into smaller lazy-loaded chunks, directly reducing the initial bundle size and improving load performance.
- ✗
Add a step to run additional unit tests to catch performance issues.
Why it's wrong here
Additional unit tests validate functionality and can catch performance regressions in code logic, but they run outside the production build and have no effect on the emitted bundle. Tests do not modify webpack output or reorganize dependencies, so they cannot reduce bundle size; bundle optimization requires build-time analysis and configuration changes.
Go deeper
Related to this question
Learn chapter
Introduction to DevOps and Azure DevOps
Key term
Azure Pipelines
Azure Pipelines is a cloud-based CI/CD service from Microsoft that automatically builds, tests, and deploys code to any platform or cloud.
Key term
Pipeline
A pipeline is an automated series of steps that takes code from development to production, ensuring quality and speed.
About these practice questions
Courseiva writes every AZ-400 question from scratch — 823 in total, each with an explanation and a wrong-answer breakdown. None are copied from real exams or dumps. Learn why practice questions differ from exam dumps →
JA
Written by Johnson Ajibi, MSc IT Security
Senior Network & Security Engineer · founder of Courseiva
This AZ-400 practice question is part of Courseiva's free Microsoft certification practice question bank. Courseiva provides original exam-style practice questions with explanations, topic-based practice, mock exams, readiness tracking, and study analytics to help learners prepare for the AZ-400 exam.