Package Bundlers (guide covers webpack, vite, rollup)

Why is Package Bundling Important?

• Multiple files rolled up into a single bundle —> reduced HTTP requests —> faster loading time

• Optimized caching: changes downloaded when bundle version changes

Popular package bundlers:

Webpack: key features

• Code Splitting: Splits code into smaller chunks to be loaded on demand.

• Loaders and Plugins: Process and transform files (e.g., CSS, images) before they are added to the bundle.

• Hot Module Replacement (HMR): Allows modules to be updated without a full reload.

Vite: key features

• Lightning-Fast Hot Reloading: Uses native ESM in development, leading to faster startup times.

• Optimized Production Build: Uses Rollup for production builds, ensuring efficient output.

Rollup: key features

• Tree Shaking: Efficiently removes unused code to reduce bundle size.

• ES Module Support: Works natively with ES modules, providing efficient bundling for modern JavaScript.

• Simple Configuration: Less complex than Webpack, with a focus on minimalism.