如何在Nuxt开发模式下启用代码分块（chunks）？

问题原因 #

• 开发模式下Vite采用ES模块原生加载机制，不会像生产构建那样将文件打包为chunk，而是直接请求单个编译后的文件（.vue、.ts会被实时编译为JS模块），这是为了配合HMR实现快速热更新——修改单个文件时无需重新打包整个chunk，仅替换对应模块。
• 你看到的.vue、.ts请求并非原始文件，是Vite实时编译后的产物，属于开发模式下的正常行为。

启用代码分块的正确方法 #

1. 生产环境：默认自动分块，可自定义规则 #

Nuxt + Vite在生产构建时会自动完成代码分块：

• 拆分node_modules依赖为独立chunk
• 按路由页面拆分chunk
• 自动识别异步加载的组件/模块

你之前配置的manualChunks未生效，是因为该配置仅作用于生产构建阶段，开发模式下Vite会忽略build相关配置。如果需要自定义生产分块规则，可调整配置如下：

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            // 将node_modules依赖按包名拆分
            if (id.includes('node_modules')) {
              return `vendor/${id.split('node_modules/')[1].split('/')[0]}`;
            }
            // 将components目录下的组件单独拆分
            if (id.includes('components/')) {
              return `components/${id.split('components/')[1].split('.')[0]}`;
            }
          }
        }
      }
    }
  }
})

配置后执行npm run build即可看到生产环境的分块效果。

2. 开发环境：优化依赖请求（业务代码仍保持单文件） #

如果开发模式下依赖请求过多影响体验，可通过optimizeDeps预打包常用依赖，减少请求数：

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ['vue', 'vue-router', 'pinia'] // 指定需要预打包的依赖包
    }
  }
})

注意：开发模式下业务代码（自定义.vue、.ts文件）依然会以单个文件形式加载，这是HMR的必要条件，无法强制打包为chunk。

内容的提问来源于stack exchange，提问作者Denis Bookreev