{
    "slug": "js_bundling_concepts",
    "term": "JavaScript Bundling — Vite, Webpack, esbuild",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "Bundlers combine JS modules into optimised files served by PHP — Vite for dev speed, Webpack for complex pipelines, esbuild for raw performance.",
    "long": "PHP serves static assets (JS, CSS) either directly or via a bundler output. Vite (Rollup-based): instant dev server with HMR, fast production builds — recommended for new projects. Webpack: mature, rich plugin ecosystem, complex config — used in Laravel Mix. esbuild: Go-based, 10-100x faster than Webpack, minimal config. Laravel Vite plugin: integrates Vite with PHP's asset manifests. Bun: JS runtime + bundler. All output a manifest.json (or similar) mapping source files to hashed production filenames PHP uses.",
    "aliases": [
        "Vite",
        "Webpack",
        "esbuild",
        "bundler",
        "Laravel Mix",
        "Laravel Vite"
    ],
    "tags": [
        "javascript",
        "tooling",
        "php-integration"
    ],
    "misconception": "PHP can serve unbundled JavaScript module files directly in production — browsers require many HTTP/2 requests for unbundled ES modules; a bundler reduces this to a few optimised files with tree-shaking and minification.",
    "why_it_matters": "PHP projects using modern JavaScript need a bundler to produce optimised assets — understanding Vite's asset manifest lets PHP correctly reference hashed filenames for cache-busting.",
    "common_mistakes": [
        "Serving unbundled node_modules in production",
        "Not using the asset manifest for PHP template references",
        "Committing dist/ folder to git instead of building in CI"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_package_json",
        "js_module_patterns",
        "nginx_php_fpm_config"
    ],
    "prerequisites": [
        "js_module_patterns",
        "js_package_json"
    ],
    "refs": [
        "https://vitejs.dev/guide/backend-integration.html"
    ],
    "bad_code": "<!-- Referencing src file directly — no cache busting, no minification: -->\n<script src=\"/resources/js/app.js\"></script>",
    "good_code": "<!-- Vite manifest.json: {\"resources/js/app.js\": {\"file\": \"assets/app.Abc123.js\"}} -->\n\n<!-- PHP reads manifest for hashed filename: -->\n<?php\n$manifest = json_decode(file_get_contents(public_path('build/manifest.json')), true);\n$appJs = $manifest['resources/js/app.js']['file'];\n?>\n<script src=\"/build/<?= $appJs ?>\" type=\"module\"></script>\n<!-- Or use Laravel's @vite('resources/js/app.js') directive -->",
    "quick_fix": "Use Laravel's @vite() directive or read the Vite manifest.json in PHP to reference correctly hashed asset filenames",
    "severity": "medium",
    "effort": "medium",
    "created": "2026-03-17",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_bundling_concepts",
        "html_url": "https://codeclaritylab.com/glossary/js_bundling_concepts",
        "json_url": "https://codeclaritylab.com/glossary/js_bundling_concepts.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[JavaScript Bundling — Vite, Webpack, esbuild](https://codeclaritylab.com/glossary/js_bundling_concepts) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_bundling_concepts"
            }
        }
    }
}