性能

虽然 Vite 默认情况下速度很快，但随着项目需求的增长，性能问题可能会逐渐出现。本指南旨在帮助您识别和修复常见性能问题，例如

• 服务器启动缓慢
• 页面加载缓慢
• 构建缓慢

检查您的浏览器设置

某些浏览器扩展程序可能会干扰请求，并减慢大型应用程序的启动和重新加载时间，尤其是在使用浏览器开发者工具时。我们建议在使用 Vite 的开发服务器时，创建一个不包含扩展程序的仅用于开发的配置文件，或切换到隐身模式。隐身模式也应该比不包含扩展程序的普通配置文件更快。

Vite 开发服务器对预打包的依赖项进行硬缓存，并为源代码实现快速 304 响应。在浏览器开发者工具打开时禁用缓存会对启动和完整页面重新加载时间产生重大影响。请确保在使用 Vite 服务器时未启用“禁用缓存”。

审计配置的 Vite 插件

Vite 的内部和官方插件经过优化，以尽可能减少工作量，同时提供与更广泛生态系统的兼容性。例如，代码转换在开发过程中使用正则表达式，但在构建过程中进行完整解析以确保正确性。

但是，社区插件的性能不受 Vite 控制，这可能会影响开发者体验。以下是在使用其他 Vite 插件时需要注意的一些事项

1. 仅在某些情况下使用的较大依赖项应动态导入，以减少 Node.js 的启动时间。示例重构：vite-plugin-react#212 和 vite-plugin-pwa#224。

2. buildStart、config 和 configResolved 钩子不应运行长时间和大量操作。这些钩子在开发服务器启动期间会等待，这会延迟您在浏览器中访问站点的时机。

3. resolveId、load 和 transform 钩子可能会导致某些文件的加载速度比其他文件慢。虽然有时不可避免，但仍然值得检查是否有可能优化的区域。例如，在进行完整转换之前，检查 code 是否包含特定关键字，或者 id 是否与特定扩展名匹配。

   转换文件所需的时间越长，在浏览器中加载站点时请求瀑布就越显著。

   您可以使用 vite --debug plugin-transform 或 vite-plugin-inspect 检查转换文件所需的时间。请注意，由于异步操作往往会提供不准确的时间，因此您应该将这些数字视为粗略估计，但它仍然可以揭示更昂贵的操作。

性能分析

您可以运行 vite --profile，访问站点，然后在终端中按 p + enter 记录 .cpuprofile。然后可以使用 speedscope 等工具检查配置文件并识别瓶颈。您还可以 与 Vite 团队分享配置文件，帮助我们识别性能问题。

减少解析操作

当经常遇到最坏情况时，解析导入路径可能是一项代价高昂的操作。例如，Vite 支持使用 resolve.extensions 选项“猜测”导入路径，该选项默认为 ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']。

当您尝试使用 import './Component' 导入 ./Component.jsx 时，Vite 将运行以下步骤来解析它

1. 检查 ./Component 是否存在，不存在。
2. 检查 ./Component.mjs 是否存在，不存在。
3. 检查 ./Component.js 是否存在，不存在。
4. 检查 ./Component.mts 是否存在，不存在。
5. 检查 ./Component.ts 是否存在，不存在。
6. 检查 ./Component.jsx 是否存在，存在！

如所示，解析导入路径需要进行总共 6 次文件系统检查。您拥有的隐式导入越多，解析路径所需的时间就越长。

因此，通常最好明确您的导入路径，例如 import './Component.jsx'。您还可以缩小 resolve.extensions 的列表以减少常规文件系统检查，但您必须确保它也适用于 node_modules 中的文件。

如果您是插件作者，请确保仅在需要时调用 this.resolve 以减少上述检查次数。

TypeScript

如果您使用 TypeScript，请在 tsconfig.json 的 compilerOptions 中启用 "moduleResolution": "bundler" 和 "allowImportingTsExtensions": true 以直接在代码中使用 .ts 和 .tsx 扩展名。

避免使用桶文件

桶文件是重新导出同一目录中其他文件 API 的文件。例如

src/utils/index.js

export * from './color.js'
export * from './dom.js'
export * from './slash.js'

当您只导入单个 API 时，例如 import { slash } from './utils'，该桶文件中所有文件都需要被获取和转换，因为它们可能包含 slash API，并且可能还包含在初始化时运行的副作用。这意味着您在初始页面加载时加载了比所需更多的文件，导致页面加载速度变慢。

如果可能，您应该避免使用桶文件并直接导入单个 API，例如 import { slash } from './utils/slash.js'。您可以阅读 issue #8237 以了解更多信息。

预热常用文件

Vite 开发服务器仅在浏览器请求时转换文件，这使其能够快速启动并仅对使用过的文件应用转换。如果它预计某些文件很快会被请求，它也可以预先转换文件。但是，如果某些文件的转换时间比其他文件长，仍然可能会发生请求瀑布。例如

给定一个左侧文件导入右侧文件的导入图

main.js -> BigComponent.vue -> big-utils.js -> large-data.json

只有在文件转换后才能知道导入关系。如果 BigComponent.vue 的转换需要一些时间，则 big-utils.js 必须等待轮到它，依此类推。这会导致即使内置了预转换，也会出现内部瀑布。

Vite 允许您预热您知道经常使用的文件，例如 big-utils.js，使用 server.warmup 选项。这样，当请求 big-utils.js 时，它将准备就绪并缓存以便立即提供服务。

您可以通过运行 vite --debug transform 并检查日志来找到经常使用的文件

vite:transform 28.72ms /@vite/client +1ms
vite:transform 62.95ms /src/components/BigComponent.vue +1ms
vite:transform 102.54ms /src/utils/big-utils.js +1ms

vite.config.js

export default defineConfig({
  server: {
    warmup: {
      clientFiles: [
        './src/components/BigComponent.vue',
        './src/utils/big-utils.js',
      ],
    },
  },
})

请注意，您应该只预热经常使用的文件，以免在启动时使 Vite 开发服务器过载。有关更多信息，请查看 server.warmup 选项。

使用 --open 或 server.open 也会提高性能，因为 Vite 会自动预热应用程序的入口点或提供的打开 URL。

使用较少或原生工具

在不断增长的代码库中保持 Vite 快速的关键在于减少源文件 (JS/TS/CSS) 的工作量。

减少工作量的示例

• 如果可能，使用 CSS 而不是 Sass/Less/Stylus（嵌套可以通过 PostCSS 处理）
• 不要将 SVG 转换为 UI 框架组件 (React、Vue 等)。改为将其导入为字符串或 URL。
• 在使用 @vitejs/plugin-react 时，避免配置 Babel 选项，以便它在构建期间跳过转换（仅使用 esbuild）。

使用原生工具的示例

使用原生工具通常会带来更大的安装大小，因此在启动新的 Vite 项目时不会将其设置为默认值。但对于较大的应用程序来说，它可能是值得的。

• 试用对 LightningCSS 的实验性支持
• 使用 @vitejs/plugin-react-swc 代替 @vitejs/plugin-react。