天下武功，唯快不破。在当今社会，面对着各种竞争，面对着各种挑战，谁快一步，谁就会拥有主动权。同样在互联网领域，也讲究快速和敏捷，首屏加载时间迅速，接口返回数据快等，都会给用户带来更丝滑的体验。那么对于我们开发者呢，在开发过程中，如果构建速度快，开发效率自然而然就上升了！因此，在前端开发领域，vite就诞生了！
那么问题来了，vite到底是啥呢？来看看我们尤大大自己的官宣：Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的前端构建工具。你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。
Vite的版本发布也是非常快，去年12月底刚推出vite1.0测试版本，然后过年前就推出了vite2.0！（站在顶端的大佬都这么努力，我们还有什么资格不努力！）
vite2.0新特性
Vite 2.0 其实是 Vite 的第一个稳定版本，它是由于vite1.0的一些设计缺陷而进行一次彻底的重构。首先来说一说它的一些特性：
*快速的冷启动
*即时的模块热更新
*真正的按需编译
这些特点我会在下文通过对比webpack来进行直观的阐述。在2.0版本，尤大大的野心也体现出来了，本来vite的初衷是取代vue-cli，现在它完全和框架无关，并且所有的框架特定支持都由插件来代理实现。目前官网提供了 Vue, React, Preact, Lit Element 的官方模板;同时Vite 是一个基于原生 ESM 的开发服务器，在启动时我们需要通过依赖预打包来达成两个目的：1. 减少模块 / 请求数量；2. 支持 CommonJS 依赖。虽然预打包只有在依赖变动时才需要执行，但在有大量依赖的项目中，每次执行还是可能会需要很长时间。之前vite1.0是使用 Rollup 来执行这个过程，而在 2.0 中切换到了 esbuild，使这个过程又加快了几十倍！
vite和webpack的比较
Webpack原理图
Vite原理图
- 从上图我们可以看出来，Webpack Dev Server 在启动时，需要先打包—遍，然后启动开发服务器，这一过程是需要耗费很多时间的。而vite是直接启动Server，并不会先编译所有的代码文件
- 在进行热更新时，Webpack 修改某个文件过后，会自动以这个文件为入口重写 build—次，所有的涉及到的依赖也都会被加载一遍，所以反应速度会慢很多。而Vite 只需要立即编译当前所修改的文件即可，所以 响应速度非常快
- Webpack 工具的做法是将所有模块提前编译，不管模块是否会被执行，都要被编译和打包到 bundle 里。随着项目越来越大打包后的 bundle 也越来越大，打包的速度自然也就越来越慢。而Vite 利用现代浏览器原生支持 ESM 特性，省略了对模块的打包。也就意味着不需要分析模块的依赖、不需要编译，只有具体去请求某个模块时才会编译这个文件，实现真正的按需编译！
Vite工程目录
既然这么快，那就起一个vite工程来看看吧！同常见的开发工具一样，vite 提供了用 npm 或者 yarn 一建生成项目结构的方式，直接一行命令，同时也有一些模板可供选择，今天我们选择react版本来看一下（首先确保你的 Node.js 版本 >=12）
然后安装好依赖后，真的是瞬间秒开
我们来看看目录结构，也是非常的精简
打开index文件，我们会看到
<body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body>
通过将script标签的type属性设置为module，这样main.js中就可以使用ES6 Module模块功能；
import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App from './App' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') )
上面是我们写的main.js文件，让我们打开浏览器控制台，看看通过vite构建后请求的main.js文件
通过上面我们会发现，当 script.type 为 module 时，通过 src 及 import 导入的文件会发送 http 请求，而Vite 会拦截这些请求，并对请求的文件路径进行特殊的处理，其主要原理通过运用Koa服务，实现了按需读取文件，省掉了打包步骤。
其实vite2.0在依赖预编译，插件机制，以及css的支持等方面都做了很方多优化和改革，这些我就不一一的赘述了，感兴趣的同学可以在官网学习，笔者也在研究相关的源码，回头有机会和各位再做一次深入分享。
关于Vite的未来思考
笔者在写作期间，尤大大在 Twitch 上作客了 GitHub Open Source Friday 节目，里面也一直在聊他最近的vite相关内容，还在线diss了webpack ,可见尤大大对vite取代webpack的信心，感兴趣的同学可以看一看，我把链接贴到了文章末尾。在我个人看来，我被vite深深的折服了，无论其构建速度，还是尤大大的思考方式和设计理念。当然任何技术都不可能完美的，只有合适才是最重要的！
目前vite在git上已经有22.6k个star,说明是迎合市场的需要的，当然毕竟现在还没有大规模的使用，可能会存在一定的坑；且还有一些很相似的构建工具（也从模块化角度）的竞争对手，比如Snowpack，他的生态相比于vite更加丰富。所以，vite的未来，那就让时间来证明吧！
附录:
- Open Source Friday 节目:https://www.bilibili.com/video/BV1kh411Q7WN
- Vite Github:https://github.com/vitejs/vite
- Vite 官方文档：https://www.pipipi.net/vite/guide/
