一、vite 究竟是干甚么的？

vite 事实上是两个面向全国当代应用程序，如前所述 ES module 同时实现了两个更轻盈的工程项目构筑装箱辅助工具。

vite 是法文中轻盈的原意。

vite 的特征：

1、轻盈的冷服务项目开启。vite 是面向全国当代应用程序的，应用程序全力支持 ES6 的 imports特性，借助应用程序导出 imports，在服务项目器端按需校对回到，不展开装箱。因此运转速率较快。

2、合作开发中的热预览。窃听工程项目标识符，有更动时，会立刻再次运转。

3、按需展开校对，不能创下全数的DOM。vite只须要在应用程序允诺源标识符时展开切换并按需提供更多源标识符。依照情境静态引入标识符，多于在现阶段萤幕前述采用TNUMBERV12V4会被处置。

vite 对当代的应用程序全力支持性较为好，现代的应用程序能透过非官方提供更多的 @vite/plugin-legacy 应用程序全力支持。

二、vite 建立 vue 工程项目

vite 是构筑辅助工具的低阶PCB，它的外部只不过是 Rollup。

vite 是尤雨溪随著vue3测试版一同正式发布的两个辅助工具，因此 vite 只提供更多了 vue3 的工程项目构筑形式，没 vue2.0 构筑形式。除能构筑 vue3 工程项目以外，还能构筑 vue-ts、react 、react-ts、preact、preact-ts、vanilla、vanilla-ts、lit、svelte。

2.1、亲自动手教你构筑 vite 工程项目

关上配置文件辅助工具，采用npm指示：

运转结论，如图：

输入须要建立的工程项目名“ learn_vite ”，如果不输入，默认是 “ vite-project ” 。

回车展开下一步，须要选择建立工程项目的类型，如图：

采用上下箭头切换，选择我们最熟悉的 vue ，回车展开下一步。

展开选择是否为 ts? vite 原生全力支持 ts 。我们直接选择vue。不要 ts。

此时，工程项目建立完成了，须要进入工程项目，安装依赖，就能开启服务项目了。

依照提示地址，去访问我们刚刚建立的第两个工程项目。如图所示。

2.2、 vite建立文件目录

建立好工程项目之后，采用编辑器关上工程项目，我们能看到工程项目结构如图：

学习vite是如何运转工程项目的，首先从配置文件入手。关上package.json文件，标识符如下：

找到开启工程项目的指示，以及装箱指示。

三、vite VS webpack

3.1、vite 速率快有多快？

我们建立两个工程项目，两个采用 vite ，另两个采用 webpack 。建立完成之后，开启服务项目，对比开启时间，我们就知道 vite 有多快了。

开启服务项目时，webpack 须要先装箱工程项目，装箱之后再开启工程项目，但是 vite 完全跳过了装箱这个概念，服务项目器随起随用。因此在开启服务项目时，vite 比 webpack 的速率快多了。

3.2、vite 热预览效率有多高？

一些装箱器的合作开发服务项目器将构筑内容存入内存，这样它们只须要在文件更改时，使模块图的一部分失活，但它也须要整个再次构筑并再次载入页面。这样代价很高，再次加载页面会失去应用的现阶段状态。因此 vite 全力支持了静态模块热加载（HMR），也是允许两个模块“热替换”自己，对页面的其他部分没影响，也是只替换预览了一部分有改变的元素，因此大大改进了合作开发体验。

vite 同时还借助 http 头加速整个页面的加载，依赖模块允诺会透过 Cache-Control:max-age=31536000，immutable 展开强缓存，再次允诺的时候，缓存的内容就不须要再次允诺。

3.3、采用语言不同

webpack 采用的是 node.js 去同时实现的，而 vite 采用的是esbuild预构筑依赖。而es build采用Go编写的，比 node.js 编写的装箱器预构筑依赖快 10-100 倍。

上边说这么多，净夸 vite 有多优秀了，难道 vite 是这么强大，没甚么缺点吗？

四、vite 局限

vite 与webpack 相比，毕竟出道时间有点短，它的生态还不是不完善。webpack最牛之处就在于 loader 和 plugin 非常丰富。

vite 装箱工程项目时，目前采用的是 Rollup，对 CSS和标识符分割不是很友好。

vite 刚兴起不久，生态系统还不够完善，建议大家在建立工作工程项目的时候还是采用 webpack 。自己的工程项目能采用 vite 。