如何配置Vite在开发环境打包源码而非加载单个网络模块？

针对大型项目开发或Cypress测试场景中，Vite按需加载导致的大量HTTP请求延迟问题，以下是几种实现应用源码（如src目录）预打包的方案：

方案一：用开发模式构建产物替代Dev Server #

直接使用Vite的构建命令生成开发环境的打包产物，类似Webpack的开发打包：

1. 运行构建命令：

   vite build --mode development
   

   该命令会将整个应用源码打包为少量chunk文件，同时保留sourcemap方便调试。
2. 用预览服务器运行产物：

   vite preview
   

3. 配置Cypress直接指向预览服务器地址（如http://localhost:4173）。

优点：无需额外配置，打包逻辑成熟，测试时无需重复加载大量文件；缺点：代码改动后需重新构建，失去Dev Server的实时热更新能力。

方案二：强制将应用源码纳入依赖预打包流程 #

利用Vite的optimizeDeps配置，把应用源码模块当作依赖进行预打包：
在vite.config.js中添加以下配置：

export default {
  optimizeDeps: {
    // 匹配应用源码的所有文件，可根据实际情况调整匹配规则
    include: ['src/**/*.vue', 'src/**/*.js', 'src/**/*.ts'],
    // 配置Esbuild打包行为
    esbuildOptions: {
      bundle: true
    }
  }
}

优点：复用Vite原生预打包机制，无需额外工具；缺点：应用源码会和依赖打包在一起，调试时sourcemap的指向可能不够精准，动态导入的模块可能无法完全覆盖。

方案三：自定义插件实现完全可控的预打包 #

通过自定义Vite插件，用Esbuild单独打包应用源码，并替换Dev Server的模块解析逻辑：

import fs from 'fs/promises'
import { build } from 'esbuild'

export default function vitePluginPrebundleApp() {
  return {
    name: 'prebundle-app',
    // 服务器启动时执行打包
    async buildStart() {
      await build({
        entryPoints: ['src/main.js'], // 应用入口文件
        bundle: true,
        outfile: '.temp/app-bundle.js', // 临时打包产物路径
        platform: 'browser',
        sourcemap: true,
        treeShaking: false // 开发环境关闭摇树优化
      })
    },
    // 拦截自定义入口的请求
    async resolveId(id) {
      if (id === '/app-bundle.js') return id
    },
    // 返回打包后的文件内容
    async load(id) {
      if (id === '/app-bundle.js') {
        return await fs.readFile('.temp/app-bundle.js', 'utf-8')
      }
    }
  }
}

然后在vite.config.js中引入并使用该插件，同时将应用入口改为/app-bundle.js。

优点：完全自定义打包逻辑，可灵活控制chunk拆分、sourcemap等；缺点：需要自行维护插件，处理热更新、路径解析等细节，适合复杂场景。

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