Your Performance Budget
Set a total budget for your application and allocate it across different chunks (JS, CSS, Assets). All sizes in KB (Gzipped).
| Chunk Name | Size (KB) |
|---|
You have room for more features!
Why Bundle Size Matters
Every byte you send to a user's browser has a cost. Not just in data, but in parsing, compiling, and execution time.
The 170KB Target
A 170KB gzipped JS budget is often cited as a target for achieving Interactive under 5 seconds on a mid-range mobile device over a slow 3G connection.
Mobile vs. Desktop
Mobile CPUs are significantly slower at parsing JavaScript. 100KB of JS can take seconds to process on low-end hardware, even if the download is fast.
How to use this tool
- Set your total budget: Start with a realistic goal for your whole app.
- List your main chunks: Add your `vendor.js`, `main.js`, `styles.css`, and any large library you're considering.
- Enter gzipped sizes: Use your build tool output (e.g., Webpack, Vite, or a tool like `bundle-phobia`) to get accurate sizes.
- Monitor headroom: The "Headroom" shows exactly how much more code you can add before hitting your performance target.
Common Budget Targets
| Scenario | Recommended Max | Reasoning |
|---|---|---|
| Critical Path | 14-28 KB | Fits in first few TCP round trips (Initial Congestion Window). |
| High Perf Web | 100 KB | Instant feel on 3G mobile devices. |
| Standard Web App | 170-250 KB | Reasonable balance for modern interactive apps. |
| Content Heavy | 500 KB | Maximum before significant churn on mobile. |
FAQ
Should I use Gzipped or Raw sizes?
Always use Gzipped (or Brotli) sizes. This is what the user actually downloads over the network. However, remember that the browser still has to parse the raw uncompressed code, which affects CPU time.
What are "Chunks"?
Modern build tools split your code into multiple files. Chunks might include your application logic, third-party vendors (React, Lodash), or specific routes (e.g., the dashboard page) that are lazy-loaded.
How do I reduce my bundle size?
- Tree Shaking: Ensure you aren't importing whole libraries when you only need one function.
- Code Splitting: Lazy-load routes and heavy components (like charts or editors).
- Dependency Audit: Use `npm list` or `source-map-explorer` to see what's taking up space. Consider smaller alternatives (e.g., `date-fns` vs `moment`).
- Image Optimization: Often the largest part of the page weight, even if not part of the JS bundle.
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are computed locally and should be verified for critical applications.
Related Tools
- Border Radius Generator -- Create CSS border-radius with visual editor for all corners
- UUID Bulk Generator -- Generate large batches of UUID v4 or v7 values with export-ready formatting
- JSON Validator -- Validate JSON syntax and show errors
- CSS Formatter -- Format CSS with proper indentation
Related Tools
View all toolsBig-O Notation Visualizer
Interactive plot of O(1) through O(n!) complexity curves with operation count comparison
JSON Formatter
Format and beautify JSON with proper indentation
JSON Validator
Validate JSON syntax and show errors
CSV to JSON Converter
Convert CSV data to JSON format with auto-detection
JSON to CSV Converter
Convert JSON arrays to CSV format with nested object handling
JWT Decoder
Decode JWT tokens and display header and payload
Bundle Size Budget Planner FAQ
What is Bundle Size Budget Planner?
Bundle Size Budget Planner is a free developer tools tool that helps you Plan and track your web application's bundle size budget across different chunks.
How do I use Bundle Size Budget Planner?
Enter your input values, review the calculated output, and adjust inputs until you reach the result you need. The result updates in your browser.
Is Bundle Size Budget Planner private?
Yes. Calculations run locally in your browser. Inputs are not uploaded to a server by default, and refreshing the page clears session data.
Does Bundle Size Budget Planner require an account or installation?
No. You can use this tool directly in your browser without sign-up or software installation.
How accurate are results from Bundle Size Budget Planner?
This tool applies standard formulas or deterministic processing logic for estimates. For medical, legal, tax, or investment decisions, verify with a qualified professional.
Can I save or share outputs from Bundle Size Budget Planner?
You can bookmark this page and copy outputs manually. Results are not persisted in your account and are typically not embedded in the URL.