在 Vue.js + Vite.js 中禁用代码分割（块）

Question

如何在构建项目时使用 Rollup.js 禁用 Vue.js + Vite.js 中的分块？

我尝试了这样的方法，但对我不起作用：

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                manualChunks: {}
            }
        }
    }
})

Answer 1

这对我有用（对于 React，我认为它也应该适用于 Vue）：

import { defineConfig } from 'vite' // 2.8.0
import react from '@vitejs/plugin-react' // 1.0.7

export default defineConfig ({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {}
      },
    },
  },
})

Answer 2

似乎 Rollup 有选项（

output.inlineDynamicImports

）：

这将内联动态导入，而不是创建新的块来创建单个包。仅当提供单个输入时才可能

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      output: {
        inlineDynamicImports: true
      },
    },
  },
})