Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Build: Write and store esbuild metafiles #29117

Open
wants to merge 14 commits into
base: next
Choose a base branch
from
Open

Build: Write and store esbuild metafiles #29117

wants to merge 14 commits into from

Conversation

JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Sep 13, 2024 •
edited by storybook-pr-benchmarking bot
Loading

Closes #29105

What I did

  1. Save all esbuild metafiles from all packages under bench/esbuild-metafiles
  2. Made them available as artifacts in CircleCI. See eg. https://app.circleci.com/pipelines/github/storybookjs/storybook/83887/workflows/dde373c2-a6c9-4698-8e38-623e0fb1958a/jobs/706709/artifacts
  3. Created a Bench story in the UI Storybook that inputs those metafiles to the esbuild analyzer directly in the story, by just selecting the metafile in the Control. See eg. https://635781f3500dd2c49e189caf-rjflqvpgls.chromatic.com/?path=/story/bench--es-build-analyzer&args=metafile:docs_SLASH_metafile_DOT_esm_DOT_json

image

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 77.4 MB 77.4 MB 416 B 3.19 0%
initSize 162 MB 162 MB 416 B -0.22 0%
diffSize 85 MB 85 MB 0 B -0.36 0%
buildSize 7.57 MB 7.57 MB 0 B 0.41 0%
buildSbAddonsSize 1.66 MB 1.66 MB 0 B 0.49 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 2.34 MB 2.34 MB 0 B 0.42 0%
buildSbPreviewSize 352 kB 352 kB 0 B 0.23 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.55 MB 4.55 MB 0 B 0.49 0%
buildPreviewSize 3.02 MB 3.02 MB 0 B -0.52 0%
testBuildSize 0 B 0 B 0 B - -
testBuildSbAddonsSize 0 B 0 B 0 B - -
testBuildSbCommonSize 0 B 0 B 0 B - -
testBuildSbManagerSize 0 B 0 B 0 B - -
testBuildSbPreviewSize 0 B 0 B 0 B - -
testBuildStaticSize 0 B 0 B 0 B - -
testBuildPrebuildSize 0 B 0 B 0 B - -
testBuildPreviewSize 0 B 0 B 0 B - -
name before after diff z %
createTime 25.3s 20.2s -5s -85ms 0.97 -25.1%
generateTime 18.9s 20.9s 2s 0.27 9.7%
initTime 13.9s 16.7s 2.7s -0.15 16.6%
buildTime 11.1s 10.8s -315ms -0.71 -2.9%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 7.8s 9.4s 1.6s 3.32 🔺17%
devManagerResponsive 5s 6.1s 1s 3.52 🔺17.8%
devManagerHeaderVisible 762ms 1s 242ms 1.68 🔺24.1%
devManagerIndexVisible 795ms 1s 256ms 1.68 🔺24.4%
devStoryVisibleUncached 1.5s 2.2s 619ms 2.95 🔺28%
devStoryVisible 792ms 1s 257ms 1.66 🔺24.5%
devAutodocsVisible 865ms 1.1s 314ms 4.43 🔺26.6%
devMDXVisible 744ms 929ms 185ms 2.47 🔺19.9%
buildManagerHeaderVisible 763ms 1s 326ms 2.88 🔺29.9%
buildManagerIndexVisible 800ms 1.1s 368ms 3.1 🔺31.5%
buildStoryVisible 799ms 1.1s 370ms 3.11 🔺31.7%
buildAutodocsVisible 708ms 955ms 247ms 2.29 🔺25.9%
buildMDXVisible 651ms 873ms 222ms 1.94 🔺25.4%

Greptile Summary

This PR implements the saving and storing of esbuild metafiles, enhancing build analysis capabilities for Storybook.

  • Added functionality to save esbuild metafiles in bench/esbuild-metafiles directory
  • Created a new Storybook story (bench.stories.tsx) for visualizing and analyzing metafiles using the esbuild analyzer
  • Modified CircleCI configuration to store metafiles as artifacts for easier access
  • Updated build scripts in prep.ts, addon-bundle.ts, and bundle.ts to generate and save metafiles
  • Added metafile output configuration in nx.json for improved build process analysis

@JReinhold JReinhold linked an issue Sep 13, 2024 that may be closed by this pull request
Save ESBuild metafiles and make them available from CI #29105
Open
@JReinhold JReinhold self-assigned this Sep 13, 2024
@JReinhold JReinhold added ci:normal build Internal-facing build tooling & test updates labels Sep 13, 2024
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Sep 13, 2024 •
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 6f75f30. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@JReinhold JReinhold marked this pull request as ready for review September 17, 2024 14:14
greptile-apps[bot]
greptile-apps bot reviewed Sep 17, 2024
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

9 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings

code/.storybook/bench.stories.tsx

import type { Meta } from '@storybook/react';

// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider using a more type-safe approach instead of @ts-expect-error

scripts/prepare/bundle.ts Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@greptile-apps Greptile Apps greptile-apps left review comments

@ndelangen ndelangen Awaiting requested review from ndelangen

At least 1 approving review is required to merge this pull request.

Assignees

@JReinhold JReinhold

Labels
build Internal-facing build tooling & test updates ci:normal
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Save ESBuild metafiles and make them available from CI
1 participant
@JReinhold