Bundle Analysis Tool Configuration in Codecov

[codecovdesign]

Problem to Solve

The focus is on establishing the configuration process for the upcoming bundle analysis tool:

• Configuration: user will need to update their bundler config files, such as Webpack, Vite, Rollup, Next.js, and Remix, within a user's repository.
  • Next, will need to integrate CI – focus will start with GitHub Actions since it's most commonly used by customers.
• Information architecture: what is the integration of this configuration process into Codecov's app, considering both new users at signup and existing users who wish to adopt bundle analysis.

Solution Ideation

Following user steps needed for configuration:

1. Choose repo to configure: users select the repository for enabling bundle analysis.
2. Add Codecov configuration in bundler config: integrate Codecov's bundle analysis plugin into the bundler configuration file.
3. Add GitHub CI Action: update CI workflows to include bundle analysis in the build process.
4. Commit changes: Users commit and push the new configurations to trigger the CI process and analysis.
5. Codecov displays the data in the UI: after CI completion and data upload, display the results on the Codecov UI.
   • Consider feedback in the commit, like today's 1st time UX pattern.

WIP designs

[codecovdesign]

Notes from sync:

Flow

• Steps 3 may not be necessary

  • no need to touch CI at all; since the bundler config would capture the variable
  • need to identify the environment var, the node uploader has this information that can be used (needed commit information)
    • in the system provided will add to it
  • starting goal: don't touch CI at all given developers not interested in CI or config. Tradeoff is potential build time, but this could be mitigated
  • in CI if using there could be able to include a status check, can be checked against any

• with bundler configuration, would we need different input for each?

  • how many are there that we should consider?
    • majority in rollup, webpack, and vite (mvp) / support vue (same as vite), remix (), astro (same as vite), other is next (specific)
    • framework is custom config in each
    • design todo: in case of vite where they make a connection that it's still supported

• the welcome PR comment (is this a separate from codecov, pr comment)

information architecture

– nick outline issues with how it gets complex pretty fast
– eli suggestion exploring showing left nav only after repo is selected

[codecovdesign]

closing as issue is completed