javascriptvue.jsvuejs3vitecode-splitting

Vue & Vite disable code splitting / chunking

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:

Solution

  • 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.