Vite 是什么，解决了什么，实现原理，缺点？

Vite ：是基于 ESM 新型的前端构建工具，侧重于开发过程提速；
解决了：

  • 冷启动较慢
    • webpack启动会做语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的源码编译打包成低版本、高兼容性的代码，这可满满都是 CPU、IO 操作。
    • Vite只做了 3 件事情
      • 1、Vite是用的 es-module-lexer 来解析成ast拿到import的地址，按照规定重写；
      • 2、启动了一个用于承载资源服务的 service；
      • 3、使用 esbuild 预构建 npm 依赖包。之后就一直躺着，直到浏览器以 http 方式发来 ESM 规范的模块请求时，Vite 才开始“按需编译”被请求的模块。
  • 热更新速度反应慢
    • webpack：当有一个小改动，需要将整个文件重新打包发给浏览器，如果依赖越来越大，理论热更新速度也会越来越慢。
    • Vite：只编译不打包，当有a、b、c3个文件时，产物是编译后的3个文件，当a文件有改动时，就可以精准的只更新a文件了。

实现原理：
基于 ECMAScript 标准原生模块系统 (ES Module) 实现，利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念；JS中遇到 imports 才会发送 http 请求到后端请求资源，真正做到了按需编译加载；通过 WebSocket 来实现的热局部更新通信，因为每个编译文件都是分开加载，所以热更新可以更加准确定位到某个文件。

Vite 缺点：
会产生产生大量的http请求，从而引发并发问题；

补充：之前有打包需求的主要原因：
1、浏览器环境并不支持模块化2、大量的http请求引起并发问题；

学习文档：