The non-minified default bundle is no longer mangled, making it more readable and preserving inline comments.

When compiling assets with Sprockets, Sprockets needs to decide which top-level targets to compile, usually application.css, application.js, and images.

But seriously, give snowpack a read to understand the benefits of leaning on standard esm imports, allowing you to avoid a bundling process entirely.

I don't need to support non-esm browsers for most projects and I really like the idea of a super light build process. By removing the complexity of configuration and the overhead of bundling, svelvet makes the development process an optimal experience for myself and hopefully others

It replaces heavier, more complex bundlers like webpack or Parcel in your development workflow.

Now just use the browserify command to build a bundle starting at main.js:

Tree-shaking is the process of analyzing the code files that are required to run your application and then including only code that is actually used by your application.

Many people recently are complaining about bundler performance. But I don’t think any tool is going to solve performance problems. Bundlers can try innovative ideas such as multi-threading and improved caching, but you’re always going to hit a limit. If you’re having performance problems, it’s more likely because you’re not keeping tabs of what you’re importing, and haven’t considered splitting your project into multiple projects.

Something to be aware of when you’re using any bundler: there’s very little consistency when it comes to how modules are packaged in NPM. It’s incredibly frustrating, especially considering many of us write modules these days using ESM. Here’s some various problems that come up:

Rollup also does something very different compared to the other bundlers. It only tries to achieve one simple goal: Bundle ES modules together and optimise the bundle.

A bundler can help transform assets into something more manageable than manually maintaining them.

Why do we use bundlers again?Historically, bundlers have been used in order to support CommonJS files in the browser, by concatenating them all into a single file. Bundlers detected usages of require() and module.exports and wrap them all with a lightweight CommonJS runtime. Other benefits were allowing you to serve your app as a single file, rather than having the user download several scripts which can be more time consuming.

I like bundlers. Correction, I like fast bundlers. Bundlers that help me tighten the feedback loop and help me focus on the code. Not bundlers that make me doze off, waiting for the recompilation to finish, while my CPU fan sounds like an old hair dryer.

The greatest advantage Webpack has over these tools is Hot Module Replacement (HMR). In short, it provides a way to patch the browser state without a full refresh. We'll discuss it in more detail when we go through the React setup