vite ​

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

对于代码量大、模块多的项目，Rollup、Webpack等工具不可避免地面临构建慢的问题，使用模块热替换（HMR），其热更新速度也会随着应用规模的增长而显著下降。

Vite 旨在利用生态系统中的新进展解决打包工具带来的开发性能体验问题，主要解决以下问题：

• 开发中构建目标为ES模块，减少打包工作量
• 使用esbuild，加速构建
• 依赖预构建，使用文件缓存、浏览器缓存减少本地开发过程中对node_modules的文件处理、网络请求

vite源码简介 ​

下面是根据[email protected]源码画的思维导图

其中dev、build、optimize命令默认使用esbuild处理ts、tsx/jsx、css等代码的编译、压缩工作。

图上看起来vite本身做的不多，实际上vite通过内置插件（plugins）来提供配置项功能的实现，并且提供插件API方便社区参与贡献。只要应用兼容性要求符合vite要求，就可以大胆在生产环境中使用。

rollup + esbuild ​

vite实践了同时使用rollup、esbuild，并解释了为什么不完全使用esbuild：

• esbuild 插件API不兼容（如上篇文章提到的esbuild开放给插件的能力有限）
• rollup 具有灵活的插件 API 和基础建设

因此，vite融合两者的长处，并在优化开发体验上做工夫，带来了显著的体验提升。