Frontend Architecture
Build pipelines: free-recall review
Retrieval beats re-reading. For each prompt, say or write a full answer from memory before you open the model answer — the effort of recall is what makes the material stick.
Reconstruct the unit’s core mechanisms — the five stages, why tree-shaking fails, the dev/prod split, content hashing, source maps, and build caching — without looking back at the overview.
- 01Name the five build-pipeline stages in order and say which one is parallel and which is serial.
- 02Tree-shaking only works on static ES modules. What three things defeat it, and how do you fix each?
- 03Why do 'works in dev, breaks in prod' bugs happen with tools like Vite, and how does a senior prevent them?
- 04Explain content hashing and the vendor-chunk mistake it exposes.
- 05What do source maps do, what setting should production use, and why?
- 06How does build caching speed up CI, and what is the difference between content-hash caching and a persistent build cache?
If you could reconstruct each answer from memory, you hold the unit’s spine: the build is five stages (resolve, transform, bundle, minify, emit) with transform parallel and bundle serial; tree-shaking needs static ESM and is defeated by CommonJS, undeclared side effects, and ESM-to-CJS down-leveling; dev and prod run different tools so you validate the real prod build; content hashing plus a split vendor chunk gives year-long caching; hidden source maps make prod errors readable without leaking source; and a persistent input-keyed build cache is what makes CI fast — distinct from output content hashing.