在 vite 项目中排除依赖需要修改 vite.config.js，通过配置 optimizedeps.exclude 数组来指定不需要预构建的包名。这样做可以防止 vite 将大型或包含 commonjs 模块的库强行转换为 esm，从而提升启动速度并避免兼容性问题。
如何配置 exclude 数组以跳过特定包的预构建
直接回答：在配置文件中使用 optimizeDeps 选项下的 exclude 属性即可。该属性接受一个字符串数组，列出所有需要从预构建中跳过的包名。Vite 会保留这些包的原始格式，并在运行时由浏览器或 Node.js 原生处理。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
optimizeDeps: {
exclude: ['lodash-es', 'some-cjs-package'],
},
});
上述代码展示了最基础的配置方式。当你在项目代码中 import 了 lodash-es 时，Vite 不会尝试将其打包进 .vite/deps 目录，而是直接引用源码。这对于那些本身已经是 ESM 格式且体积较大的库非常有效，避免了不必要的转换开销。
为什么某些包必须被排除以及如何处理 CJS 冲突
直接回答：排除某些包是因为它们可能包含 CommonJS (CJS) 语法，或者其内部结构复杂导致 Vite 的预构建器（Rollup）无法正确解析。如果强行预构建，可能会导致运行时错误，如 require is not defined 或模块路径错误。
// package.json 示例
{
"dependencies": {
"react": "^18.0.0",
"moment": "^2.29.0"
}
}
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
optimizeDeps: {
// moment 是典型的 CJS 库，Vite 默认会尝试转换它
// 如果转换失败或性能不佳，应在此处排除
exclude: ['moment'],
},
});
在这个例子中，moment 是一个广泛使用的日期处理库，但它主要基于 CommonJS。Vite 试图将其转换为 ES 模块时可能会遇到路径解析问题。通过在 exclude 中添加 'moment'，我们告诉 Vite 不要触碰它。这样，浏览器会在加载页面时直接请求 moment 的原始文件。虽然这可能在首次加载时稍慢，但保证了功能的正确性。对于像 react 这样的库，通常不需要排除，因为 Vite 能很好地处理它的 ESM 版本。
排除后浏览器如何加载这些未预构建的包
直接回答：当包被排除后，Vite 的开发服务器会将对这些包的导入请求代理到原始的 node_modules 目录。浏览器会直接获取这些文件的源代码，并依靠自身的 ES Module 支持来执行。这意味着被排除的包必须是浏览器可理解的格式，或者其入口点指向了正确的 ESM 文件。
这种机制依赖于现代浏览器的原生 ES Module 支持。如果被排除的包只提供了 CommonJS 输出，浏览器将无法直接运行它，除非该包同时提供了 ESM 版本并通过 package.json 中的 module 字段指明。因此，在选择排除哪些包时，务必确认该包是否具备浏览器兼容性。例如，一些老旧的库可能没有 ESM 入口，此时排除它们会导致白屏或控制台报错。在这种情况下，可能需要寻找替代库，或者使用插件手动转换，而不是简单地排除。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
