一、认识Vite

Webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具：

• 比如rollup、parcel、gulp、vite等等

什么是vite呢？ 官方的定位：下一代前端开发与构建工具；

如何定义下一代开发和构建工具呢？

• 我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等 等；
• 所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel；
• 但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多；
• 构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来；
• 所以也有这样的说法：天下苦webpack久矣；

Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。

二、Vite的构造

它主要由两部分组成：

• 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；
• 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源；

目前是否要大力学习vite？vite的未来是怎么样的？

• 目前vite虽然已经更新到2.0，依然并不算非常的稳定，并且比较少大型项目（或框架）使用vite来进行构建；
• vite的整个社区插件等支持也还不够完善；
• 包括vue脚手架本身，目前也还没有打算迁移到vite，而依然使用webpack（虽然后期一定是有这个打算的）；
• 所以vite看起来非常的火热，在面试也可能会问到，但是实际项目中应用的还比较少；

三、浏览器原生支持模块化

但是如果我们不借助于其他工具，直接使用ES Module来开发有什么问题呢？

• 首先，我们会发现在使用loadash时，加载了上百个模块的js代码，对于浏览器发送请求是巨大的消耗；
• 其次，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别；

事实上，vite就帮助我们解决了上面的所有问题。

四、Vite的安装和使用

注意：Vite本身也是依赖Node的，所以也需要安装好Node环境 并且Vite要求Node版本是大于12版本的；

首先，我们安装一下vite工具

npm install vite –g # 全局安装
npm install vite –D # 局部安装

通过vite来启动项目：

npx vite

五、Vite对css的支持

vite可以直接支持css的处理

• 直接导入css即可；

vite可以直接支持css预处理器，比如less

• 直接导入less；
• 之后安装less编译器；

vite直接支持postcss的转换：

• 只需要安装postcss和postcss-preset-env，并且配置 postcss.config.js 的配置文件即可；

npm install postcss postcss-preset-env -D

六、Vite对TypeScript的支持

vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译：

• 只需要直接导入即可；

如果我们查看浏览器中的请求，会发现请求的依然是ts的代码：

• 这是因为vite中的服务器Connect会对我们的请求进行转发；
• 获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析；