[Beta] Javascript Bundle Analysis

What is Bundle Analysis?

Bundle Analysis helps improve your application's performance, bandwidth usage, and load times by letting you know if what you’re about to merge will cause any performance regressions. It will allow you to explore all of the modules in your bundle and determine where you might be able to streamline your bundle size as well as find areas of concern.

Main Features

• Asset and Module exploration

  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.

  

• Commit and Pull Request bundle breakdown

  To help you dig deeper, we 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 information via 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.

  

  By default, Codecov will always post a comment with the bundle analysis information, even if it doesn't change. You can require that certain conditions be met for the comment to be posted.

  require_bundle_changes controls conditions for posting. Options include:

  • True - Only post if the bundle size changes
  • bundle_increase - Only post if bundle size increases

  Furthermore you can also define a threshold (in absolute size) for the "changes", in bytes, using the bundle_change_threshold configuration. Valid options include bytes, b, Kb, Mb and Gb. It only accepts integer numbers (so "500Kb" ✅, but "0.5Mb" ❌)

  Examples

  YAML

  # Post comment if there are changes in bundle size of any size
  comment:
       require_bundle_changes: True
       
  # Post comment if there are changes in bundle size exceeding 1Kb
  comment:
       require_bundle_changes: True
       bundle_change_threshold: "1Kb"
       
  # Post comment if there are changes in bundle size increases more than 1Mb
  comment:
       require_bundle_changes: "bundle_increase"
       bundle_change_threshold: "1Mb"
  

📘

Comments are always edited, if they exist

Requiring changes are for posting the comment the 1st time. If it was already posted Codecov will always update the comment. Editing a comment doesn't send a new email to subscribers of the pull request.

Getting started:

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

Framework specific guides for those frameworks can be found below:

• Nuxt Module Quick Start
• Remix (Vite) Quick Start
• Rollup Quick Start
• SvelteKit Quick Start
• Vite Quick Start (React, Vue, Svelte, SolidJS, etc.)
• Webpack Quick Start (NextJS, Angular, CRACO)

If you're looking to further configure your plugin, you can check out more specific bundle configuration options in our plugin config docs

Having trouble with the Bundle Analysis plugins in your CI?

Check out our Environment Specific Requirements for some potential fixes.