why do we still need module bundlers when we have native ESM support in browsers now

Question

why do developers still need to use module bundlers like rollup and webpack when browsers now support native ESM

Answer 1

You don't need module bundlers - developers were able to write JS even before modules and Webpack existed - but they can still make the process easier.

• Large applications require a lot of code. In a reasonably structured codebase, this will mean many files and modules. If the client's browser has to make lots of requests to download every individual module from the server, this can take some time and can make the application seem to take a long time to start up. If the server is using HTTP/1.1, there's a limit to the number of concurrent ongoing requests. (HTTP/2 has no such limitation, but many servers haven't implemented it)
• Having a process to transform input source code allows for neat transformations and pre-processors that can't be done (easily) on the client-side alone. For example, as part of the bundling process, you can choose to:
  • minify the code for production (to save on bandwidth)
  • use Babel to transpile the code down to whatever version of EcmaScript you wish to support, without having to dumb down your source code or do it manually.
  • transpile React's JSX syntax to plain JavaScript
  • write (neat, concise) SASS which gets transformed into plain CSS