Fingerprinted names for a year-long cache
SHA-256 of the real files on this site, via crypto.subtle.
Design a 3D product configurator for thousands of variants: split the product into parts instead of one model per variant, deliver them from a CDN with fingerprinted names, budget per device class, load progressively with fallbacks, and keep it accessible and measurable.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Estimate the first-view download for the showroom: three.js, the 6 default parts, the decoder and one environment map.
A customer shares a link to their bike. What must the URL hold, and what happens when a part in it no longer exists?
Explain it without notes
Why split a configurable product into part models instead of one model per variant?
How do you make sure customers get a new model version immediately, while models stay cached?
Console
(nothing was printed)Expected console output
lumen-bike-draco.f0fcaeb6.glb 33752 bytes -> Cache-Control: public, max-age=31536000, immutable
lumen-bike-meshopt.b28f7baf.glb 47604 bytes -> Cache-Control: public, max-age=31536000, immutable
the page that names them (index.html) -> Cache-Control: no-cache (always asks: is there a newer list of file names?)