Vite: How to create separate bundles for large libraries

Vite rolls up all your code into a single bundle. Sometimes it's better to build large libraries as separate bundles. You also might want to bundle rarely used libraries separately so you can lazy load the import. This is how you do it.

Vite config to create separate bundles

In your vite.config.ts file add the following:

export default defineConfig(() => {
  return {
    build: {
      rollupOptions: {
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules')) {
              if (id.includes('large-library')) {
                return 'vendor_large_library'
              } else if (id.includes('lodash')) {
                return 'vendor_lodash'
              return 'vendor' // all other package goes here
            }
          },
        },
      },
    },
    // all your other config
    //...

    // The analyse plugin is also useful if your checking bundle files
    plugins: [ analyze({ summaryOnly: true })],
  }
})