Vue & Vite disable code splitting / chunking

Question

I have built a small application in Vue/TypeScript and with Vite and i am trying to build the files using vite build but this is chunking the files. The file is to be placed on other peoples website with just a div tag and a script tag. The only issue with this is that Vite is splitting the JS files into chunks.

this is my basic config file

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({ defineModel: true }),
    cssInjectedByJsPlugin()
  ],
  build: {
    emptyOutDir: false,
    rollupOptions: {
      output: {
        manualChunks: {},
      },
    }
  },
})

I have also tried setting manualChunks to undefined but had no luck with this either. I've read some articles and other posts saying that this is the correct way but I am struggling and any help would be much appreciated.

build script is vite build

setup includes:

• vite: "^5.0.11"
• vite-plugin-css-injected-by-js: "^3.4.0"
• vue: ^3.3.11"

Answer 1

Use a rollup option

https://rollupjs.org/configuration-options/#output-inlinedynamicimports

output:{
  inlineDynamicImports: true
}

This will inline dynamic imports instead of creating new chunks to create a single bundle. Only possible if a single input is provided. Note that this will change the execution order: A module that is only imported dynamically will be executed immediately if the dynamic import is inlined.