Vue3 更高效的构建工具——Vite

---

前言

本文讲解了构建工具 Vite，目前只有vue3才可以使用Vite，如果本文对你有所帮助请三连支持博主。

---

下面案例可供参考

一、Vite简介

Vite 是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。

1. Vite组成

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如模块热更新（HMR）。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。总的来说，Vite希望提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性。不过，相比Vue-cli配置来说，Vite构建的项目还是有很多的配置需要开发者自己进行处理。

---

2.为什么选 Vite?

时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

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

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

---

二、Vite的优缺点

Vite 的快，主要体现在两个方面: 快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现，完全归功于 Vite 借助了浏览器对 ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle 机制。

1. 快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载，而我们所熟知的webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，打包时间必然很长。

2. 打包编译速度：当需要打包到⽣产环境时，vite使⽤传统的rollup进⾏打包，所以，vite的优势是体现在开发阶段，另外，由于vite使⽤的是ES Module，所以代码中不可以使⽤CommonJs；

3. 热模块更新：在HRM热更新⽅⾯，当某个模块内容改变时，让浏览器去重新请求该模块即可，⽽不是像webpack重新将该模块的所有依赖重新编译；

---

vite优点

-unbundle 机制的核心:
模块之间的依赖关系的解析由浏览器实现；
文件的转换由 dev server 的 middlewares 实现并做缓存；
不对源文件做合并捆绑操作；

vite缺点

由于 unbundle 机制，首屏期间、懒加载方面需要额外做以下工作:和 Webpack 对比，Vite 把需要在 dev server 启动过程中完成的工作，转移到了 dev server 响应浏览器请求的过程中，不可避免的导致首屏性能下降。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时，首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来。

不对源文件做合并捆绑操作，导致大量的 http 请求；dev server 运行期间对源文件做 resolve、load、transform、parse 操作；预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止。

---

三、使用Vite创建Vue3项目

1. 创建 vite 的项目

按照顺序执行如下的命令，即可基于vite 创建vue 3.x 的工程化项目：

1. npm init vite-app 项目名称
2. cd 项目名称
3. npm install
4. npm run dev

---

2.项目的结构

node_modules 目录用来存放第三方依赖包

public 是公共的静态资源目录

src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）

.gitignore 是 Git 的忽略文件

index.html 是 SPA 单页面应用程序中唯一的HTML 页面

package.json 是项目的包管理配置文件

---

assets 目录用来存放项目中所有的静态资源文件（css、fonts等）

components 目录用来存放项目中所有的自定义组件

App.vue 是项目的根组件

index.css 是项目的全局样式表文件

main.js 是整个项目的打包入口文件

---