build: replace webpack with rspack #61475

anonrig · 2023-12-08T22:08:53Z

Summary

This pull-request removes babel and Webpack in favor of Rspack and SWC. This change comes with a significant performance boost and improves our productivity. Currently, it takes 14 seconds to build Sentry. Prior to this PR, it took 58 seconds.

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

We removed 14 dependencies and added 3 new dependencies. Depending on Babel and Jest, we can remove more. Currently it takes 14 seconds to build, minify both JS and CSS files.

Rspack compiled successfully in 12.90 s
✨  Done in 14.00s.

TODOs:

In order to not break the Vercel previews we need the following change of Rspack.
- Support --output-path CLI option web-infra-dev/rspack#4977
Rspack doesn't support lazy compilation, but it is in their roadmap.
Research why we need build-js-loader.ts script since it brings an unnecessary dependency: terser
Research the relation of Babel and Jest and remove unnecessary configs from babel.config.
Make tsc child process DX a little bit better.
Fix error from downsample npm library in production build
- Error in production build with library "downsample" web-infra-dev/rspack#4980

Thanks @hardfist for helping with this PR!

rspack.config.ts

ScriptedAlchemy · 2023-12-09T02:04:45Z

rspack.config.ts

-      : []),
+    // ...(SHOULD_FORK_TS
+    //   ? [
+    //       new ForkTsCheckerWebpackPlugin({


Fork TS is very slow, will be the bottleneck of rspack build speeds. If you can run tsc as a separate command, it will keep the builds very fast.

hardfist · 2023-12-09T02:56:33Z

@anonrig do you know how to setup devenv for outside contributors, I'm not sure how should i setup the environment, I can't launch the server so I can't verify whether the migration runs successfully

anonrig · 2023-12-09T03:14:27Z

@Hardist You don't need devenv for the frontend app. Cloning, installing dependencies and running "yarn dev-ui" is sufficient for running the frontend.

The public documentation is available at https://develop.sentry.dev/environment/

hardfist · 2023-12-09T03:24:25Z

@Hardist You don't need devenv for the frontend app. Cloning, installing dependencies and running "yarn dev-ui" is sufficient for running the frontend.

The public documentation is available at https://develop.sentry.dev/environment/

no need for homepage but seems needed for login page，but i will verify homepage first

anonrig · 2023-12-09T03:27:07Z

no need for homepage but seems needed for login page，but i will verify homepage first

You can use mkert command in package.json with cookie sync chrome extension. https://chrome.google.com/webstore/detail/sentry-cookie-sync/kchlmkcdfohlmobgojmipoppgpedhijh

github-actions · 2023-12-11T15:28:37Z

🚨 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.

codecov · 2023-12-11T15:58:11Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.14%. Comparing base (8b86730) to head (6e51e59).
Report is 11156 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #61475   +/-   ##
=======================================
  Coverage   81.14%   81.14%           
=======================================
  Files        5191     5192    +1     
  Lines      228290   228333   +43     
  Branches    38279    38280    +1     
=======================================
+ Hits       185239   185284   +45     
  Misses      37433    37433           
+ Partials     5618     5616    -2

see 22 files with indirect coverage changes

package.json

hardfist · 2023-12-12T01:51:33Z

static/less/auth.less

@@ -42,55 +42,55 @@ section.org-login {
  background-size: cover;

  &.google {
-    background-image: url(~sentry-logos/logo-google.svg);


no need to change this for rspack, you can use alias to workaround this, but it's better to change since ~ is deprecated in latest less-loader both for webpack and rspack

hardfist · 2023-12-12T01:56:12Z

rspack.config.ts

      },
      {
        test: /\.css/,
-        use: ['style-loader', 'css-loader'],
+        type: 'css',
      },


I'm curious why sentry use style-loader to handle css and use minicssExtractPlugin to handle less before?

hardfist · 2023-12-12T01:57:56Z

rspack.config.ts

@@ -376,13 +293,13 @@ const appConfig: Configuration = {
     * Without this, webpack will still output all of the unused locale files despite
     * the application never loading any of them.
     */
-    new webpack.ContextReplacementPlugin(
+    new ContextReplacementPlugin(


not sure Rspack supports webpack.ContextReplacementPlugin now

hardfist · 2023-12-12T01:58:38Z

rspack.config.ts

    },

    // This only runs in production mode
-    // Grabbed this example from https://github.com/webpack-contrib/css-minimizer-webpack-plugin
-    minimizer: ['...', new CssMinimizerPlugin()],
+    minimizer: [


this is actually no needed and enabled by default in production mode

getsantry · 2024-01-02T08:00:16Z

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!