[Bug]: Rspack is slower than Webpack when building a Vue project

[zavierkolten]

System Info

System: OS: macOS 14.4.1 CPU: (11) arm64 Apple M3 Pro Memory: 98.67 MB / 18.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.14.0 - ~/Library/Caches/fnm_multishells/65932_1721998729177/bin/node npm: 10.7.0 - ~/Library/Caches/fnm_multishells/65932_1721998729177/bin/npm pnpm: 9.6.0 - ~/Library/Caches/fnm_multishells/65932_1721998729177/bin/pnpm bun: 1.1.18 - ~/.bun/bin/bun Browsers: Chrome: 126.0.6478.183 Edge: 127.0.2651.74 Safari: 17.4.1 npmPackages: @rspack/cli: 1.0.0-beta.0 => 1.0.0-beta.0 @rspack/core: 1.0.0-beta.0 => 1.0.0-beta.0

Details

On my computer, the build times for Rspack and Webpack are as follows:

Reproduce link

https://github.com/zavierkolten/bundler-compare

Reproduce Steps

pnpm i

# webpack
pnpm w-build

# rspack
pnpm r-build

[hardfist]

because you use babel-loader and you use thread-loader with babel-loader in webpack

[zavierkolten]

because you use babel-loader and you use thread-loader with babel-loader in webpack

Because our real projects need Vue JSX 😂, removing the babel-loader didn't make Rspack any faster since this repo does not use JSX yet. Plus, the gap between Rspack and Webpack shouldn't be something that can be bridged by just adding a thread-loader, am i right?

[chenjiahan]

Some tips:

• Remove @babel/preset-env because it is slow and Rspack's swc-loader can downgrade the syntax.
• Try to use swc-plugin-vue-jsx so you do not need babel-loader.

[zavierkolten]

Some tips:

• Remove @babel/preset-env because it is slow and Rspack's swc-loader can downgrade the syntax.
• Try to use swc-plugin-vue-jsx so you do not need babel-loader.

Thank you for your help~ However, I have actually already tried using this SWC plugin and encountered some issues that I am unable to resolve 👀.

The relevant issue is this one: https://github.com/g-plane/swc-plugin-vue-jsx/issues/11

[chenjiahan]

@zavierkolten Can you provide a reproduction for the SWC plugin issue?

[zavierkolten]

@zavierkolten Can you provide a reproduction for the SWC plugin issue?

@chenjiahan The repository and reproduction steps are detailed in this issue 🤝： https://github.com/g-plane/swc-plugin-vue-jsx/issues/11

[CPunisher]

@zavierkolten try this swc loader config

parser: {
  syntax: "typescript",
  tsx: true,
}

[zavierkolten]

@CPunisher Nothing changed after setting it on my machine.

[CPunisher]

@zavierkolten The only thing I change in your config is adding tsx: true (Note that you should config tsx for typescript and jsx for ecmascript). On the other hand, from your pnpm-lock.yaml, I find that you're using another npm registry that I can't access to. Therefore I remove pnpm-lock.yaml and reinstall everything with default npm registry. Maybe there is something wrong with the registry?