如何让Vite自动为每个入口生成独立Vendor文件（无需手动配置）

你可以通过配置Vite的Rollup构建选项，利用manualChunks函数自动根据依赖的入口归属拆分Vendor文件，无需手动指定每个依赖。修改后的配置如下：

import laravel from 'laravel-vite-plugin';

export default {
    plugins: [
        laravel({
            input: [
                'resources/css/admin.css',
                'resources/css/public.css',
                'resources/js/admin.js',
                'resources/js/public.js'
            ],
            refresh: true,
        })
    ],
    build: {
        rollupOptions: {
            output: {
                // 定义生成的chunk文件名格式
                chunkFileNames: 'assets/js/vendor-[name].js',
                // 自定义chunk拆分逻辑
                manualChunks(id) {
                    // 只处理node_modules中的第三方依赖
                    if (!id.includes('node_modules')) return;

                    // 获取当前依赖被哪些入口文件引用
                    const importers = this.getModuleInfo(id)?.importers || [];
                    // 从引用入口中提取标识（admin或public）
                    const entryTags = new Set(
                        importers.map(importer => {
                            if (importer.includes('admin.js')) return 'admin';
                            if (importer.includes('public.js')) return 'public';
                            return null;
                        }).filter(Boolean)
                    );

                    // 仅被单个入口引用的依赖，归入对应入口的Vendor文件
                    if (entryTags.size === 1) {
                        return `vendor-${entryTags.values().next().value}`;
                    }
                    // 若依赖被多个入口引用，可选择生成共享Vendor（返回'vendor-shared'）或不拆分（默认打包到各入口）
                }
            }
        }
    }
};

配置说明 #

• chunkFileNames：指定生成的Vendor文件命名规则，确保每个入口对应的Vendor文件带有明确标识。
• manualChunks函数：
  1. 先过滤出第三方依赖（仅处理node_modules中的文件）；
  2. 通过getModuleInfo获取当前依赖的引用入口，判断该依赖仅属于admin还是public入口；
  3. 仅被单个入口引用的依赖，会被打包到对应的vendor-admin.js或vendor-public.js中；
  4. 若存在被两个入口共享的依赖，可根据需求调整逻辑：返回'vendor-shared'生成共享Vendor文件，或保持默认让依赖分别打包到两个入口中。

这样配置后，Vite会自动分析每个入口的依赖归属，将axios、highlight.js这类仅被admin.js引用的依赖打包到vendor-admin.js，vue、jszip这类仅被public.js引用的依赖打包到vendor-public.js，完全无需手动维护依赖列表。

内容的提问来源于stack exchange，提问作者johnRivs