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"

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"

• javascript
• vue.js
• vuejs3
• vite
• code-splitting

• Could you please [create a Minimal, Reproducible Example]? Codes are not split into chunks in the template created by pnpm create vite my-vue-app --template vue. – ouuan Commented Feb 22, 2024 at 13:55

2 Answers 2

Use a rollup option

https://rollupjs/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.

I used this vite-configuration to get a single js (and css file) once:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

The output: part is the important one.