如何在Vite开发模式下禁用ES模块并启用整体打包？

Vite默认开发模式基于原生ES模块按需加载，这是它快速热更新的核心，但在大型代码仓库中确实会因文件数量过多导致浏览器网络面板卡顿。以下是可行的解决思路：

1. 开发模式下强制合并打包（牺牲部分开发效率） #

Vite没有直接提供禁用ES模块的开关，但可以通过配置让开发环境使用生产打包逻辑，将代码合并为少数文件。在vite.config.js中添加条件配置：

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  if (mode === 'development') {
    return {
      build: {
        lib: {
          entry: './src/main.js', // 替换为你的项目入口文件
          formats: ['es'],
          fileName: 'bundle'
        },
        outDir: 'dev-dist',
        watch: {
          include: 'src/**'
        }
      }
    };
  }
  // 生产环境常规配置
  return {
    // ...你的生产模式配置
  };
});

运行命令vite build --mode development --watch即可在开发时持续打包合并文件，减少网络请求数量。但此方法会失去Vite的快速HMR能力，代码修改后需等待重新打包，开发效率会下降。

2. 强化依赖预构建优化 #

虽然无法完全禁用ES模块，但可以通过优化依赖预构建减少请求数。Vite默认会预构建依赖，你可以通过配置强化效果：

export default defineConfig({
  optimizeDeps: {
    include: ['lodash', 'axios'], // 强制预构建指定高频依赖
    esbuildOptions: {
      minify: true,
      target: 'es2015'
    }
  }
});

预构建会将零散的依赖文件合并为少数几个包，有效减少网络请求量，缓解DevTools卡顿。

3. 利用浏览器DevTools过滤功能（临时缓解） #

无需修改项目配置，直接在Chrome DevTools网络面板中使用过滤器：

• 点击「过滤器」选择仅显示JS类型文件
• 启用「隐藏数据URL」选项，过滤掉大量小体积的内联文件
• 使用搜索框筛选特定目录或文件名，只关注业务代码请求

总结 #

Vite的设计初衷就是基于原生ES模块实现快速开发，没有官方的“禁用ES模块”选项。如果必须合并文件，第一种方法可实现但牺牲开发效率；更推荐结合依赖预构建和DevTools过滤的方案，平衡开发速度与面板流畅度。

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