How to enable automatic code splitting in library mode like webpack has?

[Anubarak]

In webpack you can easily enable automatic code splitting https://webpack.js.org/guides/code-splitting/#dynamic-imports

 const path = require('path');

 module.exports = {
   mode: 'development',
   entry: {
     index: './src/index.js',
   },
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

function getComponent() {

  return import('lodash')
    .then(({ default: _ }) => {
      const element = document.createElement('div');

      element.innerHTML = _.join(['Hello', 'webpack'], ' ');

      return element;
    })
    .catch((error) => 'An error occurred while loading the component');
 }

getComponent().then((component) => {
  document.body.appendChild(component);
});

this will automatically create multiple files. I searched for hours now but was not able to find a way to automatically achieve the same in Vite (+Vue). My current config is:

import {fileURLToPath, URL} from 'node:url';
import {resolve} from 'path';
import {defineConfig} from 'vite';
import basicSsl from '@vitejs/plugin-basic-ssl';
import checker from 'vite-plugin-checker';
import vue from '@vitejs/plugin-vue2'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        checker({
            typescript: true,
            eslint: {
                lintCommand: 'eslint --ext .js,.vue,.ts src'
            },
            overlay: true
        }),
        basicSsl(),
    ],
    optimizeDeps: {
        force: true
    },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    build: {
        outDir: resolve(__dirname, '../some/dir'),
        emptyOutDir: true,
        lib: {
            entry: resolve(__dirname, 'src/main.ts'),
            name: 'Site',
            formats: ['umd'],
            fileName: 'site',
        },
    },
});

Is there any way to achieve the same?

[Anubarak]

I made a minimal repo here https://github.com/Anubarak/vite-code-splitting

Maybe it is easier to help with that

[Anubarak]

is this still not possible?

[ccreusat]

Hi @Anubarak

I did this in my library

export default defineConfig({
  build: {
    lib: {
      entry: {
        index: resolve(__dirname, "src/index.ts"),
      },
      formats: ["es", "cjs"],
    },
    rollupOptions: {
      output: {
        preserveModules: true,
        preserveModulesRoot: "src",
      },
      external: [
        ...Object.keys(dependencies),
        ...Object.keys(peerDependencies),
      ],
    },
  },
  plugins: [react()],
});

Hope it helps!