Discovery: developer bundle analysis and optimization

[codecovdesign]

Problem

With modern web development, JavaScript bundles have become substantial parts of applications. As applications grow and become more complex, so do their bundles. However, the direct correlation between bundle size and application performance means that every byte counts. Without clear insights and easy-to-use tools, developers might inadvertently hamper the performance of their applications. Developer problem to solve and goal:

"When I'm developing a web application, I want to easily understand and optimize my JavaScript bundle sizes so that I can ensure the best performance and user experience without unnecessary complexities or extensive configurations."

Developers strive for efficient and performant web applications, and JavaScript bundling plays a crucial role in achieving this to help developers with:


• Awareness: not all developers are fully aware of how bundle size impacts the performance and user experience of their applications. They might be introducing inefficiencies unintentionally.
• Comprehensive insights: While some developers might use local tools like webpack-bundle-analyzer for initial insights, they might be missing out on historical data, trends, and comparative analyses that can provide deeper insights.
• Dependency trade-offs: developers often need to evaluate whether adding a certain dependency is worth the potential increase in bundle size, but without insights, this becomes a guessing game.

The overarching issue is the potential disconnect between development actions (like adding dependencies or changing code) and their impact on the final product's efficiency and performance. While developers aim to build the best applications, they might lack the tools or awareness to make informed decisions related to bundle optimization.

Solution

🎨 Latest designs for review

bundle_MVP.mov

previous designs

• Ideation 1

• Ideation 2

• Ideation 3
  

• Ideation 4
  https://github.com/codecov/engineering-team/assets/87861036/f40fc6ad-dc7c-4b8d-8086-33accf75596f

Tasks

Beta Give feedback

1. Bundle Analysis Tool Configuration in Codecov #803
   in discovery +1
   

[codecovdesign]

x related feedback: https://twitter.com/acemarke/status/1718347715065573725

[codecovdesign]

We'd like your feedback

• 🤔 Would this fit into your workflow? Why or why not?
• 💰 Is it something you'd pay for?
• 🛑 Not useful? We're all ears—tell us why!

[codecovdesign]

related feedback: https://twitter.com/philw_/status/1724877606489628918

[codecovdesign]

related feedback from separate interview, though bundles was brought up: #480 (comment)

[codecovdesign]

related feedback from: https://twitter.com/bartveneman

interview notes

What Is Your Current Experience Managing Bundles?

• Uses Webpack for a Gatsby static site; bundles are large and code splitting is challenging.
• Orchestration of bundling in Gatsby is complex.

Webpack Analyzer & Lighthouse (current bundle management tools)

• Issues: Doesn't explain why a dependency exists. Hard to track changes for identifying performance issues.
• Likes: Visibility of changes before and after, even before PRs.
• Dislikes: UI is difficult to navigate.
• Uses SpeedCurve for performance tracking but lacks bundle tracking.
• Prefers visual graphs for presenting data to leadership.

What Is Your Dream Bundle Product?

• Alerting in PR for significant bundle size increases.
• Tracking new dependencies and alerting upon additions.
• A Sentry-like interface or email alerts would be preferred; but wasn't sure, just wants some notification.

Prototype Review

• Appreciates PR comment approach.
• References the bundle-gate concept as simliar from Size Limit.
• Size Limit was useful but challenging to maintain, especially with Gatsby (what team uses).

PR Comment

• Prefers seeing total and transferred size like in Firefox browser tools.
• Skeptical about load metrics due to varying conditions.
• Favors failure checks in GitHub Actions for size limits but doesn't want it to block work - more as a conversation starter with the author.

In-App UI

• Values trend analysis and size sorting.
• Skeptical about execution time metrics; prefers concrete data like bundle size.
• Finds it useful to be able to sort by size and see bundle composition.
• Likes the ability to check changes by branch and pre-production impact.

Closing: would love to keep in touch about progress and adopt tool when MVP is ready.

[codecovdesign]

MVP design review

View design file

bundle_MVP.mov

[codecovdesign]

closing this issue since MVP is going toward release: #927
ongoing discovery for next steps here: #1121