Blog updated September 10, 2024 to include new Bundle analysis features and general availability. Learn more about the new size over time and status checks features below, or go straight to the guide
It’s frustrating when your front end is slow to respond; it’s even worse when your customers feel it. With the rise of more and more complex web applications, it’s no surprise that performance issues and long load times are becoming pretty common. To get ahead of performance issues, you need to keep your JS Bundles small. Bigger bundles mean slower load times, slower app performance, and a bad experience for your users.
That’s where Codecov’s new Bundle Analysis solution comes in. We tell you exactly which code changes impact your bundle size, making it easier than ever to spot performance issues before they hit production, so your users don’t face annoying load time problems and stay on your site.
You’ll find Bundle Analysis right where you’re already working – in the Codecov PR Comment in yourCI. Plus, we updated the Codecov UI to include a dedicated Bundle Analysis tab and added bundle analysis to our Pulls and Commits pages.
See if your bundle size increases or – better yet – decreases in the Codecov PR comment. There’s no need to leave the Pull Request to understand how a code change impacts your bundle size – unless you want to dig deeper, which you definitely should.
The new Status Checks feature goes beyond providing information to actually block the commit from merging if the bundle size exceeds a user-defined threshold at the organization or repo level. This optional feature helps developers and organizations avoid merging bundles that will reduce performance, and is controlled by the Codecov YAML.
Bundle Analysis on Commits and Pulls
To help you dig deeper, we also incorporated Bundle Analysis into our Commit and Pull Request pages. This means you can now pinpoint the exact commit and Pull Request responsible for any bundle size changes, allowing for a better understanding of your code changes.
Bundle Analysis on the Bundles Tab
On the Bundles Tab in the Codecov UI you’ll see a simple summary of the size of your bundle: total size, gzip size, and download time to help you understand just how much bundle size may be impacting user experience.
You’ll also see a visual representation of size over time, making it easier to understand how each commit has affected bundle size. This will help you compare bundle size to a baseline commit, see trends, and easily pinpoint size spikes.
Getting Started with Bundle Analysis
To use Bundle Analysis, users will need a bundler plugin setup with support for the current version of Rollup, Vite, or Webpack. To get started all you need to do is:
- Install one of the plugins as a dev dependency
- Configure it in your bundler config
- Make a commit
- Build
The plugin will collect bundle information automatically and upload the information directly to Codecov for you.
You can find all the information, instructions, and links you need in the Bundle Analysis Guide, including framework-specific bundler guides, Status Check YAML configurations, and troubleshooting.
Try Bundle Analysis and tell us what you think.
