这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
我当前的学习笔记都是从《深入浅出Vite》中记录。
vite是目前最高效的构建工具。
1.vite的开发效率很高，本地启动一个项目是需要短短几毫秒时间，如果使用webpack光是热更新就需要十几秒。原因是vite在开发阶段使用了基于浏览器原生 ESM 的支持实现了no-bundle服务，另一方面借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译，从而能够有效提高开发效率。
2.Vite 使用浏览器原生 ESM 实现模块加载，可以将CJS转换为 ESM。
3.vite 还内置了 ts/jsx/scss等语法的支持.
4.还使用了rollup打包。
ESM 为什么好
1、CommonJS 是最早的模块规范，他依赖nodejs，而且还是同步执行代码，模块的请求会阻塞进程，放在服务器端（本地）是没有问题的，但是一到浏览器就会出现页面加载慢的情况。
2、AMD的全称是Asynchronous Module Definition，异步模块规范，异步加载结局了CJS的问题，但是他define 、 require的代码复杂，所以还能优化。
3、ES6 Module，由ESMAScript官方推出的规范，并且已经在浏览器内置，在html中script只要有type = "module" 就能够使用ESM的模块加载，这也是vite开发效率高的原因，模块加载交给浏览器做，vite就不需要像webpack一样打包文件再交给浏览器了。
//main.js
import {x} from 'x.js'
console.log(x) // 'xxx'
//x.js
export const x = 'xxx'
//html中使用
<script type="module" src="./main.js"></script>
nodejs也支持了ESM ，只需在package.json中添加"type":"module"即可。
小结： vite的优点：1.使用原生ESM，项目启动快，无需打包；2.超快的热更新。3.内置ts、scss、jsx语法的支持，开箱即用。
