[Bug]: Slower than Webpack compilation (dev only)

[dretsa]

Version

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M3
    Memory: 200.36 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Safari: 17.5

Details

I migrated an existing app using react-scripts to rsbuild. I thought it would be easy because in my other project it was extremely easy. However, in this one I can not figure out why it's taking so long to initially build.

Initial dev build: 2 - 3 minutes HMR rebuild: 0.02s Prod build: 4s

The CPU is at 100% while initially building for dev for the whole duration - node process. Sometimes even showing at 200% in Activity Monitor.

I tried:

• Using RSDoctor - all that time is shown under Compilation
• Using Node.js Profiling - could only use with build
  • most time is blank
  • can only run for rsbuild build
• Using Rspack Profiling - all of it shown under compilation
  • can only run for rsbuild build

I also tried:

• Removing SCSS imports
• Removing Type Check

// rsbuild.config.ts
import {defineConfig} from '@rsbuild/core';
import {pluginReact} from '@rsbuild/plugin-react';
import {pluginSass} from '@rsbuild/plugin-sass';
import {pluginTypeCheck} from '@rsbuild/plugin-type-check';

export default defineConfig(({envMode}) => ({
    plugins: [pluginReact(), pluginSass(), pluginTypeCheck()],
    html: {
        template: './public/index.html',
    },
    server: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:4000',
                changeOrigin: true,
            },
        },
    },
}));

When running with debug mode:

user@Andreys-Laptop project % DEBUG=rsbuild yarn workspace client start                   
  Rsbuild v1.0.0-alpha.7

  rsbuild 18:21:33 add default plugins
  rsbuild 18:21:33 add default plugins done
  rsbuild 18:21:33 init plugins
  rsbuild 18:21:33 init plugins done
  rsbuild 18:21:33 modify Rsbuild config
  rsbuild 18:21:33 modify Rsbuild config done
  rsbuild 18:21:33 modify Rsbuild environment(web) config
  rsbuild 18:21:33 modify Rsbuild environment(web) config done
  rsbuild 18:21:33 create dev server
  rsbuild 18:21:33 modify bundler chain
  rsbuild 18:21:33 modify bundler chain done
  rsbuild 18:21:33 modify Rspack config
  rsbuild 18:21:33 modify Rspack config done
  rsbuild 18:21:33 create compiler
  > Local:    http://localhost:3000/
  > Network:  http://192.168.4.87:3000/

  rsbuild 18:21:33 create compiler done
  rsbuild 18:21:33 create dev server done
  rsbuild 18:21:33 listen dev server
  rsbuild 18:21:33 Use Rspack v1.0.0-alpha.2
start   Compiling...
  rsbuild 18:21:33 listen dev server done
success Inspect config succeed, open following files to view the content: 

  - Rsbuild Config: /Users/user/project/packages/client/dist/rsbuild.config.mjs
  - Rspack Config (web): /Users/user/project/packages/client/dist/rspack.config.web.mjs


... then hangs for 2 mins ...
... then starts working as normal ...

What would be my next step debugging this?

Reproduce link

Can't reproduce easily

Reproduce Steps

1. Upgrade existing project to rsbuild
2. Start dev server

[dretsa]

After hours of debugging - I found the issue was a the icon package I was using - @tabler/icons@^1.119.0. I upgraded to the newest version ^3 and it is super quick now.

I will try to create a minimal reproducible example tomorrow.

[chenjiahan]

Thanks, a minimal reproduction will be very helpful

[dretsa]

Here is a minimal reproduction example: https://github.com/colorninja/rsbuild-slow-compile-bug

Obviously there is some incapability with this package because it works great with everything else. I think the main pain point here is that there is no easy way to find out why it behaves the way it does. The only reason I found out it was this was because I tried removing packages one-by-one to see if it starts compiling fast.

I used yarn because that's what I use normally. Not sure if the behaviour would be different with npm but shouldn't.

[SoonIter]

At present, I think this issue is related to Rspack which is currently under in-depth investigation.

Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues
Message:  internal error: entered unreachable code
Location: crates/rspack_plugin_javascript/src/dependency/esm/provide_dependency.rs:79

Run with COLORBT_SHOW_HIDDEN=1 environment variable to disable frame filtering.
Run with RUST_BACKTRACE=full to include source snippets.

[chenjiahan]

Sorry for the late reply, this has been fixed by Rspack, see https://github.com/web-infra-dev/rspack-sources/pull/156 for more details.