Build Tooling45-70 min
Bundle Analysis and Optimization
Generate a visual bundle report, identify the biggest wins, split expensive routes, and keep a bundle budget.
ViteWebpackRollupBundle Analyzer
Prerequisites
- A frontend app with production build output.
- Ability to install a dev-only analyzer.
- A target budget for initial JavaScript.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm install -D rollup-plugin-visualizer
# Add visualizer to Vite plugins temporarily or behind an ANALYZE flag.Checklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Build with the analyzer enabled.
- Sort by parsed size and gzip size.
- Check whether large modules belong to the initial route or a lazy route.
- Split charts, editors, maps, PDF viewers, and admin-only screens.
- Add a budget check to keep regressions visible.
Implementation snippet
import { visualizer } from "rollup-plugin-visualizer";
export default defineConfig({
plugins: [react(), process.env.ANALYZE && visualizer({ filename: "stats.html" })].filter(Boolean),
});4
Handle edge cases
Checklist
- The largest dependency is known and justified.
- Admin-only or rare flows are lazy-loaded.
- Duplicated packages are resolved or documented.
- A repeatable analyzer command is available for future audits.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.