What does a bundler such as Vite or webpack do?
Options
- It bundles files for the browser, with a dev server (Correct option)
- It runs the database that the app depends upon
- It replaces the browser that the users install
- It writes the tests of the app for the developers
Answer
It combines and optimizes many JS/CSS/image files (and converts JSX/TypeScript) into a few files the browser can load efficiently, and offers a dev server with hot reload
Why
Browsers cannot run JSX or TypeScript, and loading hundreds of small files is slow.
A bundler follows imports from your entry file, transpiles the code, minifies it, splits it into chunks and outputs optimized static files.
During development it serves your app and refreshes it instantly when you save (hot module replacement). Vite is the modern default for React; webpack is older; Create React App is deprecated.
Remember
Bundler = turns your source into optimized browser files.