1

Is there a way to enable code-splitting in Vite for libraries like webpack does?

This is my current setup

import {fileURLToPath, URL} from 'node:url';
import {resolve} from 'path';
import {defineConfig} from 'vite';

export default defineConfig({
    optimizeDeps: {
        force: true
    },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    build: {
        outDir: resolve(__dirname, 'some/path'),
        emptyOutDir: true,
        lib: {
            entry: resolve(__dirname, 'src/main.ts'),
            name: 'Site',
            formats: ['umd'],
            fileName: 'site',
        },
    },
});

and it won't automatically code split my files - instead it only creates one single file. Only if I change formats: ['umd'], to formats: ['cjs'], it will work. However I would like to use umd mode

I made a minimal production repo: https://github.com/Anubarak/vite-code-splitting. If someone is able to produce multiple output JS files instead of just one with umd please let me know how.

Aluan Haddad
  • 29,886
  • 8
  • 72
  • 84
Robin Schambach
  • 617
  • 3
  • 11
  • 26

1 Answers1

2

Seems that's impossible, when I forced dynamicInlineImports: false I'd got an error:

Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds

Alexander Nenashev
  • 8,775
  • 2
  • 6
  • 17