前端构建工具

产生背景播报

编辑

在浏览器支持ES模块之前，JavaScript并没有提供原生机制让开发者以模块化的方式进行开发。这也正是对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将源码模块串联成可以在浏览器中运行的文件。如webpack、Rollup和Parcel等工具的变迁，它们极大地改善了前端开发者的开发体验。

当开始构建越来越大型的应用时，需要处理的JavaScript代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于JavaScript开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。 [8]

主要功能播报

编辑

一个开发服务器，它基于原生ES模块 提供了丰富的内建功能，速度快模块热更新（HMR）。

一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 [2]

Vite 提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了HMR到Vue.js单文件组件（SFC）和React Fast Refresh 中。 [5]

运行环境播报

编辑

Vite需要Node.js版本18+ 或20+。有些模板需要依赖更高的 Node 版本才能正常运行。 [3]