一、vite的诞生
之前写过一篇关于前端模块化发展过程的文章，主要梳理了前端发展过程中，commonJS、AMD、CMD、UMD以及ES6模块化的优缺点，以及在各个历史阶段发挥的各自的作用，当时的结论是webpack的出现，结束了前端模块化过程中的很多问题，把各种模块进行打包编译，构建成可以在浏览器上运行的代码。
但是webpack也有非常多的问题，比如随着项目越来越大，导致项目的冷启动会越来越慢，打包时间也越来越慢，但是这两个都还不是最不能忍的，最不能忍的是热更新会越来越慢，想象一下，改了一个字，想看效果得等十几秒。
2020年4月，尤雨溪发了一个推特，大概的意思就是我有个想法，想基于浏览器的es modules，搞一个不用打包的服务，当时并没有引起多大的轰动，原因也非常简单，IE浏览器不支持es modules
但是2020年12月微软宣布以后的产品不再支持IE浏览器，相当于ie的爸爸直接不要他了，听到这个消息，整个前端圈喜闻乐见、大快人心、普天同庆、奔走相告。紧接着2021年2月，尤大大正式推出vite2.0，vite作为前端构建工具开始在圈内引起学习热潮。
二、vite的原理
（一）什么是vite？
借用官网的解释：
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。
重点：
1、我只是一个基于es modules的服务，有点类似于webpack的webpack-dev-server。
2、生产环境打包是基于rollup的，如果你想用webpack打包也是没问题的。
（二）es modules
上面也说了，es modules是vite的核心，如果没有es modules一切都是空谈。es modules是基于浏览器来处理模块的，处理速度是最快的。 这一块可以参考之前关于模块化的文章：
当声明一个 script 标签类型为 module 时，浏览器将对其内部的 import 引用发起 HTTP 请求获取模块内容进行处理。esBuild则只需要负责预编译和按需加载等等工作，主要的工作是浏览器自己来完成的。
（三）esBuild
Esbuild 是一个非常新的模块打包工具，它提供了与 Webpack、Rollup、Parcel 等工具「相似」的资源打包能力，却有着高的离谱的性能优势。
大多数前端打包工具都是基于 JavaScript 实现的，而 Esbuild 则选择使用 Go 语言编写，JavaScript 作为一门解释型语言，每次执行都需要先由解释器一边将源码翻译成机器语言，一边调度执行；而 Go 是一种编译型语言，在编译阶段就已经将源码转译为机器码，启动时只需要直接执行这些机器码即可。
总结起来就是，esBuild处理的更快就对了。
（四）与webpack的对比
Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，在这个过程中全是IO，在node运行下肯定会速度非常慢。
相比之下，vite就舒服很多：
1、启动服务
2、esBuild进行预编译
3、浏览器处理模块发起的 HTTP 请求
4、编译浏览器发起 HTTP 请求的模块
三、vite2在web项目中的应用
现在大部分的项目还是使用vue2.0进行开发的，所以在项目中我们需要在本地起一个vite+vue2.0的服务，从而进行项目的迁移
（一）初始化项目
npm init vite@latest
Project name: vite-vue2
Select a framework: vanilla （这个地方选择原生，选vue的话默认vue3.0）
（二）安装插件
npm install vite-plugin-vue2 --dev
新建一个vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [createVuePlugin()]
}
（三）安装vue
npm install vue@2.6.14 -S（同样的需要加上版本号）
npm install vue-template-compiler
（四）修改文件目录
1、根目录下新建src文件夹，删除main.js
2、src下新建app.vue、main.js
3、index.html引入
<script type="module" src="/src/main.js"></script>
4、修改app.vue
<template>
<div>Hello Vite Vue2</div>
</template>
5、修改main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
（五）运行项目即可
npm run dev
同样构建了一个基于vue-cli的vue2.0项目，冷启动时间感受一下：
配置vuex、vue-router等组件，就可以运行一个完整的vue项目了。
四、总结
很早就写过一个关于vite的demo，当时并没有思考很多，后来总结过webpack和前端模块化以后，再学一遍vite，给我最大的感觉是思路的转变。曾经我们一直都是怎样打包到最小，2021年了，运行才是王道，浏览器自己能做的，没必要嚼碎了再给他。
