JavaScript Bundle
A JavaScript bundle is a file containing JavaScript code combined from multiple modules or source files for delivery to the browser.
Modern build tools often create bundles automatically.
What It Means in Practice
A website may be developed from dozens or hundreds of separate JavaScript modules.
A build process can combine and transform that code into files optimized for browser delivery.
Bundling can simplify delivery, but the resulting file may contain much more JavaScript than a particular page needs.
Why Bundle Size Is Different From File Size
JavaScript has multiple performance costs.
The browser may need to:
- Download the file
- Decompress it
- Parse it
- Compile it
- Execute it
That means a compressed JavaScript file can have a relatively small transfer size while still requiring substantial processing.
Much of that work affects the main thread.
Why It Matters
Large JavaScript bundles can delay loading and make a page less responsive while the browser processes them.
This can affect Interaction to Next Paint, especially when significant JavaScript work occurs during startup or interaction.
Common Problems
Common problems include:
- Shipping application-wide JavaScript to every page
- Including unused libraries
- Duplicate dependencies
- Large frameworks used for very small interactions
- Third-party scripts included in the same performance budget
- Code downloaded long before it is needed
- Measuring compressed file size without considering execution cost
How to Improve
Remove unnecessary code first.
Then use techniques such as code splitting to divide large bundles by route, component, or feature.
Delay JavaScript that is not needed during startup and measure execution time as well as transferred bytes.