Module Bundlers Overview

Module Bundlers

Bundlers (Vite, webpack, Rollup, esbuild) combine modules into optimized files for the browser. They handle tree shaking, code splitting, and asset processing.

Example

// vite.config.js
import { defineConfig } from "vite";
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
        },
      },
    },
  },
});

// Use native ES modules in development:
// Vite serves unbundled modules directly to the browser
// — no slow rebuild step during development

JAVASCRIPT

Full Editor

Pro Tip

Vite uses native ES modules in development (instant server start) and Rollup for optimized production builds.

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned