Discussion: Which bundler to use (Webpack, Rollup, Parcel, esbuild...)

[imtsuki]

Currently create-react-app suffers from slow compilation. On my personal laptop (MacBook Pro 13' late 2017) it usually takes up to ~1 min to do a cold start, which is kind of unacceptable for this size of apps. People (including @promer94 ) are suggesting we should move to another bundler. I think we should discuss which bundler we should move to:

There are several choices:

• Webpack: which create-react-app is using under the hood. Slowest but has the best compatibility. Also, the configuration is a nightmare.
• Rollup: seems like an "average".
• Parcel: Relatively fast compared to other bundlers.
• esbuild: Fastest but... Is anybody actually using this in a serious project?
• (Please add another)

[imtsuki]

CC @lidangzzz @AGDholo

[AGDholo]

A digression, The new project of vuejs (also the bundler of vue3(not default)) is using esbuild and Rollup: https://github.com/vitejs/vite

[AGDholo]

• Webpack: Do we need strong compatibility? Could the mental burden of configuring webpack offset the positive benefits of compatibility? If we're going for speed, we need to make a trade-off between compatibility and speed.
• parceljs: The program looks like it's going nowhere, at least for now. In other respects, does it have any obvious advantages over rollup or esbuild for us to choose it?

I have no professional builder development experience, so the above comments are just my immature views.

[promer94]

• rollup is usually used for building javascript library rather then application. It has less plugins to support frontend applications development such as dev-server, hot-module-replacement.
• vite is awesome, but it does not perform any compatibility-oriented code transforms by default. We currently need to use worker-loader which is a webpack plugin. Vite does not support that
• I think actually we don't have to maintain a complex webpack configuration by ourself. The community already have some good bundlers built on the top of webpack(create-react-app is one of them), we can make use of them. We need a configuration which will not compile node_modules
• I have already made a example using Poi in my fork

[promer94]

https://bundlers.tooling.report/

[hirohe]

currently vite is support directly import web workers

[AGDholo]

vite use esbuild,

For now, the packaging solution esbuild,snowpack is in line with the trend

[AGDholo]

In vite preparation, the switch will be done after the rendering issues are resolved.

https://github.com/Hedgehog-Computing/hedgehog-lab/tree/feat/vite