Vue3+Vite项目如何正确配置移除打包生成的chunks文件

仅将manualChunks设为空对象无法禁用chunk拆分，是因为Vite和底层Rollup默认存在自动拆分逻辑：包括动态导入模块拆分、第三方依赖vendor拆分、异步CSS拆分，空配置不会覆盖这些默认规则。

完整可用配置 #

替换原有vite.config.js内容如下：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    // 关闭异步CSS拆分，避免生成独立CSS chunk，不需要可删除
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        // 核心配置：内联所有动态导入内容，禁止懒加载模块生成独立chunk
        inlineDynamicImports: true,
        // 覆盖默认manualChunks逻辑，完全禁用手动拆分规则
        manualChunks: () => undefined,
        // 统一输出文件命名规则，可选配置
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  }
})

配置项说明 #

• cssCodeSplit: false：Vite默认会为懒加载组件拆分独立CSS文件，开启该选项后所有样式会内联到JS入口中，不会生成单独的CSS资源文件
• inlineDynamicImports: true：原配置缺失的核心项，Rollup默认会将import()语法引入的懒加载模块（比如路由懒加载组件）拆分为独立chunk，开启后所有动态导入内容会被打包进入口文件
• manualChunks: () => undefined：比传空对象优先级更高，会直接覆盖Vite内置的第三方依赖拆分规则（Vite默认会将node_modules下的依赖拆分为vendor.js类的独立chunk，空对象无法覆盖该默认逻辑）

注意事项 #

• 该配置仅支持单入口应用，绝大多数Vue3单页项目都符合要求；多入口构建场景无法使用inlineDynamicImports，也无法完全消除chunk拆分
• 关闭chunk拆分后所有代码会合并到单个JS文件，会增大首屏加载资源体积、降低代码缓存复用率，仅适合有单文件输出强需求的场景（比如嵌入式脚本、单文件离线部署），普通生产环境项目不建议关闭拆分能力

内容的提问来源于stack exchange，提问作者m kh