Vite结合Esbuild如何显著优化性能？

本文共计2111个文字，预计阅读时间需要9分钟。

目录+前言+初探Esbuild+关键API+-+transform+build+plugin+Esbuild+在Vite中的巧妙使用+预构建+middlewares+内容转换+结束语+前言+在上一篇文章中，为什么有人说vite快，有人说vite慢？+中，我们提到了…

目录

• 前言
• 初探 Esbuild
• 关键 API - transfrom & build
• plugin
• Esbuild 在 Vite 中的巧妙使用
• 预构建
• middlewares 中内容转换
• 结束语

前言

在上一篇 为什么有人说 vite 快，有人却说 vite 慢？ 中，我们提到过开发模式下使用 Vite 会有首屏性能下降的负面效果。之所以会造成首屏性能下降，一方面是 dev server 需要完成预构建才可以响应首屏请求；另一方面是需要对请求文件做实时转换。

也许有的同学会问，是不是针对这两个方面做优化，就可以提升首屏性能呢？原则上这样是没有问题的，而且 Vite 也是这么做的。为了能提升性能，Vite 另辟蹊径的借助了 Esbuild 能快速完成项目打包、文件转换的能力来进行预构建、内容转换，效果非常好。