Skip to content

UI: Use production-mode react in manager#29197

Merged
JReinhold merged 3 commits intonextfrom
norbert/react-in-prodmode-manager-bundle-metafiles
Sep 25, 2024
Merged

UI: Use production-mode react in manager#29197
JReinhold merged 3 commits intonextfrom
norbert/react-in-prodmode-manager-bundle-metafiles

Conversation

@ndelangen
Copy link
Member

@ndelangen ndelangen commented Sep 24, 2024

Closes #29166

What I did

  • Set react in prod mode for the manager globals bundle
  • Bundle the metafiles outputted by esbuild for the core.

Before:
Screenshot 2024-09-24 at 15 14 21

After:
Screenshot 2024-09-24 at 15 14 32

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.5 MB 77.5 MB 659 B 1.21 0%
initSize 162 MB 162 MB -372 kB -3.83 -0.2%
diffSize 85 MB 84.6 MB -373 kB -23.62 -0.4%
buildSize 7.57 MB 7.19 MB -384 kB -29160.19 🔰-5.3%
buildSbAddonsSize 1.66 MB 1.66 MB 0 B - 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 2.34 MB 1.96 MB -384 kB -42240.73 🔰-19.6%
buildSbPreviewSize 352 kB 352 kB 0 B - 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.55 MB 4.17 MB -384 kB -42240.73 🔰-9.2%
buildPreviewSize 3.02 MB 3.02 MB 0 B -2.31 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 7.5s 18.5s 10.9s 0.72 59.3%
generateTime 25.3s 22.7s -2s -599ms 0.16 -11.4%
initTime 22.7s 19.7s -3s -11ms 0.8 -15.3%
buildTime 14.4s 11.3s -3s -72ms -0.1 -27%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 6.3s 6.3s 7ms -1 0.1%
devManagerResponsive 4.2s 4.2s 5ms -1.06 0.1%
devManagerHeaderVisible 758ms 552ms -206ms -2.42 🔰-37.3%
devManagerIndexVisible 800ms 594ms -206ms -2.18 🔰-34.7%
devStoryVisibleUncached 1.2s 1.1s -68ms -0.66 -5.8%
devStoryVisible 799ms 595ms -204ms -2.23 🔰-34.3%
devAutodocsVisible 661ms 381ms -280ms -2.46 🔰-73.5%
devMDXVisible 625ms 435ms -190ms -2.25 🔰-43.7%
buildManagerHeaderVisible 677ms 498ms -179ms -2.8 🔰-35.9%
buildManagerIndexVisible 678ms 501ms -177ms -2.85 🔰-35.3%
buildStoryVisible 738ms 578ms -160ms -2.43 🔰-27.7%
buildAutodocsVisible 617ms 451ms -166ms -2.78 🔰-36.8%
buildMDXVisible 624ms 509ms -115ms -1.74 🔰-22.6%

@ndelangen ndelangen added maintenance User-facing maintenance tasks builder-manager ci:normal labels Sep 24, 2024
@ndelangen ndelangen self-assigned this Sep 24, 2024
@ndelangen ndelangen requested a review from JReinhold September 24, 2024 13:43
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.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings

@nx-cloud
Copy link

nx-cloud bot commented Sep 24, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 56a312e. 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.

@ndelangen ndelangen force-pushed the norbert/react-in-prodmode-manager-bundle-metafiles branch from 5f89897 to 45e597f Compare September 25, 2024 08:44
@ndelangen
Copy link
Member Author

I tested the react devtools, and the behavior seems unchanged

@JReinhold JReinhold merged commit 39e5242 into next Sep 25, 2024
@JReinhold JReinhold deleted the norbert/react-in-prodmode-manager-bundle-metafiles branch September 25, 2024 20:34
@github-actions github-actions bot mentioned this pull request Sep 25, 2024
10 tasks
@shilman shilman changed the title Optimize: Production-mode react in manager UI: Use production-mode react in manager Sep 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

builder-manager ci:normal maintenance User-facing maintenance tasks

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Use production build of react, react-dom in the manager

2 participants