Buildsystem aufräumen

[nOester]

Beschreibung

ToDos

• tbd

Acceptance Criteria

• tbd

[daniel-va]

I researched the relevant build systems for JS.
Here is a comprehensive list, alongside their pros and cons.

Webpack

Mainly here for completion's sake. Webpack is one of the oldest bundlers that is still in high use today.

Pros

• Very modular.
• Able to do basically anything you want it to.
• Supports advanced features like Code Splitting, HMR, and Tree Shaking.
• Very mature, with a large community and many available plugins.

Cons

• Complex configuration - even simple builds can require a configuration that is hard to understand and maintain.
• Steep learning curve.
• Slower than modern alternatives.

ESBuild

A bundler which focuses on performance. Claims to be the fastest bundler available, beating out competition like Parcel and Rollup by a large margin.

Pros

• Fast, like, very fast.
• Straightforward to setup and use.

Cons

• Rather new, and not as mature as other bundlers.
• Simplicity comes at the cost of lacking some features one might expect in a bundler.
• Not as fast of a plugin ecosystem as other alternatives.

Rollup

A feature-rich and rather mature bundler that focuses on modern JavaScript.

Pros

• Very good at production builds, even compared to other well-known bundlers.
• Supports various output formats, which makes it good for distributed products, like libraries.
• Simple configuration and use.
• Supports rather complex tasks like Tree Shaking and Code Splitting out-of-the-box.

Cons

• Doesn't focus on local development - it can still be used for it, but requires plugins for many need-to-have things, for example HMR.
• Requires manual configuration for a lot of things (e.g. CSS, static assets) - the configuration still remains simple, but still needs to be written.

Vite

A bundler that promises a fast and lean development experience. It focuses not only on the quality of production builds, but also on how improving your local development experience.

Pros

• Fast, even while developing locally.
• Feature-rich, supporting things like HMR, TypeScript and dynamic imports out-of-the-box.
• Based on Rollup, so it derives a lot of pros from it.
• Simple and minimal configuration
• Integrates well into well-known frameworks.

Cons

• Less modular than alternatives, whith a focus on supporting framework-based projects.
• Rather new and still growing, so it may not support everything you need.
• Steeper learning curve than some alternatives that focus on simplicity of use.

Parcel

A bundler that focuses on simplicity and speed. Promises a very easy setup, going as far as calling itself a zero-configuration bundler.

Pros

• Very little to no configuration needed for many things.
• Fast build times.
• Feature-rich, supporting things like HMR, Code Splitting and multiple languages out-of-the-box.
• Provides very developer-friendly build errors.

Cons

• Limited customization compared to other alternatives.
• Smaller ecosystem than some older and more mature alternatives.
• Performance-wise, can struggle with very large and complex projects.

Sources

• https://dev.to/olwiba/js-toolbox-2024-bundlers-and-test-frameworks-30f9
• https://tonai.github.io/blog/posts/bundlers-comparison/
• https://wpshout.com/best-javascript-build-tools-bundler

[vej-ananas]

We choose Vite.