Rollup vs. Webpack and impact of terser options

[krausest]

Updating to node v18.15 wasn't really smooth, which was also due to the terser configuration. This lead to the question: Is there a difference in terms of performance between a blank terser configuration and the complex options?

Many implementations use a terser configuration like the following:

optimization: {
		minimizer: [
			new TerserPlugin({
				terserOptions: {
					parse: {
						// we want terser to parse ecma 8 code. However, we don't want it
						// to apply any minfication steps that turns valid ecma 5 code
						// into invalid ecma 5 code. This is why the 'compress' and 'output'
						// sections only apply transformations that are ecma 5 safe
						// https://github.com/facebook/create-react-app/pull/4234
						ecma: 8,
					},
					compress: {
						ecma: 5,
						warnings: false,
						// Disabled because of an issue with Uglify breaking seemingly valid code:
						// https://github.com/facebook/create-react-app/issues/2376
						// Pending further investigation:
						// https://github.com/mishoo/UglifyJS2/issues/2011
						comparisons: false,
					},
					mangle: {
						safari10: true,
					},
					output: {
						ecma: 5,
						comments: false,
						// Turned on because emoji and regex is not minified properly using default
						// https://github.com/facebook/create-react-app/issues/2488
						ascii_only: true,
					},
				},
				// Use multi-process parallel running to improve the build speed
				// Default number of concurrent runs: os.cpus().length - 1
				parallel: true
			}),
		]
	},

vs.

	optimization: {
		minimize: true,
		minimizer: [
			new TerserPlugin({}),
		]
	},

Trying to update I developed sympathies with rollup, since it just worked with node v18.15. Is there a runtime performance difference between webpack and rollup?

The following table shows the results for the same react hooks implementations (react-hooks-v18.2.0) with the complex terser configuration, the minimal terser configuration (react-hooks-no-terser-magic-v18.2.0) and a version using rollup and the minimal terser configuration (react-hooks-rollup-v18.2.0):

The picture shows that the effect of the terser configuration and rollup can be ignored (at least for react).

[krausest]

If the geometric mean ist within 0.2 from the old run I'd say performance is equal between runs.
With that criterion I took a look at implementations that have a larger difference. On the left is the minimal config and on the right the long config:

As one can see performance is even better for same frameworks.

On exception is react-rxjs. After the first run it was slower with the new config:

After playing a bit with the options it turned out that react-rxjs gave the results from the first screenshot. Looks like react-rxjs has more noise. Since the last measurement with the minimal config was within the range of the long config I switched to the minimal config for react-rxjs as well.

Here's a screenshot of all relevant frameworks with minimal config:

Here's a screenshot of all relevant frameworks with long config:

[krausest]

I did the same for rollup, which was also very interesting. Most implementations produced the same output without any config. sifrr needs a special config to work. Three frameworks had different output without terser options, but the same performance (left: empty terser config, right: original config):