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 change impacts your bundle size, making it easier than ever to spot potential issues before they hit production, so your users never 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.
Bundle Analysis in the PR Comment
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.
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.
Getting Started with Bundle Analysis
To use Bundle Analysis, users can opt for a bundler plugin setup with current support for Rollup, Vite, and 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.
A Look Forward
As we build out Bundle Analysis we’ll also be adding features like status checks, so you can catch and block PRs with bundle size changes that are above your threshold before they cause headaches for your users.
Try Bundle Analysis and tell us what you think.
