vite2.0介绍及原理分析

在介绍Vite之前，首先来简单回顾一下前端技术的发展历程。前端技术的发展大致可以分为三个阶段，原生JS -> JQuery -> SPA，随着SPA的兴起，三大前端框架Vue、React 、Angular应运而生。但是三大框架又带来了新的问题：

1. 模块化的开发会产生大量的网络请求，而HTTP 1.1有并行连接限制；

2. 很多浏览器对ESM并不支持。

于是Grunt、Gulp、Webpack等打包构建工具出现了，他们可以合并文件，减少网络请求，并且可以通过各种插件解决浏览器兼容问题。

但是，随着我们业务的复杂度提高，代码量越来越大，项目启动、编译的时间就变得越来越长！在使用webpack作为构建工具的开发过程中，不知道大家有没有遇到过这样的问题，改一行代码编译半分钟（这已经是做过webpack各种优化后的结果），严重影响我们的开发效率和幸福度。于是，Vite出现了，它可以完美的规避这些问题！

一、什么是Vite

Vite（法语意为 "快速的"，发音 /vit/）是一个基于浏览器原生 ES Modules 的开发服务器。在开发环境下基于浏览器原生ES Module开发，在生产环境下基于Rollup打包。支持热更新，并且热更新的速度不会随着模块增多而变慢