背景
这里的背景介绍会从与Vite紧密相关的两个概念的发展史说起，一个是JavaScript的模块化标准，另一个是前端构建工具。
共存的模块化标准
为什么JavaScript会有多种共存的模块化标准？因为js在设计之初并没有模块化的概念，随着前端业务复杂度不断提高，模块化越来越受到开发者的重视，社区开始涌现多种模块化解决方案，它们相互借鉴，也争议不断，形成多个派系，从CommonJS开始，到ES6正式推出ESModules规范结束，所有争论，终成历史，ESModules也成为前端重要的基础设施。
CommonJS：现主要用于Node.js（Node
13.2.0开始支持直接使用ESModule）AMD：require.js依赖前置，市场存量不建议使用
CMD：sea.js就近执行，市场存量不建议使用
ESModule：ES语言规范，标准，趋势，未来
发展中的构建工具
近些年前端工程化发展迅速，各种构建工具层出不穷，目前Webpack仍然占据统治地位，npm每周下载量达到两千多万次。下面是我按npm发版时间线列出的开发者比较熟知的一些构建工具。
当前工程化痛点
现在常用的构建工具如Webpack，主要是通过抓取-编译-构建整个应用的代码（也就是常说的打包过程），生成一份编译、优化后能良好兼容各个浏览器的的生产环境代码。在开发环境流程也基本相同，需要先将整个应用构建打包后，再把打包后的代码交给devserver（开发服务器）。
Webpack等构建工具的诞生给前端开发带来了极大的便利，但随着前端业务的复杂化，js代码量呈指数增长，打包构建时间越来越久，devserver（开发服务器）性能遇到瓶颈：
缓慢的服务启动：大型项目中devserver启动时间达到几十秒甚至几分钟。
缓慢的HMR热更新：即使采用了HMR模式，其热更新速度也会随着应用规模的增长而显著下降，已达到性能瓶颈，无多少优化空间。
缓慢的开发环境，大大降低了开发者的幸福感，在以上背景下Vite应运而生。
什么是Vite？
基于esbuild与Rollup，依靠浏览器自身ESM编译功能，实现极致开发体验的新一代构建工具！
概念
先介绍以下文中会经常提到的一些基础概念：
依赖：指开发不会变动的部分(npm包、UI组件库)，esbuild进行预构建。
源码：浏览器不能直接执行的非js代码(.jsx、.css、.vue等)，vite只在浏览器请求相关源码的时候进行转换，以提供ESM源码。
开发环境
利用浏览器原生的ESModule编译能力，省略费时的编译环节，直给浏览器开发环境源码，devserver只提供轻量服务。
浏览器执行ESM的import时，会向devserver发起该模块的ajax请求，服务器对源码做简单处理后返回给浏览器。
Vite中HMR是在原生ESM上执行的。当编辑一个文件时，Vite只需要精确地使已编辑的模块失活，使得无论应用大小如何，HMR始终能保持快速更新。
使用esbuild处理项目依赖，esbuild使用go编写，比一般node.js编写的编译器快几个数量级。
生产环境
集成Rollup打包生产环境代码，依赖其成熟稳定的生态与更简洁的插件机制。
处理流程对比
Webpack通过先将整个应用打包，再将打包后代码提供给devserver，开发者才能开始开发。
Vite直接将源码交给浏览器，实现devserver秒开，浏览器显示页面需要相关模块时，再向devserver发起请求，服务器简单处理后，将该模块返回给浏览器，实现真正意义的按需加载。
基本用法
创建vite项目
npmcreatevite
latest选取模板
Vite内置6种常用模板与对应的TS版本，可满足前端大部分开发场景，可以点击下列表格中模板直接在StackBlitz中在线试用。
启动
{
"scripts":{
"dev":"vite",//启动开发服务器，别名：`vitedev`，`viteserve`
"build":"vitebuild",//为生产环境构建产物
"preview":"vitepreview"//本地预览生产构建产物
}
}
实现原理
ESbuild编译
esbuild使用go编写，cpu密集下更具性能优势，编译速度更快，以下摘自