性能
虽然 Vite 默认运行速度很快,但随着项目需求的增长,性能问题可能会悄然出现。本指南旨在帮助您识别并修复常见的性能问题,例如:
- 服务器启动慢
- 页面加载慢
- 构建慢
检查浏览器设置
有些浏览器插件可能会干涉请求,对于大型应用,特别是在使用浏览器开发工具时,可能会拖慢启动和刷新速度。我们建议在这种情况下,使用 Vite 的开发服务器时,创建一个专门用于开发且不含插件的配置,或者切换到无痕模式。无痕模式的速度也应该比没有插件的常规模式更快。
Vite 开发服务器对预打包的依赖项进行了强缓存,同时对源代码实现快速的 304 响应。如果在浏览器的开发者工具打开的情况下关闭缓存,可能会大幅影响启动速度和全页刷新的时间。因此,在使用 Vite 服务器的时候,请确保没有启用 "禁用缓存" 功能。
审核配置的 Vite 插件
Vite 的内部和官方插件已经优化,以在提供与更广泛的生态系统兼容性的同时做尽可能少的工作。例如,代码转换在开发中使用正则表达式,但在构建中进行完整解析以确保正确性。
然而,社区插件的性能是 Vite 无法控制的,这可能会影响开发者的体验。在使用额外的 Vite 插件时,有一些事情可以注意:
只在特定情况下,大型依赖项应动态导入,以减少Node.js的启动时间。重构示例:vite-plugin-react#212 和 vite-plugin-pwa#224。
buildStart
,config
,和configResolved
钩子不应运行过长的时间和进行大量的操作。这些钩子会在开发服务器启动期间等待,这会延迟可以在浏览器中访问站点的时间。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 将运行以下步骤来解析它:
- 检查
./Component
是否存在,不存在。 - 检查
./Component.mjs
是否存在,不存在。 - 检查
./Component.js
是否存在,不存在。 - 检查
./Component.mts
是否存在,不存在。 - 检查
./Component.ts
是否存在,不存在。 - 检查
./Component.jsx
是否存在,存在!
如上所示,解析一个导入路径需要进行 6 次文件系统检查。您的隐式导入越多,解析路径所需的时间就越多。
因此,通常最好明确您的导入路径,例如 import './Component.jsx'
。也可以缩小 resolve.extensions
的列表以减少一般的文件系统检查,但必须确保它也适用于 node_modules
中的文件。
如果你是插件作者,请确保只在需要时调用 this.resolve
以减少上述检查的次数。
TypeScript
如果你正在使用 TypeScript,启用 tsconfig.json
中的 compilerOptions
的 "moduleResolution": "bundler"
和 "allowImportingTsExtensions": true
以直接在代码中使用 .ts
和 .tsx
扩展名。
避免使用桶文件
桶文件(barrel files)是重新导出同一目录下其他文件 API 的文件。例如:
// src/utils/index.js
export * from './color.js'
export * from './dom.js'
export * from './slash.js'
当你只导入一个单独的 API,例如 import { slash } from './utils'
,需要获取和转换桶文件中的所有文件,因为它们可能包含 slash
API,也可能包含在初始化时运行的其他副作用。这意味着在初始页面加载时,你加载的文件比所需的要更多,导致页面加载速度变慢。
如果可能的话,你应该尽量避免使用桶文件(barrel files),直接导入单独的 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
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 处理嵌套)
- 不要使用
@vitejs/plugin-react-refresh
,而是使用 React Fast Refresh 的原生支持。 - 当使用
@vitejs/plugin-react
时,避免配置 Babel 选项,这样它就会在构建期间跳过转换(只使用 esbuild)。
使用更原生化工具链的例子:
使用更原生化的工具链往往会带来更大的安装大小,因此在启动新的 Vite 项目时不是默认的。但对于较大的应用程序来说,这可能是值得的。
- 尝试实验性的 LightningCSS
- 使用
@vitejs/plugin-react-swc
代替@vitejs/plugin-react
。