Bundling — Vite intro

Modern front-end code is written as many small modules — components, utilities, styles — but shipping dozens of separate files to a browser is inefficient, and browsers historically could not handle modern syntax and module systems directly. Build tools bridge this gap, transforming and packaging your source into optimised files the browser can load fast. Vite is the modern, fast tool that has become the default for new front-end projects. Bundling is the core idea: combining many module files into a small number of optimised files, minifying them by stripping whitespace and shortening names, and dropping code that is never used. The result is far fewer, far smaller files for the browser to download — a direct improvement in load performance. Vite's distinctive contribution is splitting development and production into two different strategies. During development, it serves your modules directly over the browser's native ES Module support without bundling them upfront, which makes the dev server start almost instantly no matter how large the project, and makes edits appear immediately through hot module replacement. For production, Vite switches strategy entirely, using a bundler to combine, minify, and tree-shake everything into optimised output. The two modes serve different goals — instant feedback while developing, maximally optimised files when shipping — and Vite handles the switch transparently. This lesson covers what bundling is and why it matters, how Vite's dev and build modes differ, and the practical workflow — scaffolding a project, running the dev server, producing and verifying a production build. It also surfaces front-end-specific concerns like never bundling secrets into client code, completing the tooling picture for the front-end half of the MERN stack.