javascript - Why does Vite compile a separate jQuery file even when chunking it in the vite.config.js file in Laravel 11 project

admin管理员组

文章数量:1186136

I'm developing an admin panel for a personal project using Laravel 11, and I'm using Vite (default with Laravel) for bundling assets. I've installed jQuery in my project, and while I have configured Vite to chunk it into a vendor file, I noticed that Vite is still generating a separate jQuery file.

Here's the chunking configuration in my vite.config.js file:

manualChunks: {
    "core": ["axios"],
    "vendor": ["alpinejs", "bootstrap", "jquery"],
    "charts": ["d3"],
},

But after compiling, the file jquery-[hash].js is still generated. The contents of the file look like this:

import {r as u, g as f} from "./vendor-Dg7k8igf.js";
function c(t, n) {
    for (var o = 0; o < n.length; o++) {
        const e = n[o];
        if (typeof e != "string" && !Array.isArray(e)) {
            for (const r in e)
                if (r !== "default" && !(r in t)) {
                    const a = Object.getOwnPropertyDescriptor(e, r);
                    a && Object.defineProperty(t, r, a.get ? a : {
                        enumerable: !0,
                        get: () => e[r]
                    })
                }
        }
    }
    return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, {
        value: "Module"
    }))
}
var s = u();
const i = f(s)
  , y = c({
    __proto__: null,
    default: i
}, [s]);
export {i as a, y as j};

Here is my full vite.config.js:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';
import pkg from './package.json';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/assets/admin/sass/app.scss',
                'resources/assets/admin/js/app.js',
                'resources/assets/frontend/css/app.css',
                'resources/assets/frontend/js/app.js',
            ],
            detectTls: 'admin-panel.test',
            refresh: true,
        }),
        manifestSRI(),
    ],

    optimizeDeps: {
        include: Object.keys(pkg.dependencies),
    },

    build: {
        emptyOutDir: true,
        sourcemap: "hidden",
        minify: true,
        chunkSizeWarningLimit: 1000, // 1MB
        rollupOptions: {
            output: {
                minifyInternalExports: true,
                manualChunks: {
                    "core": ["axios"],
                    "vendor": ["alpinejs", "bootstrap", "jquery"],
                    "charts": ["d3"],
                },
                entryFileNames: 'assets/[name]-[hash].js',
                chunkFileNames: 'assets/[name]-[hash].js',
                assetFileNames: 'assets/[name]-[hash].[ext]',
                format: 'esm'
            }
        }
    }
});

Problem:

Even though I have chunked jquery under the vendor chunk, a separate file for jQuery (jquery-[hash].js) is still being generated. This isn't the case for other vendor packages like alpinejs or bootstrap, which are being bundled correctly.

Could someone explain why this is happening and how I can ensure that jQuery is bundled with the rest of the vendor dependencies instead of being split into a separate file?

本文标签：