[Bug]: RSpack produces inflated bundle sizes as compared to other bundlers in a few cases

[pastelsky]

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 102.23 MB / 32.00 GB
    Shell: 3.7.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.17.1 - ~/Library/Caches/fnm_multishells/38909_1717317465477/bin/node
    Yarn: 4.2.2 - ~/Library/Caches/fnm_multishells/38909_1717317465477/bin/yarn
    npm: 10.8.1 - ~/Library/Caches/fnm_multishells/38909_1717317465477/bin/npm
    Watchman: 2024.05.02.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 125.0.6422.141
    Safari: 17.4.1
  npmPackages:
    @rspack/core: ^0.7.0 => 0.7.0

Details

Consider a blank project that only has one dependency — underscore.

import * as _  from 'underscore'

console.log(_)

Bundling the project using rspack or a fresh rsbuild project produces an output —

  dist/index.html                     0.32 kB    0.22 kB
  dist/static/js/index.919c8a90.js    1.4 kB     0.73 kB
  dist/static/js/718.655677ba.js      42.3 kB    11.2 kB

This is 42 KB minified.

However, an actual ESM minified build of rsbuild is only 25KB minified — https://unpkg.com/browse/underscore@1.13.6/underscore-esm-min.js

RSpack might be in-effecient at packing multiple small functions into a smaller space.

Reproduce link

https://github.com/pastelsky/rspack-repro-underscore

Reproduce Steps

1. Run yarn install
2. Run yarn build
3. Observe the built sizes

[CPunisher]

webpack/rspack generates runtime code for every small module. Maybe concatenateModules could help.

[pastelsky]

This build runs in production mode — so I assumed module concatenation would be on.

[CPunisher]

🤔 I manually set concatenateModules to true on top of your config and it did work.

  File                                        Size       Gzipped    
  rsbuild-dist/index.html                     0.32 kB    0.22 kB
  rsbuild-dist/static/js/index.3a9fa5b5.js    1.4 kB     0.74 kB
  rsbuild-dist/static/js/712.32ef6620.js      26.4 kB    8.0 kB

  Total size:  28.1 kB
  Gzipped size:  8.9 kB

[pastelsky]

Interesting, I don't see such an option documented here — https://www.rspack.dev/config/optimization Where is this documented?

Also, would you know why this isn't enabled by default?

[CPunisher]

It's true that rspack document is not always up-to-date, which is a problem(I don't know how the team will improve this workflow in the future).

For now, we know rspack aims for alignment with webpack, so you may find some available configuration in webpack document such as https://webpack.js.org/configuration/optimization/#optimizationconcatenatemodules.

As for why it's not enabled by default in production mode, I guess this option was forgotten to be adjusted at the end of the experimental phase.

rspack: https://github.com/web-infra-dev/rspack/blob/4fcc42ce9bef0048901308205b5a188a1d7ddd50/packages/rspack/src/config/defaults.ts#L916

webpack: https://github.com/webpack/webpack/blob/8241da7f1e75c5581ba535d127fa66aeb9eb2ac8/lib/config/defaults.js#L1152

6769

I'll make a simple pull request.

[hardfist]

@CPunisher concatenateModules is not enabled in production because we're still testing it, we will enable it by default in production when we think it's production ready

[CPunisher]

@hardfist 😄 That's what I'm going to ask. After I changed the default configuration, there are some test cases with strange errors.