这是我参与「第五届青训营」伴学笔记创作活动的第6天

本文将从Vite的简介与使用来介绍Vite

什么是Vite

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）
• 一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

为什么选Vite

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

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

Vite的优点

• 极速的服务启动。 使用原生ESM文件，无需打包
• 轻量快速的热重载 无论应用程序大小如何，都始终极快的模块热替换（HMR）
• 丰富的功能 对TS、JSX、CSS等支持开箱即用
• 优化的构建 可选“多页应用”或“库”模式的预配置RollUp构建
• 通用的插件 在开发和构建之间共享Rollup-superset插件接口
• 完全类型化的API 灵活的API和完整TS类型

Vite的缺点

• 生态不如webpack
• prod环境的构建，目前用的Rollup，原因在于esbuild对于css和代码分割不是很友好
• 还没有被大规模使用,很多问题或者诉求没有真正暴露出来

Vite如何使用

可以使用npm或yarn搭建Vite项目（还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。）

Vite的功能

对非常基础的使用来说，使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而，Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。