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.

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

build(ui): Add rspack as webpack alternative #77077

Draft
wants to merge 31 commits into
base: master
Choose a base branch
from
Draft

Conversation

scttcper
Copy link
Member

@scttcper scttcper commented Sep 6, 2024

Building off the work done in #61475 I think the plan would be to use this as a dev-ui replacement until we're more confident and can setup the getsentry repo as well (if you aren't familiar we have another repo with billing pages etc).

Potential adoption roadmap

  1. merge rspack as optional dev only command yarn dev-ui-rspack
  2. make rspack default for dev-ui
  3. use rspack for acceptance tests
  4. build production with rspack
  5. remove webpack

Summary

Before

We are using Babel and Webpack for building our frontend application. It took almost 58 seconds on my M2 machine to run yarn build-production command.

webpack 5.87.0 compiled with 1 warning in 56351 ms
✨  Done in 57.91s.

After

Currently it takes 20 seconds to build, minify both JS and CSS files. Uses ~2.9GB memory during dev-ui compared to webpack 3.27GB

Rspack compiled with 1 warning in 19.55 s
✨  Done in 20.75s

RSPACK + SENTRY TODO (updated Oct 7th, 2024)

  • Investigate emotion autoLabel in development mode. Currently set to autoLabel: 'always', Could just set label setting based on node_env.
  • Add back webpack in order to merge (getsentry repo will block until it can accept a rspack file instead of webpack)
  • Figure out a path forward for translation string extraction that use webpack + babel's AST make build-js-po
  • Chartcuterie is failing for some reason

Thanks @hardfist for helping with this PR!

anonrig and others added 3 commits December 11, 2023 20:03
# Conflicts:
#	build-utils/last-built-plugin.ts
#	config/rspack.chartcuterie.config.ts
#	package.json
#	rspack.config.ts
#	yarn.lock
@github-actions github-actions bot added Scope: Frontend Automatically applied to PRs that change frontend components Scope: Backend Automatically applied to PRs that change backend components labels Sep 6, 2024
Copy link
Contributor

github-actions bot commented Sep 6, 2024

🚨 Warning: This pull request contains Frontend and Backend changes!

It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently.

Have questions? Please ask in the #discuss-dev-infra channel.

@scttcper
Copy link
Member Author

scttcper commented Sep 6, 2024

Just realized its working for me locally because i fixed platformicons locally will need to publish a fix to the svg paths there

# Conflicts:
#	package.json
#	rspack.config.ts
#	yarn.lock
Copy link

codecov bot commented Sep 26, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Additional details and impacted files
@@             Coverage Diff             @@
##           master   #77077       +/-   ##
===========================================
+ Coverage   57.51%   78.34%   +20.82%     
===========================================
  Files        7179     7191       +12     
  Lines      317636   318147      +511     
  Branches    43801    43856       +55     
===========================================
+ Hits       182697   249249    +66552     
+ Misses     130202    62540    -67662     
- Partials     4737     6358     +1621     

@scttcper scttcper changed the title build: replace webpack with rspack build(ui): Add rspack as webpack alternative Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Backend Automatically applied to PRs that change backend components Scope: Frontend Automatically applied to PRs that change frontend components WIP
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants