Build Tools & Bundlers (Vite, Webpack & CRA)
5 questions foundWhat does a build tool like Vite or Webpack actually do for a React project?
Beginner A build tool takes all your separate JavaScript, CSS, and image files and combines them into a small number of optimized files that a browser can load quickly. It also converts modern JSX and newer JavaScript syntax into a form that older browsers can understand.
// Starting a new React project with Vite
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
Real-world example A small business website is built with dozens of component files during development, and Vite combines them all into just a few small files before the site goes live, making the page load much faster for visitors.
Common follow-ups: Why can a browser not run raw JSX code directly without a build tool?;What is the difference between a development build and a production build?
Components & JSX;Deployment & Production Builds
Why has Vite become more popular than Create React App for starting new React projects?
Intermediate Vite starts a development server almost instantly because it only processes the files a page actually needs right away, instead of bundling the entire app upfront like older tools did. This means changes show up in the browser in a fraction of a second, which makes the whole development process feel much faster.
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});
Real-world example A large team working on a project with hundreds of components switches from Create React App to Vite and notices the development server now starts in under a second instead of taking almost a minute.
Common follow-ups: What made the older bundling approach slower to start compared to Vite?;How would you migrate an existing Create React App project to Vite?
Deployment & Production Builds;Code Splitting & Lazy Loading
What is code minification and why does a build tool perform it automatically?
Intermediate Minification removes unnecessary spaces, comments, and shortens variable names in the final JavaScript file, without changing what the code actually does. This makes the file much smaller so it downloads faster for people visiting the website, especially on slower internet connections.
// Before minification
function addNumbers(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
// After minification
function a(b,c){return b+c}
Real-world example An online news site reduces its main JavaScript file from two megabytes to under three hundred kilobytes after enabling minification, noticeably speeding up how fast the site loads for readers on mobile data.
Common follow-ups: Does minifying code make it harder to debug in production, and how do developers handle that?;What other optimizations does a build tool usually apply besides minification?
Deployment & Production Builds;Performance (memo/useMemo)
How do build tools split a React app into smaller chunks for faster page loads?
Advanced A build tool can split code so that a page only downloads the JavaScript it actually needs right away, instead of one giant file containing the entire app. Extra pieces of the app are downloaded later, only when the user actually navigates to that part of the site, using dynamic import statements.
// This creates a separate chunk that only loads when needed
const Dashboard = React.lazy(() => import('./Dashboard'));
function App() {
return (
<Suspense fallback={<p>Loading</p>}>
<Dashboard />
</Suspense>
);
}
Real-world example A large admin panel splits its rarely used settings page into its own chunk, so most users who never visit settings never have to download that extra code at all.
Common follow-ups: How do you decide which parts of an app are worth splitting into separate chunks?;What tool can you use to visualize how large each chunk of your app has become?
Code Splitting & Lazy Loading;Suspense & Concurrent Rendering
What is the difference between a development server and a production build in a React project?
Beginner A development server, started with a command like npm run dev, shows helpful error messages and updates the page instantly as you save changes, but the code is not optimized for speed. A production build, created with npm run build, produces smaller and faster files that are meant to be uploaded to a real server for actual visitors to use.
npm run dev // starts a local server for coding, with helpful errors
npm run build // creates a fast, optimized version ready for real users
Real-world example A developer tests their new feature using npm run dev on their own computer, and once everything works correctly, runs npm run build to create the final files that get uploaded to the live website.
Common follow-ups: Why should you never deploy the development version of a React app to real users?;What files does the production build actually create?
Deployment & Production Builds;Testing