Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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:

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

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search