Front-End Build Tooling: What Actually Works
The bundling, transpiling, minifying and fingerprinting step between the source a developer writes and the files a browser receives.
Marcus Adeyemi
The key figures
- Typical responsibilities
- bundling, transpiling, minification, tree-shaking, fingerprinting, source maps
- Code splitting
- load what the current route needs, not the whole application
- Fingerprinting
- content-hashed filenames, which is what makes long caching safe
- Compression
- Brotli or gzip, applied at the server or the edge
- Budget practice
- set a size budget and fail the build when it is exceeded
Why this is worth getting right
The build determines what ships, and a misconfigured one silently sends a megabyte of unused code to every visitor while the team is optimizing images.
Do this, not that
Do
- Set a performance budget and enforce it in continuous integration
- Split bundles by route so a landing page does not carry the dashboard
- Audit the bundle periodically for dependencies nobody uses any more
- Serve fingerprinted files with long cache lifetimes
- Keep source maps available to your team without shipping them to everyone
Don’t
- One bundle for the entire site
- Large libraries imported whole for one function
- Letting the bundle grow with no measurement or budget
- Configuration nobody on the team understands well enough to change
When to bring in help
Our advice Bring in help when the bundle has grown past what anyone can account for, when builds are slow enough to discourage deployment, or when a framework upgrade has stalled on tooling.
Where this comes from
- web.dev — Reduce JavaScript payloads
- MDN Web Docs — JavaScript modules
- Laravel Documentation — Asset bundling with Vite
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
