5

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"
1
  • 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

4

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.

3
  • 1
    I tried the other options but this is the option that seemed to work. I had to camel case the key tho to inlineDynamicImports: true for it to work. Thank you for your help.
    – Bryan88
    Commented Feb 22, 2024 at 20:20
  • 1
    @Bryan88 copied from the url, lost the camel case, sorry, a sloppy copy-paste Commented Feb 22, 2024 at 20:44
  • haha, not a problem! Again, thank you for your help! Very much appreciated
    – Bryan88
    Commented Feb 23, 2024 at 8:05
-2

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.

2
  • I suggest keeping the hashes in the file names. They are useful for asset caching.
    – ouuan
    Commented Feb 22, 2024 at 14:13
  • 1
    @ouuan In general you are right of course - but the poster said that the script is going to be loaded from other websites. In that case the name has to stay the same all the time otherwise you have to change it on the other websites all the time.
    – Luckyfella
    Commented Feb 22, 2024 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.